HTML5 new form elements

Let’s talk about the new ones:

HTML5 has the following new form elements:

< datalist>

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.

Next we will introduce one by one:

HTML5 <datalist> elements

<datalist> element regulations A list of options for the input domain.

<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"> 
</head>
<body>
<form action="demo-form.php" method="get">
<input list="phone" name="phone">
<datalist id="phone">
  <option value="huawei">
  <option value="oppo">
  <option value="vivo">
  <option value="iphone">
  <option value="sony">
</datalist>
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>

HTML5 <keygen> Element

The purpose of the<keygen> element is to provide a reliable method of authenticating the user. 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">  
</head>
<body>
<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

Properties Disabled causes the keygen field to gain focus when the page loads.

Challenge Challenge If it is used, set the value of the keygen to ask at the time of submission.

Disabled Disabled disable the KEYTAG field.

Form Formname Define one or more forms of the keygen field.

keytype rsa generates RSA keys.

## Name Fieldname Define the only name of the keygen element.

The name attribute is used to collect the value of the field when submitting the form.

HTML5 <output> element

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</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>
<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>
</body>
</html>

new : New attributes in HTML5.

Attribute Value description

# This for Element_id Defines one or more elements related to the output domain.

form form_id Define one or more forms to which the input fields belong.

Name name Define the only name of the object. (Used when submitting the form)

###

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </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]