Comments: HTML5 has several elements and attributes related to the form. The following describes the new form Element datalist, keygen, output, and their use instances, if you are interested, please refer to the following:
HTML5 has several elements and attributes related to forms.
This chapter introduces the following new form elements:
• Datalist
• Keygen
• Output
Browser support
| Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
| Datalist |
No |
No |
9.5 |
No |
No |
| Keygen |
No |
No |
10.5 |
3.0 |
No |
| Output |
No |
No |
9.5 |
No |
No |
Datalist Element
The datalist element specifies a list of options for the input field.
The list is created by using the option element in datalist.
To bind datalist to the input field, use the list attribute of the input field to reference the id of datalist:
Instance
The Code is as follows:
Webpage: <input type = "url" list = "url_list" name = "link"/>
<Datalist id = "url_list">
<Option label = "W3School" value = "http://www.W3School.com.cn"/>
<Option label = "Google" value = "http://www.google.com"/>
<Option label = "Microsoft" value = "http://www.microsoft.com"/>
</Datalist>
Try it yourself
Tip: The option element always needs to set the value attribute.
Keygen Element
The keygen element provides a reliable method for user verification.
The keygen element is the key-pair generator ). When a form is submitted, two keys are generated. One is the private key and the other is the public key.
The private key is stored on the client, and the public key is sent to the server. The public key can be used to verify the user's client certificate (client certificate ).
Currently, poor browser support for this element is insufficient to make it a useful security standard.
Instance
The Code is as follows:
<Form action = "demo_form.asp" method = "get">
Username: <input type = "text" name = "usr_name"/>
Encryption: <keygen name = "security"/>
<Input type = "submit"/>
</Form>
Try it yourself
Output Element
The output element is used for different types of output, such as computing or Script output:
Instance
The Code is as follows:
<Output id = "result" onforminput = "resCalc ()"> </output>
