« Back to home

Reviewing all form elements

1. <form>

The <form> element represents a document section containing interactive controls for submitting information.

<form action="#">
  This is an empty form
</form>

2. <button>

The <button> element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

<button>Save</button>

3. <label>

The <label> element represents a caption for an item in a user interface.

<label for="example3">Label text</label>
<input id="example3" type="text">

4. <input>

The <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

<input id="text" type="text">

5. <textarea>

The <textarea> element represents a multi-line plain-text editing control.

<textarea rows="5"></textarea>

6. <select>

The <select> element represents a control that provides a menu of options.

<select id="select">
  <option>Tyrannosaurus</option>
  <option>Velociraptor</option>
</select>

7. <option>

The <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element.

<select>
  <option>Tyrannosaurus</option>
  <option>Velociraptor</option>
</select>

8. <optgroup>

The <optgroup> HTML element creates a grouping of options within a <select> element.

<select>
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
  </optgroup>
</select>

9. <fieldset>

The <fieldset> element is used to group several controls as well as labels within a form.

<fieldset>
  <legend>Fieldset legend</legend>
  <p>Form information</p>  
</fieldset>

10. <legend>

The <legend> element represents a caption for the content of its parent <fieldset>.

<fieldset>
  <legend>Legend text</legend>
  <p>Form information</p>  
</fieldset>

11. <datalist>

The <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

<datalist id="flavour-list">
  <option>Chocolate</option>
  <option>Coconut</option>
</datalist>

12. <meter>

The <meter> element represents either a scalar value within a known range or a fractional value.

<meter low="33" high="66" value="50">
  at 50/100
</meter>

13. <output>

The <output> element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

<output>
  60
</output>

14. <progress>

The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<progress value="70">70%</progress>

15. The <keygen>

The <keygen> element is now considered obsolete. This element was used to specify a key pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.

« Back to home