HTML Form Elements

This chapter describes all the different HTML form elements.

<form> element can contain one or more of the following form elements: <input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup>

One of the most used form elements is the <input> element.

<input> element can be displayed in several ways, depending on the type attribute.

<label for="fname">First name:</label> <input type="text" id="fname" name="fname"> All the different values of the type attribute are covered in the next chapter: HTML Input Types.

<label> element defines a label for several form elements.

<label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

<label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label>

<label> tag should be equal to the id attribute of the <input> element to bind them together.

<select>

<label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

<option> element defines an option that can be selected.

Use the size attribute to specify the number of visible values:

<label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

Use the multiple attribute to allow the user to select more than one value:

<label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

<textarea>

<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area. This is how the HTML code above will be displayed in a browser: The cat was playing in the garden. You can also define the size of the text area by using CSS:

<textarea name="message"

The cat was playing in the garden. </textarea>

<button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button> This is how the HTML code above will be displayed in a browser: Click Me!

Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

<fieldset> element is used to group related data in a form.

<legend> element defines a caption for the <fieldset> element.