HTML5 new form elements

HTML5 new form elements

<datalist>
< keygen>
<output>

Note: Not all browsers support HTML5 new form elements , but you can use them even if the browser does not support form attributes and still display them as regular form elements. The

##<datalist> element

<datalist> element specifies a list of options for the input field.

<datalist> 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 <input> element to bind to the <datalist> element.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    <input list="fruits" name="fruit">
    <datalist id="fruits">
        <option value="苹果">
        <option value="香蕉">
        <option value="柚子">
        <option value="橙子">
        <option value="梨子">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

Run the program and try it

##<keygen> Element<keygen> The role of the element is to provide a A reliable way to authenticate users. The

<keygen> tag specifies the key pair generator field to use on 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.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    用户名: <input type="text" name="usr_name">
    加密: <keygen name="security">
    <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

Put the program into your editor and run the program locally to try it

<output> Element

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

Example

Displays calculation results in < output> Element:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<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>
</body>
</html>

Run the program and try it

HTML5 new form element

Tag	Description
<datalist>	<input>Tag definition option list. Use this element in conjunction with an input element to define the possible values of the input.
The <keygen>	<keygen> tag specifies the key pair generator field used for the form.
<output>	<output> tag defines different types of output, such as script output.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <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> </body> </html>

submit Reset Code

Automatic operation

HTML5 new form elements

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]