HTML5 表单元素
HTML5 新的表单元素
HTML5 有以下新的表单元素:
- datalist
- keygen
- output
HTML5
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datalist</title>
</head>
<body>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Chrome1">
<option value="Chrome2">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
HTML5 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keygen</title>
</head>
<body>
<form action="" method="get">
用户名: <input type="text" name="usr_name"/>
加密: <keygen name="security"/>
<input type="submit" />
</form>
</body>
</html>
HTML5
<output> 元素用于不同类型的输出，比如计算或脚本输出：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>output</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>
</body>
</html>
HTML5 新的表单属性
HTML5 的 form 和 input 标签添加了几个新属性.
form标签的新属性
| 属性 | 描述 |
|---|---|
| autocomplete | 规定 form 域应该拥有自动完成功能。 |
| novalidate | 规定在提交表单时不应该验证 form域。 |
input标签的新属性
| 属性 | 描述 |
|---|---|
| autocomplete | 规定 form 域应该拥有自动完成功能。 |
| autofocus | 规定在页面加载时，域自动地获得焦点。 |
| form | 规定输入域所属的一个或多个表单。 |
| formaction | 用于描述表单提交的URL地址，覆盖 |
| formenctype | 描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单) |
| formmethod | 定义了表单提交的方式，覆盖了 元素的 method 属性。 |
| formnovalidate | 描述了 input 元素在表单提交时无需被验证，覆盖 元素的novalidate属性。 |
| formtarget | 指定一个名称或一个关键字来指明表单提交数据接收后的展示。 |
| list | 规定输入域的 datalist。datalist 是输入域的选项列表。 |
| pattern | 描述了一个正则表达式用于验证 input 元素的值。 |
| placeholder | 提供一种提示（hint），描述输入域所期待的值。 |
| required | 规定必须在提交之前填写输入域（不能为空）。 |
| step | 为输入域规定合法的数字间隔。 |