Forms [Jan. 4, 2012, 1:57 a.m.]

Almost any interactive website will have a web form. Web forms allow users to send information, such as a search query, to the web server.

There are several interface elements that you can use to construct an interactive form. This topic will cover basic usage for the set of HTML5 web form elements.

<form>

The <form> tag is used to create a form. All sub elements of the form will be nested within the <form></form> tags.

<form>
    <!-- Nested form elements -->
</form>

<label>

Each form element can have an optional label associated with it. The label is helpful to indicate to the user the purpose of the form element. The following example shows a text field with a label element.

<label for="text-field">Label text</label>
<input type="text" id="text-field" />

The label 'for' text associates the label with another element containing a matching 'id'.

<input>

The input tag has multiple uses and varies in appearance and function based on the 'type' attribute.'

type="text"

The text field type is an one-line text box. E.g. if you want users to create a username:

<label for="username">Choose a username:</label>
<input type="text" id="username" />

type="textarea"

A textarea is a multi-line text input. These are typically used when longer answers are expected from a user. E.g. a comment field.

<label for="comment">Leave a comment:</label>
<input type="textarea" id="comment" name="comment" />

type="password"

Password fields are used to protect users from onlookers. When a user enters text into a password field, each character is replaced by a gerneric character (often a small circle or asterisk.)

<label for="pasword">Enter a password:</label>
<input type="password" id="password" />

type="radio"

Radio buttons hang out in groups. There will be two or more radio buttons grouped together, only one of which will be selected at any given time. Radio buttons are grouped by the 'name=' attribute.

<input type="radio" name="choice" value="yes">Yes</input>
<input type="radio" name="choice" value="no">No</input>

type="checkbox"

Checkboxes often, but not always, hang out in groups. Checkboxes are more individualistic, or differentiated, than radio buttons. A checkbox can have an individual state that is independent of its checkbox peers.

<label><input type="checkbox">I have read the corporate flotsam.</label>

type=submit"

The submit type defines a button that, when pressed, submits the form (or triggers client side scripts such as validation, etc.). We will cover client side actions at a later datetime.