Home > Web Front-end > H5 Tutorial > Introduction to the use of HTML5's new form elements (datalist/keygen/output)_html5 tutorial skills

Introduction to the use of HTML5's new form elements (datalist/keygen/output)_html5 tutorial skills

WBOY
Release: 2016-05-16 15:49:08
Original
2212 people have browsed it

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.
Lists are created via option elements within datalist.
If you need to bind the datalist to the input field, please use the list attribute of the input field to reference the id of the datalist:

Instance

Copy code
The code is as follows:

Webpage:



Try it yourself

Tip: The option element must always set the value attribute.

keygen element

The purpose of the keygen element is to provide a reliable way to authenticate the user.
The keygen element is a key-pair generator. When the 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 later to verify the user's client certificate.

Currently, browser support for this element is poor enough to make it a useful security standard.
Example

Copy code
The code is as follows:


Username:
Encryption:



Try it for yourself

output element

output element is used for different types of output, such as calculation or script output:
Instance

Copy code
The code is as follows:

< ;/output>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template