HTML5 form elements
HTML5 has new form elements that previous versions of HTML did not feature.They are
<datalist></datalist><keygen></keygen><output></output>
<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 within the <datalist> tag.In order to bind a<datalist> element to an input field refer the list attribute of the input field to the data list id.
1 2 3 4 5 6 | 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 a 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 do not.
1 2 3 4 5 | <form action="test.php" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> |
<output> Element:
In order to provide users with a more clear and distinctive presentation like outputs of calculation or a script, this element can be used.
1 2 3 4 5 | <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> |