HTML Form Elements

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.
  • This chapter describes all HTML form elements.
All the different input types are covered in the next chapter.

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="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
Click here to Run the Program

The <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="fiat" selected>Fiat</option>
Click here to Run the Program

The <textarea> Element

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

Example

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Click here to Run the Program

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 <button> Element

The <button> element defines a clickable button :

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Click here to Run the Program

This is how the HTML code above will be displayed in a browser :

HTML5 Form Elements

HTML5 added the following form elements :

  • <datalist>
  • <keygen>
  • <output>
Note : Browsers do not display unknown elements. New elements that are not supported in older browsers will not "destroy" your web page.

HTML5 <datalist> Element

The <datalist> 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="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
Click here to Run the Program

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> element specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server.

The public key could be used to generate a client certificate to authenticate the user in the future.

Example

A form with a keygen field :

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form> 
Click here to Run the Program

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>
  <br><br>
  <input type="submit">
</form>
Click here to Run the Program

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)
<label> 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
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation