Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end H5 Tutorial What are the new commonly used form elements in HTML5? Attached use examples

What are the new commonly used form elements in HTML5? Attached use examples

寻∝梦
寻∝梦
Aug 13, 2018 pm 07:00 PM

HTML5 is becoming more and more popular now. Many people want to learn HTML5, but HTML5 has more new form elements than the old version. Now let us take a look at the new form elements. What are the new commonly used form elements in HTML5? How are they used?

This chapter introduces the following new form elements: datalist; keygen; output

##datalist element:

datalist element specifies input A list of options for the domain.

The list is created through the option element 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: 

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="php中文网" value="http://www.php.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Copy after login

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

keygen element:

The purpose of the keygen element is to provide a reliable method of authenticating the user.

The keygen element is a key-pair generator. When the form is submitted, two keys are generated, a private key and a 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. 

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Copy after login

output element:

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

<output id="result" onforminput="resCalc()"></output>
Copy after login

Input type:

HTML5 has several new form input types. These new features provide better input control and validation.

1.Input type - email

The email type is used for input fields that should contain e-mail addresses. When submitting the form, the value of the email field is automatically verified.

2.Input type - url

The url type is used for input fields that should contain URL addresses. When submitting the form, the value of the url field is automatically verified.

3.Input type - number

number type is used for input fields that should contain numerical values. You can also set limits on the numbers that are accepted:

4.Input type - range

The range type is used for input fields that should contain numeric values ​​within a certain range.

Range types are displayed as sliders.

You can also set limits on the numbers accepted:

5.Input type - Date Pickers (data picker)

HTML5 has many New input types for selecting dates and times:

date - select day, month, year

month - select month, year

week - select Week and year

time - Select time (hours and minutes)

datetime - Select time, day, month, year (UTC time)

datetime-local - Select time , day, month, year (local time)

6.Input type - search

The search type is used for search fields, such as site search or Google search.

The search field appears as a regular text field.

##

Define a form for user input

Define input area