html5新增了许多表单属性。这里主要分为<form>属性和<input>属性，当然还有关于checkbox的和label标签的属性我们都会一一解答。接下来正式进入充饥时间：
<form>属性
1.autocomplete
autocomplete顾名思义就是自动完成属性，用户在自动完成域种输入时，浏览器会在该域显示填写的选项，这些选项可以说浏览器的历史记录也可以时该域绑定的list属性（后面会讲）。autocomplete默认是“on”也就是开启的意思，当我们要关闭时可以在某个表单元素添加autocomplete=“off”。代码如下：
<!DOCTYPE html>
<html lang="en">
<body>
<form action="action" autocomplete="on">
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>
</body>
</html>
注意：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
2.novalidate
novalidate属性是一个boolean属性，该属性指定是否验证input域或者提交表单时是否检查表单数据符合要求。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="action" >
E-mail: <input type="email" required='required' name="user_email">
<input type="submit">
</form>
</body>
</html>
<input>属性
1.autofocus
autofocus是一个boolean属性，autofocus 属性规定在页面加载时，域自动地获得焦点。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="action">
姓名: <input type="text" name="fname" autofocus><br>
密码: <input type="text" name="lname"><br>
<input type="submit">
</form>
</body>
</html>
2.form
form 属性规定输入域所属的一个或多个表单。当我们将一个表单域写在某一个表单外面时，我们可以通过form属性来指定某个表单的id进行绑定。同时可以绑定多个表单，每个表单直接用空格分隔。代码如下：（IE可能不支持form属性）
<!DOCTYPE html>
<html>
<body>
<form action="action" id="form1">
姓名: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<!-- 以下input在id='form1'的外面，由于我们使用form属性绑定，提交时将把该表单元素的值一起提交-->
密码: <input type="text" name="lname" form="form1">
</body>
</html>
3.formaction
formaction用于<button>和<input>但是其type是submit类型的按钮和type是image的按钮，意味着提交时所指向的url地址。该属性会覆盖 form表单的action指向的url地址。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="URL1">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<button type="submit" formaction="URL2">button</button>
</form>
</body>
</html>
注意：Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。
4.formenctype
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单).formenctype 属性覆盖 form 元素的 enctype 属性。
注意：该属性与 type="submit" 和 type="image" 配合使用。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="URL1">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
</body>
</html>
5.formnovalidate
formnovalidate和novalidate是一个意思，都是描述表单域是否被验证。只是novalidate是指定一个form表单，而formnovalidate是指定到一个表单域上，覆盖
novalidate。注意：该属性与 type="submit" 和 type="image" 配合使用。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="URL1">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate value="Submit without validation">
</form>
</body>
</html>
6.formmethod
formmethod是指定了表单提交的方式，覆盖表单的method属性。
注意:该属性可以与 type="submit" 和 type="image" 配合使用。使用方法和前面一样，在此不展示了。
7.formtarget
属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。，覆盖表单的target 属性。可以是formtarget =“_slef”当前窗口打开，formtarget =“_blank”新窗口打开。注意:该属性可以与 type="submit" 和 type="image" 配合使用。使用方法和前面一样，在此不展示了。
8.height 和 width
针对<input>type=“image”的表单元素，规定了标签图像的高和宽。
注意: height 和 width 属性只适用于 image 类型的<input> 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预
留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。代码如下:
<!DOCTYPE html>
<html>
<body>
<form action="URL1">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
</body>
</html>
9.list
list属性需要与datalist标签进行绑定，指定为datalist的id属性。list属性指定了input域的预选列表。注意:Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="action" method="get">
<input list="browsers" name="browser" autocomplete>
<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>
10.min 和 max
min和max规定input输入的上限和下限，min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date 、number 以及 range。代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="action" method="get">
输入1980-01-01之前的日期:
<input type="date" name="bday" max="1979-12-31">
输入2000-01-01之后的日期:
<input type="date" name="bday" min="2000-01-02">
输入1到5区间的数字
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
</html>
11.step
step 属性为输入域规定合法的数字间隔。如果 step="3"，则合法的数是 -3,0,3,6 等。提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。
step.png
代码如下：
<!DOCTYPE html>
<html>
<body>
<form action="action" method="get">
<!-- 增长步长为3 -->
<input type="number" name="points" step="3">
<!-- 页面打开时时间的最小单位变成了1分钟，而且点击元素旁边的增减幅按钮，时间的增减幅度也变成了1分钟。强行在元素中加入秒，然后点击提交按钮，浏览器提示输入不正确 -->
<input type="datetime" id="datetime"step="60">
<input type="submit">
</form>
</body>
</html>
12.multiple
multiple 属性是一个 boolean 属性.multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file。: email, and file.
<input type="file" name="img" multiple>
13.pattern
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。是用来全局 title 属性描述了模式。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。
<!-- 输入3个字母 -->
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="输入3个字母">
14.placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。在没有输入的时候提供表单的默认值。
注意:placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
<input type="text" name="fname" placeholder="Hello">
15.required
required 属性是一个 boolean 属性.required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Username: <input type="text" name="usrname" required>
其他属性
1.<fieldset>—disabled
html5为 fieldset元素增加了disabled属性，可以把它的子元素设为disabled状态,但是注意不包括legend里的元素。我们通过代码了解：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form>
<fieldset name="userInfo">
<legend>
<label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">启用用户信息</label>
</legend>
<p>
<label>姓名:<input name="userName" required></label>
</p>
<fieldset name="personalInfo">
<legend>
<label><input type="checkbox" checked name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">个人信息</label>
</legend>
<p>
<label>生日:<input name="birthday" required></label>
</p>
</fieldset>
<fieldset name="companyInfo">
<legend>
<label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label>
</legend>
<p>
<label>公司名称:<input name="companyName" required></label>
</p>
</fieldset>
</fieldset>
</form>
</body>
</html>
2.<label>—control
html5中为标签新增了control属性，在标签内部放置一个表单元素，通过标签的control属性访问该表单元素。一般情况下我们用了设置默认值。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script>
function setValue(){
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="718308";
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
</body>
</html>
3.SelectionDirection
selectionDirection适用于input元素和textarea元素。
用户在input元素或textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为"forward"，反向选取值为“backward”，且当用户没有选取任何文字时，该属性值为"forward"。代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
function alertSelectionDirection(){
var testInput=document.getElementById("test");
var direction=testInput.selectionDirection;
alert(direction);
}
</script>
<form>
<input type="text" name="text" id="test">
<input type="button" value="查看选中文本方向" onclick="alertSelectionDirection()">
</form>
</body>
</html>
网友评论