html5之新增表单属性

2016-07-04 本文已影响655人便U_Life

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>