XHTML 5 Reference

go to previous section go to next section


Forms

Defining a Form

Each form definition must be enclosed within <form action=""> </form> tags.

A form can be divided into sections using the <fieldset> </fieldset> tags. If broken into sections then each section should have a title contained within <legend> </legend> tags.

The following optional attributes can be specified on a <form> tag:

A <form> tag may not be nested within another <form> tag.

Input Fields

The <label> </label> identify text associated with a form field as being a label for that field.

The following optional attributes can be specified on a <label> tag:

A <label> tag may not be nested within another <label> tag.

Most input fields are defined using the <input type=""/> tag. One exception is the text box (which allows multiple lines of text to be input). This is defined using <textarea rows="" cols=""> </textarea> tags.

The type of an input tag can be any one of:

The following optional attributes can be specified on a <input> tag:

The following optional attributes can be specified on the <textarea> tag:

When a list attribute is specified on an input tag it allows a <datalist id=""> to be connected to it. The list attribute specifies the id of the datalist. A datalist converts the ordinary input field into a combobox. The input itself provides the user enterable half of the combobox while the datalist contains the option tags that provide the select list half of the combobox.

Buttons and Selection Lists

Push buttons can now be defined using <button> </button> tags.

The following optional attributes can be specified on the <button> tag:

A <button> tag may not be have another <button> tag, <a> tag, <input> tag, <select> tag, <textarea> tag, <label> tag, <form> tag, or <fieldset> tag nested within it.

Selection lists can be created using the <select> </select> tags. Each entry within the selection list needs to be defined within <option> </option> tags.

The following optional attributes can be specified on the <select> tag:

The following optional attributes can be specified on the <option> tag:

It is also possible to group items within a selection list using <optgroup label="" > </optgroup> tags.

The following optional attributes can be specified on the <optgroup> tag:

More Form Fields

<progress value="" max=""> </progress> displays a progress bar where the value attribute contains the current value and the max attribute contains the maximum value (ie progress complete). No progress is identified by a value of zero. Both attributes must be able to be converted to floating point numbers.

<meter min="" max="" low="" high="" value="" optimum=""> </meter> represents a scalar measure within a known range. All attributes must be able to be converted to floating point numbers and the following comparisons must also be true - min >= value >= max AND min >= low >= high >= max AND min>= optimum >= max.

<keygen name=""/> generates a key pair - the private key is saved to the user's key store while the public key is submitted to the server as a part of the form. This can then be used on the server for various security related purposes.

<output name="" for=""/> represents the result of a calculation or user action. Instead of displaying the results in the page itself or in a readonly input field you can display it in this field type instead.

go to previous section go to next section

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate