Forms

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="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="date"

You can collect date and time information from the user with the following input types:

date
time
datetime
datetime-local
month

All of these inputs are styled by the browser, and not all are supported by every browser.

The 'date' input will provide the user with a convenient date selector, styled after a calendar.

<input type="date" />

'time' will provide the user with a numeric style chooser that constrains choices to time values (e.g. 11:30). Times after noon (12PM) are entered using 24 hour time format. E.g. 5PM is 17:00.

<input type="time" value="17:30" />

Date and time can be combined with the 'datetime' input. 'datetime' expects values to be entered in UTC (Coordinated Universal Time).

<input type="datetime" value="2012-01-12T13:00" />

'datetime-local' allows the user to select based on their local time zone.

<input type="datetime-local" value="2012-01-09T21:00" />

'month' presents the user with a date picker and only captures the year and month of their choice.

<input type="month" value="2012-01" />

type="email"

The email input can be used to gather one or more email addresses.

<input type="email">
<input type="email" multiple="multiple" />

type="file"

The file input allows a user to select one or more files for upload to the server.

<input type="file">
<input type="file" multiple="multiple" />

type="hidden"

Hidden input fields are, as the name suggests, hidden from the user. They can be used for form input that you do not need the user to edit, such as language or referring page.

<input type="hidden" name="language" value="HTML" />

type="image"

The image input acts as a submit button and allows you to choose your own custom image for the user to click. Take care to design your clickable image so that users will intuitively sense that it is a button.

<input type="image" src="click.png" alt="Click" />

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.

type="range"

Sometimes you want the user to select a number within a range of numbers. For example, choose a number between 1 and 10.

Three! Right?

<input type="range" name="choose-number" min="1" max="10" />

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.

<input type="submit" value="Submit" />

But wait! There's more!

HTML5 has many great form elements to choose from. Lets look at a few more important and helpful elements.

<button>

The submit button is helpful for form submisison. What if you want a button for something else. For example, what if you want a horn button? Who knows why, but here's how.

<button name="horn">Honk me!</button>

Now that is just absurd.. well, maybe not. It's great though!

You can use buttons for all sorts of actions. Brew coffee, fire torpedos, dispensing treats, you name it.

Task

Create a form using as many of these elements as you can. Be sure to label each element to help users interact with the form. Post a link to your form in this task discussion area.