How to use HTML5 form element

This article describe about different type of HTML5 form element
  • 2556

HTML5 Form Elements

Here like HTML5 input type HTML5 from elements are also several type

HTML5 New Form Elements

These are HTML5 has the new form elements.

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

Note: All modern browser support these new form element, if not then it behave like regular text

HTML5 <datalist> Element

The <datalist> element have the some pre-defined option for an <input> element.

It is used to provide an "autocmoplete" some feature on <input> elements. These pre-defined option user can see in drop-down list.

<datalist> element bind together by using <input> element.

Example: That contain some pre-defined option

 <input list="browsers" />

<datalist id="browsers">
<option value="opera">
<option value="Safari">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Firefox">

HTML5 <keygen> Element

The main purpose of the <keygen> element is to give the secure or validate way to authenticate users.

It is specified a key-pair generator field in a form.

Two key generate when form is submitted one is public and one  private.

These key has different work private key stored locally, whereas public key sent to the server. The public key generate the client certificate for use in future.


<form action="default_keygen.asp" method="get">
Enter Username: <input type="text" name="usr_name" />
Encryption format: <keygen name="security" />
<input type="submit" />

HTML5 <output> Element

The <output> element contain the result of any calculation

<form oninput="y.value=parseInt(b.value)+parseInt(c.value)">0
<input type="range" name="b" value="55" />150
+<input type="number" name="c" value="55" />
=<output name="y" for="b c"></output>

HTML5 New Form Elements


Tag Description
<datalist> It has the list of pre-defined options for an <input> element
<keygen> It is generate key-pair in the form
<output> It is specify output of calculation

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.