HTML5 New Form Elements

HTML5 has released many new form elements, in that here are some new form elements are there.


HTML5 <datalist>

<datalist> = To represents the data in list.

The <datalist> used to represent a set of option elements that represent predefined options list for other controls like an option element to store data as a list in select box(along with its children, should be hidden). In the rendering, the data list element represents nothing and it.

HTML5 datalist example code

<input list="topcities" name="city">
<datalist id="topcities">
<option value="Los Angeles">
<option value="Mumbai">
<option value="Beijing"> <option value="New york">
</datalist> <input type="submit">

HTML5 <keygen>

<keygen> = To represents the data in list.

This is new html5 tag to Specify the control for key pair-generation in form. Generate key information in a form and provide a secure way for authentications users.

During the submission of there are to key are generated one is private and other one is public
Private = Store locally
Public = Public key sent request to server

Difference between HTML and XHTML:

HTML:- HTML has no end tag.
XHTML:- XHTML has a close tag, its must be properly closed.

Attribute Name Value Description
autofocus autofocus Keygen element should automatically get focus when the page completely loads
challenge challenge Specifies that the value of the <keygen> element should be challenged when submitted. Defaults to an empty string if not specified
disabled disabled Specifies that a <keygen> element should be disabled
form form_id Specifies one or more forms the <keygen> element belongs to
keytype rsa,dsa,ec Its specifies the security algorithm of the key
name name Defines a name for the <keygen> element


HTML5 keygen

<keygen name="random_key" challenge="0987654321">
<input name="user_name" value="user name" type="text">

HTML5 <output>

<output> = to do calculations with using script

<form oninput="x.value=parseInt(y.value)+parseInt(z.value)">0
<input type="range" id="y" value="10">100 +
<input type="number" id="z" value="10">=
<output name="x" for="y z"></output>
0 100 + =