Form Elements

HTML5 introduce new form elements,<datalist>,<keygen>,<output>,<meter>,<progress> are form elements. In addition to this,there are some new input types which can be used with <input> element. In this section, we will go through the new form elements one by one.

  1. <datalist>: You can use this element for
  • If you want to provide suggestions for the input in the form of dropdown list.
  • You can implement Google suggest like autocomplete feature using this element.

But in both cases,user has freedom to enter an input that is not available in the provided list.

And also this the main difference between <select> and <datalist>.The <select> event restrict the user to select item from suggested elements.

2. <output>: The output element is been used for presenting the result of some sort of calculation that took place within the scope of a form.

Attributes that can use with this element

  • for attribute can be used in order to specify (space separated) the ids of those elements that took place in the calculation.
  • form attribute can be used in order to specify the form owner of this output element. The value of this attribute should be the id of a specific form in the very same page.
  • name attribute can be used in order to name the output element we are using.

3. <meter> The <meter> element is used to display a measurement on a known scale. For example we can display battery usage or percentage of recovery of any patient using the <meter> element.

The measurement fall in three categories: low, medium or high. The low category will be shown in red color, medium in yellow color and high in green color.

  • min and max attributes is used to set the minimum and maximum values on the scale.
  • value attribute can be used to set the current value.

4.<progress> The <progress> element is used to create progress bars. To display any type of progress, for example file downloading or file uploading, this element is used.

5.<keygen>:  This element generates an encryption key for passing encrypted data to a server. When an HTML form is submitted, the browser will generate a key pair and store the private key in the browser’s local key storage and send the public key to the server