html5之新增表單屬性

weixin_33751566發表於2016-07-04
HTML

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。

2379105-b61dc73af2a42f79.png
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>

提示：還有一些不常用的屬性這裡就不做講解了，因為多多少少都有一些相容性問題比如：核取方塊的indeterminate屬性！大家自行學習吧，在我看來不必都掌握，我們現階段就只是熟悉html5。

好了今天就寫到這裡，大家有任何疑問都可以評論，我會及時回覆！謝謝觀看。

相關文章