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

Home

Web Front-end

Front-end Q&A

What are the new elements in html5 forms?

青灯夜游

Jan 23, 2022 pm 05:44 PM

html5 form elements

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.

What are the new elements in html5 forms?

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>

Copy after login

What are the new elements in html5 forms?

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>

Copy after login

What are the new elements in html5 forms?

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>

Copy after login

What are the new elements in html5 forms?

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 of this Website

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