How to use HTML5 form element
This article describe about different type of HTML5 form element
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">
</datalist>
|
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.
Example
|
<form action="default_keygen.asp" method="get">
Enter Username: <input type="text" name="usr_name" />
Encryption format: <keygen name="security" />
<input type="submit" />
</form>
|
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>
</form>
|
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