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

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>

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>

output element:

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

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

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.

0c945a705a4b178ccb441b450b6f45aa##ff9c23ada1bcecdd1a0fb5d5a0f18437Define a form for user input

d5fd7aea971a85678ba271703566ebfd Define input area

4750256ae76b6b9d804861d8f69e79d3Define text area (a multi-line input control)

2e1cf0710519d5598b1f0f14c36ba674Define a control label

02609e582fd7962059acb31154de1a92Definition Field

e911751791aa3ba95dc724e2fb905976Define the title of the field

221f08282418e2996498697df914ce4eDefine a selection list

5b7a15bed8615d1b843806256bebea72Define the option group

fa006e492f7af91dc26cd9e27e7d0bb2Define options in the drop-down list

bb9345e55eb71822850ff156dfde57c8Define a button

[Related articles]

The development history of HTML and HTML5

The basic elements of html allow you to learn HTML from scratch

##

The above is the detailed content of What are the new commonly used form elements in HTML5? Attached use examples. For more information, please follow other related articles on the PHP Chinese website!