HTML5 Form Elements

最新推荐文章于 2018-11-20 16:29:43 发布

转载最新推荐文章于 2018-11-20 16:29:43 发布 · 846 阅读

本文介绍了HTML5新增的表单元素，包括<datalist>、<keygen>和<output>等。这些元素为用户提供预定义选项、安全验证及结果显示等功能。

http://www.w3schools.com/html/html5_form_elements.asp

HTML5 Form Elements

HTML5 New Form Elements

HTML5 has the following new form elements:

<datalist>
<keygen>
<output>

Not all browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.

An <input> element with pre-defined values in a <datalist>:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" 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><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>
</html>

Note: The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> tag specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

A form with a keygen field:

<!DOCTYPE html>
<html>
<body>

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

</body>
</html>

Username: Encryption:

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).
Perform a calculation and show the result in an <output> element:

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value),y.value=parseInt(x.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>
<output name="y" for="a b"></output>
</form>

</body>
</html>

Tag	Description
<datalist>	Specifies a list of pre-defined options for an <input> element
<keygen>	Specifies a key-pair generator field in a form
<output>	Represents the result of a calculation