Form Elements

<input> Element

The most important form element is the <input> element.

The <input> element can vary in many ways, depending on the type attribute.

<select> Element (Drop-Down List)

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

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <option> elements defines the options to select. The list will normally show the first item as selected.

You can add a selected attribute to define a predefined option.

<option value="fiat" selected>Fiat</option>

<textarea> Element

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

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

<button> Element

The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 Form Elements

HTML5 added the following form elements:

• <datalist>
• <keygen>
• <output>

<datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

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

<kegen> 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.

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

<output> Element

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

<form action="action_page.asp"
  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>

HTML Form Elements