html tutorials  ||  < xhtml forms >

XHTML FORM SYNTAX + NOTES

Following is a guide to formatting basic forms in xhtml — feel free to copy and paste any code that may be of use to you!

 

<!-- START FIELDSET: note that fieldset and the accompanying legend tags are optional with forms, and may be either wrapped outside the form or nested inside form - in example below, fieldset + legend are wrapped outside the form -->

<fieldset style="margin-top: 15px;">

   <legend style="font-family: monospace; font-size: larger; border: 1px solid black;"><span style="background-color: #eee;"> XHTML Form Tutorial: </span></legend>

 

 XHTML Form Tutorial: 

 

 

<!-- START FORM -->

<form name="registration" action="formscript.php" method="post" enctype="multipart/form-data">
<!-- enctype="multipart/form-data" == NECESSARY FOR FILE UPLOAD TAG -->

 

 

   <p>
      <input type="checkbox" /> test 1<br />
      <input type="checkbox" /> test 2<br />
   </p>

test 1
test 2

 

 

   <input type="hidden" />

   <!-- HIDDEN INPUT TYPE USED BY PROGRAMMERS AND USUALLY NOT NEEDED FOR FRONT-END DEVELOPMENT -->

 

 

   <p>username: <input type="text" name="user" /></p>

username:

 

 

   <p>password: <input type="password" name="password" /></p>

password:

 

 

   <p>
      <input type="radio" name="joke" value="a" /> cricket jokes <br/>
      <input type="radio" name="joke" value="b" /> crazy jokes <br/>
      <input type="radio" name="joke" value="c" /> nice jokes <br/>
   </p>

cricket jokes
crazy jokes
nice jokes

 

 

   <p>
      <select name="tutorials">
         <option value="html">HTML tutorial</option>
         <option value="css">CSS tutorial</option>
         <option value="javascript">JAVASCRIPT tutorial</option>
      </select>
   </p>

 

 

   <p>
      <label for="textarea" style="font-weight: bold;">YOUR FEEDBACK:</label><br />
      <textarea name="textarea" id="textarea" rows="3" cols="36" style="font-family: monospace;">this text is written in the textarea</textarea>
   </p>


 

 

   <p>
      <input type="file" name="uploaded_file" accept="application/msword, application/rtf" />
   </p>

 

 

   <p>
      <input type="button" name="button1" value="click me -- i'm an input type button -- i'm not recommended" />
   </p>

 

 

   <p>
      <button type="submit" name="button2" value="clicked">submit me -- i'm a button tag -- i'm recommended</button>
   </p>

 

 

   <p>
      <input type="image" src="./graphic-button.gif" />
   </p>
   <!-- BY DEFAULT type="image" MEANS SUBMIT -->

 

 

 

   <p>
      <input type="reset" value="reset" />
      <input type="submit" value="submit" style="background-color:#ff0; color:#000; border: 1px solid #000;" />
   </p>

 

 

</form>

<!-- END FORM -->

 

 

</fieldset>

<!-- END FIELDSET -->

 

NOTE -- here's an HTML BUTTON ELEMENT that is not required to be inside a form -- it is safe to use outside of a form and xhtml-compliant:

<!-- NO FORM -->

<p>
   <button onclick="hello();">click me for a javascript function!</button>
</p>

<!-- NO FORM -->

HERE is the COMPLETE SYNTAX for the xhtml form above:

<!-- START FIELDSET -->

<fieldset style="margin-top: 15px;">

   <legend style="font-family: monospace; font-size: larger; border: 1px solid black;"><span style="background-color: #eee;"> XHTML Form Tutorial: </span></legend>

   <!-- START FORM -->

   <form name="formname" action="somescript.php" method="post" enctype="multipart/form-data">
   <!-- enctype="multipart/form-data" == NECESSARY FOR FILE UPLOAD TAG -->

      <p>
         <input type="checkbox" /> test 1<br />
         <input type="checkbox" /> test 2<br />
      </p>

      <!-- HIDDEN INPUT TYPE USED BY PROGRAMMERS, USUALLY NOT FOR FRONT-END DEVELOPMENT -->
      <input type="hidden" />

      <p>username: <input type="text" name="user" /></p>

      <p>password: <input type="password" name="password" /></p>

      <p>
         <input type="radio" name="joke" value="a" /> cricket jokes <br/>
         <input type="radio" name="joke" value="b" /> crazy jokes <br/>
         <input type="radio" name="joke" value="c" /> nice jokes <br/>
      </p>

      <p>
         <select name="tutorials">
            <option value="html">HTML tutorial</option>
            <option value="css">CSS tutorial</option>
            <option value="javascript">JAVASCRIPT tutorial</option>
         </select>
      </p>

      <p>
         <label for="textarea" style="font-weight: bold;">YOUR FEEDBACK:</label><br />
         <textarea name="textarea" id="textarea" rows="3" cols="36" style="font-family: monospace;">this text is written in the textarea</textarea>
      </p>

      <p>
         <input type="file" name="uploaded_file" accept="application/msword, application/rtf" />
      </p>

      <p>
         <button type="submit" name="button2" value="clicked">submit me -- i'm a button tag -- i'm recommended</button>
      </p>

      <p>
         <input type="button" name="button1" value="click me -- i'm an input type button -- i'm not recommended" />
      </p>

      <p>
         <input type="image" src="./graphic-button.gif" />
      </p>
      <!-- BY DEFAULT type="image" MEANS SUBMIT -->

      <p>
         <input type="reset" value="reset" />
         <input type="submit" value="submit" style="background-color:#ff0; color:#000; border: 1px solid #000;" />
      </p>

   </form>

   <!-- END FORM -->

</fieldset>

<!-- END FIELDSET -->

HERE's some more INFORMATION on forms!

The four tags that can be used to build a form are:

  1. input
    • button
      • the input button -- <input type="button" value="click me" onclick="someAction();" /> -- will not submit the form automatically, you need to use javascript to cause an action
      • I would recommend using the <button>...</button> element rather than this element, as the <button>...</button> element is more flexible
    • checkbox
    • file
    • hidden
    • image
    • password
    • radio
    • reset
    • submit
    • text
  2. select
  3. button
    • The <button>...</button> tag defines a versatile button element for XHTML forms
    • ex. <button type="submit" value="clicked">submit me</button>
  4. textarea

THAT's it!

© 1999—2008 fatgraffix design studio. all rights reserved.