What are the new form elements added in html5-Front-end Q&A-php.cn

What are the new form elements added in html5

青灯夜游

Release： 2022-04-25 11:54:02

Original

9423 people have browsed it

HTML5 adds 3 new form elements: 1. datalist element, which is used to set a drop-down list for input. The options inside are predefined and will be used as user input data; 2. keygen element. The key pair generator field used in the form can be specified; 3. The output element is used to output and display the calculation results.

What are the new form elements added in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Three new form elements have been added to HTML5: datalist, keygen, and output.

1. datalist element

## 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.

这里注意datalist元素要写id，与input表单元素的 list属性创建联系

Copy after login

Example 1:

What are the new form elements added in html5

is displayed on the page as follows:

What are the new form elements added in html5

Example 2:

What are the new form elements added in html5

is displayed on the page as follows:

What are the new form elements added in html5

If you want The input is the URL, please note that the value value must be added http://

Example 3

What are the new form elements added in html5

The datalist element here is in Firefox There is no drop-down list on the browser, so be careful!

and the option element of the child element of datalist can be written in a single label format: eg:

2. The keygen element

tag specifies the content used in the form Key pair generator field. When the form is submitted, the private key is stored locally and the public key is sent to the server.

is a new element in HTML5, used to create a key generator
When the form is submitted, the private key is stored locally , the public key is sent to the server. The main function is to provide a method for user authentication
When using it, please note that different browsers have different support levels; currently Internet Explorer and Safari do not support it
Because it involves some knowledge about the server, we only need to understand the elements in this lesson. Knowledge related to the server is not within the scope of this course.
keygen element Attributes of the element:
name/form/autofocus/disabled
challenge Property: Set the value of keygen to ask on commit.
keytype attribute: Define the key type. If set to rsa (a password algorithm), an RSA key will be generated.

Example

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
    <p style="color:#FF0000">
        掌握fieldset/legend元素的用法（和figure和figcaption很像，只不过是作用于表单）
    </p>
    <form action="L3_01.html" method="get" >
        <fieldset>
        <legend>用户注册</legend>
            用户名：<input type="text" name="name"><br>
            密码：<input type="password" name="password">
            <br><input type="submit" value="确定">
        </fieldset><br>

        keygen元素用法：<br>
        加密：<keygen name="mykey"><br>
        <br><input type="submit" value="确定">
    </form>
<body>
</body>
</html>

Copy after login

3. The output element ## tag is displayed as the calculation result output (such as the output of executing a script).

Output tag syntax format

<output name="名称" for="element_id">默认内容</output>

Copy after login

Description: The content in the output tag is the default display content, and it will change as the related elements change.

output tag attribute

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>html中output标签详细介绍</title>
</head>
 
<body style="background-color: bisque;">
    <h4>output标签演示：</h4>
    <h5>加法计算器</h5>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" value="0"> +
        <input type="number" id="b" value="0"> =
        <output name="x" for="a b">0</output>
    </form>
</body>
</html>

Copy after login

Through the above examples, I believe everyone has learned how to use the output tag. It is also easy to change it into a calculator for subtraction, multiplication, division, etc. Interested friends can try it!

【Related recommendations: html video tutorial, web front-end】

The above is the detailed content of What are the new form elements added in html5. For more information, please follow other related articles on the PHP Chinese website!