HTML5 表单属性
HTML5 新的表单属性
HTML5 有一些新的<form>和<input>的属性.
<form>的新属性:
- autocomplete
- novalidate
<input>的新属性:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
<form> / <input> 自动完成属性(autocomplete)
自动完成属性是指无论是表单还是输入域应该开启还是关闭.
当自动属性开启时，浏览器自动存储以前使用过的值.
提示: 表单的自动完成属性是"开启"的, 指定某些的文本域"关闭"，反之亦然.
注: 自动完成属性用于 <form> 和下列 <input> 类型: text, search, url, tel, email, password, datepickers, range, 和 color.
例子
自动完成属性开启的表单(其中有个文本域是关闭的):
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
亲自试一试 »
提示: 在一些浏览器中您可能需要激活这个自动完成功能.
<form> 不验证属性(novalidate)
不验证属性布尔属性.
指表单属性（input）不被验证可以直接提交.
例子
表明表单不需要验证就可以提交:
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
亲自试一试 »
<input> 自动获取焦点属性（autofocus）
自动获取焦点属性是布尔属性.
如果存在, 它是指 <input> 元素当页面加载时自动获取焦点.
<input> 表单属性（form）
表单属性指当有一个或多个表单时，<input> 元素属于哪个表单.
提示: 当指向超过一个表单时，使用空格分隔表单id.
例子
在表单外部的文本域(但它仍属于表单的一部分):
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
亲自试一试 »
<input> 表单作用域（formaction）
formaction属性是指当表单提交的接收的处理数据的.
formaction属性会覆盖<form>元素的action属性.
注意: formaction属性用于type="submit" 和 type="image".
例子
有两个提交按钮的表单，有两个action:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/html5/tryit/demo_form"
value="Submit as admin">
</form>
亲自试一试 »
<input> formenctype 属性
formenctype属性指当如何对表单数据编码并提交到服务器是(只适合表单method="post")
formenctype属性覆盖了<form>元素的enctype属性
注意: formenctype属性用于type="submit"和type="image".
例子
Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="复合类型提交">
</form>
亲自试一试 »
<input> formmethod 属性
formmethod属性定义了发送给action URL的表单数据的HTTP方法.
formmethod属性覆盖了<form>元素的method属性.
注意: formmethod属性可以用于type="submit" 和 type="image".
例子
第二个提交按钮覆盖了表单的HTTP method:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="/html5/tryit/demo_form"
value="Submit using POST">
</form>
亲自试一试 »
<input> formnovalidate 属性
novalidate是一个布尔型属性.
如果存在, 它指<input>元素在表单提交时不被校验.
formnovalidate属性覆盖了<form> 元素的novalidate属性.
注意: formnovalidate属性用于type="submit".
例子
含有两个提交按钮的表单(没有进行验证):
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
亲自试一试 »
<input> formtarget 属性
formtarget属性是指提交表单后服务器响应的结果在什么地方显示.
formtarget属性覆盖了<form>元素的target属性.
提示: formtarget属性用于type="submit" 和 type="image".
例子
含有两个提交按钮的表单,不同的打开窗口:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
亲自试一试 »
<input> 宽高属性
宽高属性是指<input>元素的宽和高.
注意: 宽高属性只适用于<input type="image">.
提示: 总是需要指定图片的宽和高.如果指定了宽高，在页面加载时会给图片预留出需要的空间.然而，没有设置这个属性时, 浏览器不知道图片的大小，不能预留适当的空间.当图片加载时会影响页面的布局.
例子
定义一个带有宽高属性的图片作为提交按钮:
亲自试一试 »
<input> 列表属性
列表属性是指<input>元素预定义一些数据选项.
例子
带有预定义列表<datalist>的<input>元素:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
亲自试一试 »
<input> 最小和最大属性
最小和最大属性是指<input>元素的最小值和最大值.
注意: 最小和最大属性用于以下输入类型: number, range, date, datetime, datetime-local, month, time 和 week.
例子
带有最小和最大属性<input>元素:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
亲自试一试 »
<input> multiple 属性
multiple属性是个布尔类型的属性.
如果存在这个属性,代表允许用户提交一个或多个<input> 元素.
注意: multiple属性支持的输入类型: email和file.
<input> pattern属性
pattern属性为<input>的值指定正则表达式进行校验.
注意: pattern属性用于: text, search,url, tel, email, 和 password.
提示: 使用全局的title属性为用户描述正则提示.
例子
要求文本域只可以输入3个字母 (不可以是数字或特殊字符):
亲自试一试 »
<input> 占位符（placeholder）属性
占位符指简短描述一个文本域应该添加什么的暗示(例如：一个示例值或一个简短的描述预期的格式).
用户输入值之前的显示在输入框中的简短暗示.
注意: placeholder属性只支持: text,search, url, tel, email, 和 password.
<input> 必需属性（required）
required是个布尔型的属性.
如果存在, 它是指在提交表单前input域必需有值.
注意: required属性适用的输入类型: text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和 file.
<input> 阶梯属性（step）
step属性是指<input>中合法的整型数字变化.
例子: 如果step="3", 合法的数据可能是 -3, 0, 3, 6, 等.
提示: step属性可以结合最大最小属性一起使用创建一个合法范围域.
注意: step适用于如下输入类型: number, range,date, datetime, datetime-local, month, time 和 week.
HTML5 <input> 标签
| 标签 | 描述 |
|---|---|
| <form> | 定义用户输入域的表单 |
| <input> | 定义一个输入控件 |
