HTML5 form elements

<datalist> Element

The <datalist> element in HTML5 specify the options that can be included for an input field . This <datalist> element  will specify the list of options for an input field.

The <datalist> element specifies a list of options for an input field.<option> tag can be used to insert/create elements with in the <datalist> tag.In order to bind a <datalist> element to an input field refer the list attribute of the input field to the datalist id.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Quality Point Technologies" value="http://www.qualitypointtech.com/">
<option label="Timesheet" value="http://timesheetscript.com">
<option label="onepass" value="http://onepass.biz/">
</datalist>

<keygen> Element
This element <keygen> can be used to provide a secure authentication way to the users . This  >keygen> element is used to generate a key-pair . Once the form is submitted this <keygen> element  generates two keys of which one is public key and another one is a private key .

Thus generated private key is stored on the client machine while the public key generated is sent to the server . To generate a client certificate  and to provide authentication to the user in the future this public key will be used . But currently only latest browser versions support this and many others donot.

<form action="test.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

<output> Element:
Inorder to provide users with a more clear and distinctive presentation like outputs of calculation or a script this element can be used .

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>