Summarize the use of new form elements in HTML5 and practical tutorials

HTML5 New form elements

HTML5 has the following new form elements:

fc86e7b705049fc9d4fccc89a2e80ee3

aa983b9eb8086376f1f6481364a02e5a

7a6868af36f3debf3fe738bdd9047ed7

Note: Not all browsers support the new HTML5 form elements, but you can use them. Even if the browser does not support form attributes, it can still be displayed as a regular form element.

HTML5 fc86e7b705049fc9d4fccc89a2e80ee3 element

fc86e7b705049fc9d4fccc89a2e80ee3 The element specifies a list of options for an input field.

fc86e7b705049fc9d4fccc89a2e80ee3 attribute specifies that the form or input field should have auto-complete functionality. When the user begins typing in an autocomplete field, the browser should display the filled-in options in that field:

Use the list attribute of the d5fd7aea971a85678ba271703566ebfd element to bind to the fc86e7b705049fc9d4fccc89a2e80ee3 element.

Example

<input> 元素使用<datalist>预定义值:
<input list="browsers"><datalist id="browsers">  <option value="Internet Explorer">  <option value="Firefox">  <option value="Chrome">  <option value="Opera">  <option value="Safari"></datalist>

HTML5 aa983b9eb8086376f1f6481364a02e5a Element

aa983b9eb8086376f1f6481364a02e5a The role of the element is to provide a reliable method to authenticate the user. The

aa983b9eb8086376f1f6481364a02e5a tag specifies the key pair generator field used for the form.

When the form is submitted, two keys will be 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 (client certificate).

Example

Form with keygen field:

<form action="demo_keygen.asp" method="get">用户名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit"></form>

HTML5 be6d67dae90cc1ad6469079e163d0939 element

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

Example

Display the calculation results in the be6d67dae90cc1ad6469079e163d0939 element:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50">=<output name="x" for="a b"></output></form>

HTML5 new form element

b442b5a49d7f754ee12fffc1f7092435: The d5fd7aea971a85678ba271703566ebfd tag defines a list of options. Use this element in conjunction with an input element to define the possible values ​​of the input. ​

aa983b9eb8086376f1f6481364a02e5a : The aa983b9eb8086376f1f6481364a02e5a tag specifies the key pair generator field used for the form.

be6d67dae90cc1ad6469079e163d0939 : The be6d67dae90cc1ad6469079e163d0939 tag defines different types of output, such as the output of a script.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free h5 online video tutorial

##3.

php.cn original html5 video tutorial

The above is the detailed content of Summarize the use of new form elements in HTML5 and practical tutorials. For more information, please follow other related articles on the PHP Chinese website!