HTML5 new form elements

This chapter introduces the following new form elements:

•datalist
•keygen
•output

Browser support

Input type IE Firefox Opera Chrome Safari

#datalist No No 9.5 No

keygen No No No 10.5 3.0 No

output No No No 9.5 No No No

datalist element The datalist element specifies a list of options for the input field.
The list is created through the option element within datalist.
If you need to bind the datalist to the input field, please use the list attribute of the input field to reference the id of the datalist:

The code is as follows:

Webpage : <input type="url" list="url_list" name="link" /> <datalist id="url_list">
<option label="W3School" value="http ://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label=" Microsoft" value="http://www.microsoft.com" />
</datalist>

Tip: The option element must always set the value attribute.

keygen element The keygen element is used to provide a reliable way to authenticate users.
The keygen element is a key-pair generator. When the form is submitted, two keys are 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.
Currently, browser support for this element is poor enough to make it a useful security standard.

code show as below:

<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 output, such as calculation or script output:

The code is as follows:

Example:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    
<body>
   <form action="demo_keygen.php" method="get">
       用户名: <input type="text" name="usr_name">
      加密: <keygen name="security">
      <input type="submit">
    </form>
</body>
</html>

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1">+
    <input type="number" id="num2">=
    <output name="num" for="num1 num2"></output>            
   </form>
</body>
</html>

Continuing Learning

new file

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>浏览器版本：<input list="words"></p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </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]