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

HTML5 now more and more fire, many people want to learn HTML5, but HTML5 than the old version of the new form elements, now let's look at what the new form elements. HTML5 What are the new commonly used form elements? How are they used separately?

This chapter describes the following new form elements: Datalist;keygen;output

DataList elements:

The DataList element specifies a list of options for the input field.

The list is created by the option element within DataList.

To bind DataList to an input field, refer to the ID of DataList with the list property of the input field:

Webpage: <input type= "url" list= "url_list" name= "link"/><datalist id= "url_list" ><option label= "php Chinese web "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 is always set to the Value property.

Keygen elements:

The role of the keygen element is to provide a reliable way to authenticate users.

The keygen element is a key pair generator (Key-pair generator). When the form is submitted, two keys are generated, one is the private key, and one 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 later authenticate the user's client certificate (certificate).

Currently, the browser's poor support for this element is not 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:

The output element is used for different types of outputs, such as calculations or script output:

<output id= "Result" onforminput= "Rescalc ()" ></output>

Input Type:

HTML5 has a number of 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 the form is submitted, the value of the email domain is automatically validated.

2.Input Type-URL

The URL type is used for the input domain that should contain the URL address. When the form is submitted, the value of the URL field is automatically validated.

3.Input Type-Number

The number type is used for input fields that should contain numeric values. You can also set a limit on the number of accepted numbers:

4.Input Type-Range

The range type is used for input fields that should contain numeric values in a range.

The range type is displayed as a slider bar.

You can also set a limit on the number of accepted numbers:

5.Input Type-Date pickers (data inspector)

HTML5 has several new input types that can be selected for the date and time:

Date-Select day, month, year

Month-Select months, years

Week-Select minute

Time-Select the Times (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 searching domains, such as site search or Google search.

The search field appears as a regular text field.

< knowledge points >

<form> define a form for user input

<input> defining input fields

<textarea> Define a text field (a multiline input control)

<label> define a control's label

<fieidset> Defining fields

<legend> define the title of the field

<select> Define a selection list

<optgroup> Defining an option group

<option> define options in the drop-down list

<button> Define a button

"Related articles"

The development history of HTML and HTML5

HTML base element that gives you 0 basic learning HTML