HTML5的表單新增屬性和元素

阿新 • • 發佈：2018-12-11

1 表單新增屬性

1.1 表單內元素的 form 屬性

（1）作用

在HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面的任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以宣告該元素從屬於指定表單了。

<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10以上版本支援該屬性。

1.2 表單內元素的 formaction 屬性

（1）作用

在HTML4中，一個表單內的所有元素只能通過表單的屬性統一提交到另一個頁面，而在HTML5中可以為所有的提交按鈕新增不同的formation屬性，使得在單擊不同按鈕時可以將表單提交到不同的頁面。

<form id="testform" action="serve.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到S1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到S2
    <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到S3
    <input type="submit">
</form>

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支援該屬性。

1.3 表單內元素的 formmethod 屬性

（1）作用

在HTML4中，每個表單只有一個method屬性來統一指定提交方法。在HTML5中，可以使用formmethod屬性來對每個表單元素分別指定不同的提交方法。

<form id="testform" action="serve.jsp">
    姓名：<input type="text" name="name"/><br/>
    <input type="submit" value="post方式提交" formmethod="post">
    <input type="submit" value="get方式提交" formmethod="get">
</form>

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支援該屬性。

1.4 表單內元素的 formenctype 屬性

（1）在HTML4中，表單元素由一個enctype屬性，用於指定在表單傳送到伺服器之前應該如何對錶單內的資料進行編碼。可以使用的屬性值如下：

application/x-www-form-urlencoded :

在傳送前編碼所有字元，當表單元素的action屬性值為get時，瀏覽器用x-www-form-urlencoded的編碼方式把表單資料轉換成一個字串（形式如？name1=value&name2=value2....），然後把這個字串新增到提交的目標URL地址的後面，使其成為新的目標URL地址。該屬性值為表單元素的enctype屬性的預設值。

multipart/form-data:

不對字元編碼。在使用包含檔案上傳控制元件的表單時，必須使用該值

text/plain:

表單資料中的空格被轉換為”+“號，但不對錶單資料中的特殊字元進行編碼。

（2）在HTML5中，可以使用formenctype屬性對錶單元素分別指定不同的編碼方式。

<form action="server.jsp" method="post">
    <input type="text" name="name"/><br/>
    檔案：<input type="file" name="files">
    <input type="submit" value="上傳" formaction="uploadFile.jsp" formenctype="multipart/form-data">
    <input type="submit" value="提交">
</form>

（3）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支援該屬性。

1.5 表單內元素的 formtarget 屬性

（1）在HTML4中，表單元素有一個target屬性，該屬性用於指定在何處開啟表單提交後所需載入的頁面，可使用的屬性值如下：

_blank : 在新的瀏覽器視窗中開啟

_self : target屬性的預設值，在相同的框架（frame）中開啟

_parent : 在當前框架（frame）的父框架（frame）中開啟

_top ：在當前瀏覽器視窗中開啟

framename ：在指定的框架（frame）中開啟

（2）在HTML5中，可以對多個提交按鈕分別使用formtarget屬性來指定提交後在何處開啟所需載入的頁面

<form id="testform" action="serve.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到S1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp" formtarget="_blank">提交到S2
</form>

（3）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 10以上版本、Firefox4以上版本、Opera10.50以上版本、IE10 支援該屬性。

1.6 表單內元素的 autofocus 屬性

（1）作用

當頁面開啟時，使得控制元件自動獲取焦點。

<input type="text" autofocus>

（2）注意

一個頁面上只能有一個控制元件具有該屬性。

（3）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 6以上版本、Firefox4以上版本、Opera10以上版本、IE10 支援該屬性。

1.7 表單內元素的 required 屬性

（1）作用：

在提交時，如果元素中內容為空白，則不允許提交，同時在瀏覽器中顯示資訊提示文字，提示使用者必須輸入內容。

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 6以上版本、Firefox4以上版本、Opera10以上版本、IE10 支援該屬性。

1.8 表單內元素的 labels 屬性

（1）作用

在H5中，可以為所有能使用標籤（label元素）的表單元素（包括非隱藏的input元素（type屬性不為hidden）、button元素、select元素、textarea元素、meter元素、output元素、process元素以及keygen元素）定義一個labels屬性，屬性值為一個NodeList物件，代表該元素所繫結的標籤元素所構成的集合。

<form id="testform">
    <label id="label" for="txt_name">姓名：</label>
    <input id="txt_name">
</form>

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 6以上版本、Opera10以上版本，支援該屬性。

1.9 標籤的 control 屬性

（1）作用

在H5中，可以在標籤（label元素）內部放置一個表單元素，並且通過該標籤的control屬性來訪問該表單元素。

<script type="text/javascript">
    function setValue(){
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = "213001";
    }
</script>

<form>
    <label id="label">
        郵編：
        <input id="txt_zip" maxlength="6">//訪問它
        <small>請輸入六位數字</small> 
   </label>
    //點選按鈕通過標籤獲取其內表單控制元件並設定預設值
    <input type="button" value="設定預設值" onclick="setValue()"/>
</form>

（2）瀏覽器支援情況

到目前為止：Safari5以上版本、Google Chrome 18以上版本、Firefox 10以上版本、Opera12以上版本，支援該屬性。

1.10 文字框的 placeholder 屬性

（1）作用：

當文字框處於未輸入狀態且未獲取游標焦點時，模糊顯示輸入提示文字。

<input type="text" placeholder="input me">

（2）設定提示文字的樣式

/*Firefox 瀏覽器中 */
input : -moz-placeholder{
    color:blue;
}
/* Webkit 系列瀏覽器中 */
input : -webkit-input-placeholder{
    color:blue;
}

（3）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 6以上版本、Firefox 4以上版本、Opera11以上版本、IE10，支援該屬性。

1.11 文字框的 list 屬性

（1）作用

在H5中，為單行文字框增加了一個list屬性，該屬性的值為某個datalist元素的id。datalist元素本身並不顯示，而是當文字框獲得焦點時以提示輸入的方式顯示。

<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display:none;">
    <option value="Good Morning">Good Morning</option>
    <option value="Hello">Hello</option>
    <option value="Good Afternoon">Good Afternoon</option>
</datalist>

（2）瀏覽器支援情況

到目前為止：Chrome20、Firefox 10、Opera10以上版本、IE10，支援該屬性。

1.12 文字框的 autocomplete 屬性

（1）作用

輔助輸入所用的自動完成功能

（2）值

" on "：可以顯示指定候補輸入的資料列表。使用datalist元素與list元素提供候補輸入的資料列表，在執行自動完成時，可以將該 datalist元素中的資料作為候補輸入的資料再文字框中自動顯示。

" "（不指定）：使用瀏覽器的預設值（取決於各瀏覽器的決定）。

" off "

<input type="text" name="greeting" autocomplete="on" list="greetings>

（3）瀏覽器支援情況

到目前為止：Safari6.0、Chrome 14以上版本、Firefox 4以上版本、Opera10以上版本、IE10，支援該屬性。

1.13 文字框的 pattern 屬性

（1）作用：

對input元素使用該屬性，並且將屬性值設為某個格式的正則表示式時，在提交時會對這些進行檢查，檢查其內容是否符合給定格式。當輸入的內容不符合給定的格式時，則不允許提交，同時在瀏覽器中顯示資訊提示文字，提示輸入的內容必須符合給定的格式。

/*要求輸入內容為一個數字和3個大寫字母*/
<form>
請輸入指定格式的內容：<input pattern="[0-9][A-Z]{3}" name="part">
<input type="submit">
</form>

（2）瀏覽器支援情況

到目前為止：Safari5、Google Chrome 6以上版本、Firefox 4以上版本、Opera10以上版本、IE10，支援該屬性。

1.14 文字框的 selectionDirection 屬性

（1）作用

針對input元素與textarea元素。當用戶在這兩個元素中用滑鼠選取部分文字時，可以使用該屬性來獲取選取方向。

（2）值

“forward” ：當用戶正向選取文字時或使用者沒有選取任何文字時。

"backward"：當用戶反向選取文字時

function AlertSelectionDirection(){
    var control = document.forms[0]['text'];
    var Direction = control.selectionDirection;
    alert(Direction);
}
////////////////////////////////
<input type="test" name="text">

（2）瀏覽器支援情況

到目前為止：Safari5.2以上版本、Chrome 16以上版本、Firefox 8以上版本、Opera12以上版本，支援該屬性。

1.15 複選框的 indeterminate 屬性

（1）作用

在H5中，可以在Javascript指令碼程式碼中對該元素使用indeterminate 屬性，以說明覆選框處於“尚未明確是否選取狀態”（不明狀態）。

（2）瀏覽器支援情況

到目前為止：Safari5、Chrome 6以上版本、Firefox 3.6 以上版本、Opera11.50以上版本，IE6以上版本、支援該屬性。

1.16 image提交按鈕的height 屬性與width屬性

（1）height：用於指定圖片按鈕中圖片的高度。

（2）width：用於指定圖片按鈕中圖片的框度。

<input type="image" src="edit.gif" alt="編輯" width=23 height=23 />

（3）瀏覽器支援情況

到目前為止：Safari7.0、Chrome 21以上版本、Firefox 16 以上版本、Opera12以上版本，IE9以上版本、支援該屬性。

1.17 textarea元素的 maxlength 屬性與 wrap 屬性

（1）maxlength屬性

使用整數型數值進行設定，用於限定textarea元素中可輸入文字的個數。

（2）wrap 屬性

hard：如果向textarea元素中輸入的文字個數超出使用textarea元素的cols屬性所限定的每行中可顯示文字個數而導致文字換行時，提交表單時會在換行處加入一個換行標誌。設定該值時必須指定cols屬性值。

soft：不加入換行標誌。

<textarea name="name" maxlength=100 row=5 warp="hard" cols=5></textarea>

（3）瀏覽器支援情況

到目前為止：

maxlength屬性：Safari5、Chrome 6以上版本、Firefox 4 以上版本、Opera10以上版本，IE10、支援該屬性。

wrap 屬性：Safari5.2、Chrome 16以上版本、Firefox 4 以上版本、Opera10以上版本，IE6以上版本、支援該屬性。

2 表單新增元素

2.1 output元素

（1）output元素定義不同型別的輸出，比如計算結果或指令碼的輸出。

（2）output元素必須從屬與某個表單。

<output id="output1">10</output>

（3）瀏覽器支援情況

Safari5、Chrome 10以上版本、Firefox 4 以上版本、Opera10以上版本、支援該元素。

2.2 新增的input元素的型別

（1）email：表示必須輸入e-mail地址的文字輸入框

（2）url：表示必須輸入URL地址的文字輸入框

（3）number：表示必須輸入數值的文字輸入框

（4）range：表示必須輸入一定範圍內數字值的文字輸入框

（5）Date Pickers：H5擁有多個可供選擇日期和時間的新型輸入文字框

1. date：選取日、月、年

2 .month：選取月、年

3. week：選取周和年

4. time：選取時間（小時和分鐘）

5. datetime：選取時間、日、月、年（UTC時間）

6. datetime-local：選取時間、日、月、年（本地時間）

（6）search：用於搜尋

（7）tel：專用於電話

（8）color：顏色選擇文字框。選擇的值為”#000000“格式的文字。

HTML5的表單新增屬性和元素

1 表單新增屬性

1.1 表單內元素的 form 屬性

1.2 表單內元素的 formaction 屬性

1.3 表單內元素的 formmethod 屬性

1.4 表單內元素的 formenctype 屬性

1.5 表單內元素的 formtarget 屬性

1.6 表單內元素的 autofocus 屬性

1.7 表單內元素的 required 屬性

1.8 表單內元素的 labels 屬性

1.9 標籤的 control 屬性

1.10 文字框的 placeholder 屬性

1.11 文字框的 list 屬性

1.12 文字框的 autocomplete 屬性

1.13 文字框的 pattern 屬性

1.14 文字框的 selectionDirection 屬性

1.15 複選框的 indeterminate 屬性

1.16 image提交按鈕的height 屬性與width屬性

1.17 textarea元素的 maxlength 屬性與 wrap 屬性

2 表單新增元素

2.1 output元素

2.2 新增的input元素的型別

相關推薦