HTML5 form elements


HTML5 has the following new form elements:

  • <datalist>

  • ##<keygen>

  • <output>

Note:Not all browsers support HTML5 new form elements, but you can use They, even if the browser does not support form attributes, can still be displayed as regular form elements.

HTML5 <datalist> element The

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

<datalist> attribute specifies that the form or input field should have auto-complete function. 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.

Instance

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

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance


HTML5 <keygen> Element

<keygen> The purpose of the 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.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>

<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance


HTML5 <output> element

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

Example

<!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>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance


##HTML5 New Form Elements

Tag##<datalist><input> ;Label 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 to use for the form. <output><output> tag defines different types of output, such as the output of a script.
←
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
Description