skip to contentstylized crane logoWhite Crane Education

Form Tags

An XHTML form has the same function as a real world form: It gives users a way to pass information back to the website. Technically speaking a form is a container for text, markup (i.e. tags) and special input elements called controls. XHTML form tags can be divided into two categories: structural tags and input tags.

Structural Tags

Structural tags define the form itself. They also provide a method for labeling and organizing input fields.

<form> </form> creates an XHTML form
<fieldset> </fieldset> groups input elements similar to the way div tags group other block tags
<label> </label> creates a label that can be associated with an individual input field
<legend> </legend> assigns a caption to a fieldset

Input Tags

Input tags provide a place for the user to provide data to the website either through entering text or selecting from options.

<button> </button> creates an clickable button
<input /> creates a text box, radio button, checkbox, hidden field, password field or clickable button depending on the value of the type attribute
<select /> creates a combo box or list box depending on the value of the size attribute
<optgroup> </optgroup> groups a set of option elements
<option> </option> creates an option within a select element


XHTML Output
    <legend>Customer Address Information</legend>
    <label>Address</label> <input name="address" type="text" /><br />
    <label>State</label> <input name="state" type="text" /><br />
Customer Address Information

The border around the fields is automatically provided by the fieldset tag. The legend is automatically positioned in front of the border. For cross-browser consistency, you should put the legend at the beginning of a fieldset. Firefox 1.0.4 positions the legend at the top of the fieldset regardless of where it's located within the fieldset tags. IE 6.0 has different behaviors based on whether the legend is at the top, middle or bottom of a fieldset.