Contents:

---

Please note that the form demos on this page will not actually send anywhere; their sole purpose is to illustrate the various parts of a form.

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <form> tag

Every form begins with <form> and ends with </form>. Between those tags, there are four tags which define various types of form elements. Those tags are: <input>, <select>, <option>, and <textarea>.

The <form> tag itself has one required attribute, action="", which defines where the form contents will be sent when it has been submitted by the user. Most often, this destination is some kind of form processing script, located on the server. The <form> tag also takes the optional method="" and enctype="" attributes, in addition to other attributes used in many other HTML tags.

The method="" property can be either get (the default) or post. Using <form method="get"> adds the form contents to the browser's URL (useful for searches), while <form method="post"> hides the sent form data from the browser (used for sending email or sensitive information).

enctype="" specifies the MIME type used to encode the form data. It defaults to enctype="application/x-www-form-urlencoded". If the form is used to upload files, then this should be set to enctype="multipart/form-data".

The <input> tag

The <input> tag is used to define most of the form elements. It takes no separate closing tag. To conform to XHTML rules, it self-closes with /> at the end.

The type of form element is, appropriately enough, defined by the type="" attribute. The most commonly used <input> types (with examples of use) are:

• <input type="text" /> Creates a single-line textbox for typing text. The size="" defines the box width in characters, the maxlength="" defines the maximum number of characters which can be entered*, the name="" defines the data field to be processed (may not include spaces), and the value="" optionally pre-sets specific text in the box.
  *Setting a maximum number of characters prevents someone from pasting (for example) an executable script or other dangerous code. For security, a server-side form processing script should also limit the number of characters which can be typed into a textbox, as anyone could submit a copy of your form from which the maxlength attribute has been removed.
  

  ---

  <form action="" method="">
 <input type="text" size="32" maxlength="80" name="SenderName" value="your name" /><br />
 <input type="text" size="32" maxlength="80" name="Sender_Email" /><br />
 <input type="text" size="16" maxlength="80" name="Nationality" />
</form>
  

  ---

• <input type="checkbox" /> Creates multiple checkboxes, any number of which may be selected by the user. The name="" defines the data field to be processed (may not include spaces), the value="" represents the data for each checkbox to be submitted, and the checked="checked" allows a box to be pre-checked. Note that the name="" attributes within a set of checkboxes must all be unique, as this is what allows multiple boxes to be chosen.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 Choose a number:<br />
 <input type="checkbox" name="number1" value="1" checked="checked" />one<br />
 <input type="checkbox" name="number2" value="2" />two<br />
 <input type="checkbox" name="number3" value="3" />three<br />
 <input type="checkbox" name="number4" value="4" />four<br />
 <input type="checkbox" name="number5" value="5" checked="checked" />five<br />
</form>
  

  ---

• <input type="radio" /> Creates multiple radio buttons, only one of which may be selected by the user. The name="" defines the data field to be processed (may not include spaces), the value="" represents the data for each checkbox to be submitted, and the checked="checked" allows a radio button to be pre-selected. Note that the name="" attributes within one set of buttons must be the same, as this is what allows only one choice to be selected.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 Choose a Primary Colour:<br />
 <input type="radio" name="pColour" value="red" />red<br />
 <input type="radio" name="pColour" value="blue" checked="checked" />blue<br />
 <input type="radio" name="pColour" value="yellow" />yellow<br /><br />

 Choose a Secondary Colour:<br />
 <input type="radio" name="sColour" value="green" />green<br />
 <input type="radio" name="sColour" value="orange" />orange<br />
 <input type="radio" name="sColour" value="violet" />violet
</form>
  

  ---

• <input type="hidden" /> Prevents a field from being displayed on the page with the form. Often used to indicate email addresses where the form will be sent, or a referring page, or other information which does not require user interaction.
  Note that this is not a secure attribute! The hiddeninfo is only hidden from browser display-- it is still easily viewed in the page's source code, and is visible to search engines and scripts. Therefore, do not use this attribute to hide sensitive information like credit card numbers, or banking info, or other confidential data!
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 <input type="hidden" name="reply" value="ExAcT_URL_Of_RePLy_PaGe" />
 [visible parts of form go here ]
</form>
  

  ---

• <input type="password" /> This is a textbox which hides its contents with a set of asterisks. It allows passwords to be submitted invisibly. Used mostly for login forms.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 Username:<br />
 <input type="text" name="Username" /><br />
 Password:<br />
 <input type="password" name="Password" />
</form>
  

  ---

• <input type="file" /> This allows a user to upload a file to the form's server. Its use also requires 2 attributes to be set inside the <form> tag:  method="post" and enctype="multipart/form-data". This form element automatically creates both a text box for typing in a file name, and a "Browse" button for searching for the file on the user's hard drive.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="post" enctype="multipart/form-data">
 <input type="file" name="upload" />
</form>
  

  ---

• <input type="submit" /> This creates a Submit button, which is used to send the form data to the server. The value="" can be any text, and will display on the button.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 <input type="submit" value="Please Send Now" />
</form>
  

  ---

• <input type="reset" /> This creates a Reset button, which allows the user to clear all form fields and start again. As with the Submit button, the value="" can be any text, and will display on the button.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 <input type="reset" value="Clear Form" />
</form>
  

  ---

• <input type="image" /> This element allows you to use an image as a Submit button. It requires the src="" and alt="" attributes inside the <input> tag, to indicate the location of the image file, and alternate text if the image doesn't load. Images may be in .jpg, .gif, or .png format.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 <input type="image" src="path/to/image_file.png" alt="descriptive text" />
</form>
  

  ---

• <input type="button" /> This creates a generic button control. By itself, the button doesn't do anything; but with the addition of client scripting code, like Javascript, it can be controlled in various ways. Like the Submit and Reset buttons, its value="" displays on the button face.
  

  ---

  <form action="ExAcT_path_to_your_form_processor" method="">
 <input type="button" value="Button Text" onclick="[Javascript instructions]" />
</form>
  

  ---

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <textarea> tag

The <textarea> tag creates a multi-row text box. It allows the form user to type a message into the form, which will be sent along with the rest of the form data.

The width and height of the box can be controlled by setting the attributes, cols="" (number of columns wide) and rows="" (number of rows high). As with the single line textbox, you may also include maxlength="" to limit the number of characters it will accept. But make sure your form processing script also sets a character limit on the server, to prevent someone from submitting anything other than a friendly text message.

If you would like your textarea to already contain some text for the user to read, type it between the opening and closing <textarea> tags.

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <select> and <option> tags

The <select> tag is used together with the <option> tag, to choose one or more items from a listbox or dropdown list.

By default, only one option is displayed at a time, and only one option can be selected at a time. To allow multiple selections, the <select> tag can include a size="" attribute, and a multiple="multiple", which defines how many options display at once, and allows the user to select more than one at a time. Setting size="1" (the default) produces a dropdown box, and any amount greater than 1 produces a list box.

An option may be pre-selected by placing selected="selected" inside the appropriate <option> tag.

In the A to E dropdown menu, the value="" of the first option is left empty, to create a header line. In the "F to J" dropdown menu, the empty option has been omitted. You can choose whichever way works best for you.

You can have as many options as you want inside each <select> tag. If you use more than one <select> tag, each one must have a unique name. As with the <input> tag above, a name may not contain spaces.

Example of use:

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <optgroup> tag

The <optgroup> tag can be used in dropdown and list boxes to contain a group of <option> tags. It helps to visually and logically group similar options in a dropdown list together. It takes the attribute, label="", which can contain header text to label each group. It also requires a closing </optgroup> tag. Use it to surround a group of <option> tags. Example coding:

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <fieldset> and <legend> tags

The fieldset tag is used to group several related form elements together. Some browsers will visually show the groupings, while others will read the form elements aloud. The fieldset also facilitates tabbed navigation of a document. You can add a caption to a fieldset tag with the legend tag, which some screen readers can read aloud as well. While the legend tag not widely supported by current browsers, it must be placed directly after fieldset, before any other elements.

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

The <label> tag

The <label> tag can be used to label any input, textarea, or select form element. The optional for attribute can be used to associate the label with a particular element, by making its value the same as the element's id. Labels make a form more accessible, because they can be read by speech synthesizers, and because they can make the associated form field clickable in a visual browser.

Coding:

And there you have it. Those are the basics of form coding.
Coming soon:  Making the form work

<form> | <input> | <textarea> | <select> | <option> | <optgroup> | <fieldset> | <legend> | <label>

---