The new elements in the html5 form are: 1. The "" tag element can define the predefined options of the input control; 2. The "" tag element can define the key pair generator Field (for forms); 3. "" tag element can define calculation results.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
New elements in html5 form
Tag
Description
Define the predefined options of the input control.
Define key pair generator fields (for use with forms).
Define the calculation result.
1. tag
tag specifies a list of possible options for the element .
The tag is used to provide "auto-complete" features for the element. The user will see a drop-down list with predefined options that will serve as the user's input data.
Please use the list attribute of the element to bind the element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
2, tag
tag specifies the key pair generator used for the form field.
When the form is submitted, the private key is stored locally and the public key is sent to the server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
3. tag
tag is displayed as the calculation result output (such as executing a script output).
<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>
Related recommendations: "html video tutorial "
The above is the detailed content of What are the new elements in html5 forms?. For more information, please follow other related articles on the PHP Chinese website!
Statement: 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