HTML Form Elements

This chapter describes all HTML form elements.

The <input> Element

The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

Example


<input name="firstname" type="text"/>

If the type attribute is omitted, the input field gets the default type: "text".       
All the different input types are covered in the next chapter.

If the type attribute is omitted, the input field gets the default type: "text".       

The <select> Element

The <select> element defines a drop-down list:

Example


<select name ="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fait">Fait</option>
<option value="audi">Audi</option>
</select> 
<option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:

Example


<option value="fait">Fait</option>

Visible Values:

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

Example


<select name="cars" name="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fait">Fait</option>
<option value="audi">Audi</option>
</select>      

Allow Selections:

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

Example


<select name="cars" name="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fait">Fait</option>
<option value="audi">Audi</option>
</select>      

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example

 
<textarea name="message" rows="10"clos="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:

Example


<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button:

Example


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

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

HTML5 Form Elements

HTML5 added the following form elements:
  • <datalist>
  • <output>
  • 
    Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element. 
    

    HTML5 Element

    The <output> element specifies a list of pre-defined options for an <input> element.
    Users will see a drop-down list of the pre-defined options as they input data.
    The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

    Example

    
    <form action="/action_page.php">
    <input list="browsers">
    <datalist id="browsers">
    <option value="Firebox">
    <option value="chrome">
    <option value="Opera">
    <option value="Safari">
    </datalist>
    </form>
    

    HTML5 <output> Element

    The <output> element represents the result of a calculation (like one performed by a script).

    Example


    Perform a calculation and show the result in an <output> element:
    
    <form action="/action_page.php">
    oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" name="a" value="50">
    100 +
    <input type="number" id="b" name="b" value="50">
    =
    <output name="x" for="a b"></output>
    <input type="submit">
    </form>
    

    HTML Exercises

    Test Yourself With Exercises

    Exercise:


    In the form below, add an empty drop down list with the name "cars".
    
    <form action="/action_page.php">
    <>
    </>
    </form>
    

    HTML Form Elements

     
      Tag                        Description
    </form>	        Defines an HTML form for user input
    </input>	Defines an input control
    </textarea>	Defines a multiline input control (text area)
    <lable>   	Defines a label for an <input> element
    </fieldset>	Groups related elements in a form
    </legend>  	Defines a caption for a <fieldset> element
    </select>       Defines a drop-down list
    </optgroup>     Defines a group of related options in a drop-down list
    </option>  	Defines an option in a drop-down list
    </button>       Defines a clickable button
    </datalist>     Specifies a list of pre-defined options for input controls
    </output>       Defines the result of a calculation  
    
    
    For a complete list of all available HTML tags, visit our HTML Tag Reference.