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

Additional Elements

• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• reset
• search
• submit
• tel
• text
• time
• url
• week