HTML5 學習筆記 表單屬性

浪花一朵朵發表於2015-06-06
HTML筆記

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

autocomplete屬性

autocomplete屬性規定form或input域應該擁有自動完成功能

當使用者在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項

提示:autocomplete屬性有可能在form元素中是開啟的，而在input元素中是關閉的。

注意：autocomplete適用於form標籤，以及以下型別的input標籤：text,search,url,telephone,email,password,datepickers,range 以及color

例項

    <form autocomplete="on">
        <input type="text" name="fname" placeholder="請輸入姓名" /><br/>
        <input type="text" name="lname" placeholder="名" /><br/>
        <input type="email" name="email" autocomplete="off" /><br />
        <input type="submit" />
    </form>

novalidate屬性

novalidate屬性的一個boolean屬性

novalidate屬性規定在提交表單時不應該驗證form或input域

例項

無需驗證提交的表單資料

    <form autocomplete="on" novalidate>
        <input type="text" name="fname" placeholder="請輸入姓名" /><br/>
        <input type="text" name="lname" placeholder="名" /><br/>
        <input type="email" name="email" autocomplete="off" /><br />
        <input type="submit" />
    </form>

提交時，不再驗證email欄位，

<input> autofocus屬性

autofocus屬性是一個boolean屬性

autofocus屬性規定在頁面載入時，域自動地獲得焦點

看效果：

程式碼：

    <form autocomplete="on" novalidate>
        <input type="text" name="fname" placeholder="請輸入姓名" autofocus/><br/>
        <input type="text" name="lname" placeholder="名" /><br/>
        <input type="email" name="email" autocomplete="off" /><br />
        <input type="submit" />
    </form>

input form屬性

form屬性規定輸入域所屬的一個或多個表單。

提示：如需引用一個以上的表單，請使用空格分隔的列表

input formaction屬性

the formaction屬性用於描述表單提交的URL地址

the formaction屬性會覆蓋<form>元素的action屬性。

注意：The formaction屬性用於type="submit"和type="image"

例項

以下htmlform表單包含了兩個不同地址的提交按鈕。

   <form autocomplete="on" id="form2" action="http://www.qq.com">
        <input type="text" name="fname" placeholder="請輸入姓名" autofocus /><br />
        <input type="text" name="lname" placeholder="名" /><br />
        <input type="email" name="email" autocomplete="off"  /><br />
        <input type="submit" formaction="http://www.baidu.com" />
    </form>

上面的程式碼在ie9下點選按鈕導航到qq.com,在ie10下導航到baidu.com

 

ie10下

input

formenctype 

屬性

the fomation 屬性用於描述表單提交的伺服器的資料編碼只對form表單中的method="post"表單

formenctype屬性覆蓋form元素的enctype屬性

主要：該屬性與type="submit"和type="image"配合使用。

input formmethod屬性

formmethod 屬性定義了表單提交的方式。

注意：該屬性可以與type="submit"和type="image"配合使用。

    <form autocomplete="on" id="form2" action="http://www.qq.com" method="post">
        <input type="text" name="fname" placeholder="請輸入姓名" autofocus /><br />
        <input type="text" name="lname" placeholder="名" /><br />
        <input type="email" name="email" autocomplete="off"  /><br />
        <input type="submit" formaction="http://www.baidu.com" formmethod="post" />
    </form>

input formnovalidate屬性

novalidate屬性是一個boolean屬性

novalidate屬性描述input元素在表單提交時無需被驗證

formnovalidate屬性會覆蓋<form>元素的novalidate屬性

注意：formnovalidate屬性與type="submit"一起使用

 

input formtarget屬性

formtarget屬性指定一個名稱或一個關鍵字來指明表單提交資料接收後的展示。

the formatarget屬性覆蓋<form>元素的target屬性

注意：formtarget屬性與type="submit"和type="image"配合使用。

 

<input>height 和width屬性

height和width屬性規定用於image型別的input標籤的影象高度和寬度

注意：height 和width屬性只適用於image型別的input標籤。

提示：影象通常會同時指定高度和寬度屬性。如果影象設定高度和寬度，影象所需的空間在載入頁時會被保留。如果沒有這些屬性，瀏覽器不知道影象的大小，並不能預留適當的空間。圖片在載入過程中會使頁面佈局效果改變

 <input type="image" src="../../aiya.png" alt="Submit" width="100" height="48">

<input> list屬性

例項

html:

    <input list="browsers" />
    <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Chrome"></option>
        <option value="Firefox"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>

<input>min 和max屬性

min,max和step屬性用於為包含數字或日期的input型別規定（約束）

注意：min,max和step屬性適用於以下型別的<input>標籤，date pickers,number以及range.

 

最大日期

 

最小日期

範圍

    請輸入1980年之前的日期
    <input type="date" name="bday" max="1979-12-31" />
    <br/>
    請輸入晚於2000-01-01的日期
    <input type="date" name="aday" min="2000-01-02" />
    <br />
    Quantity(在1到5之間)
    <input type="number" name="quantity" min="1" max="5" />

 

 

input multiple屬性

multiple屬性是一個boolean屬性

multiple屬性規定input元素中可選擇多個值

注意:multiple屬性適用於以下型別的<input>標籤:email 和file.

<input type="file" name="img" multiple/>

<input>pattern屬性

pattern屬性描述了一個正規表示式用於驗證<input>元素的值

注意：pattern屬性用於以下型別的<input>標籤：text,search,url,tel,email,和password.

提示：是用來全域性title屬性描述了模式。

 

 <form>
            Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
            <input type="submit" value="提交"/>
        </form>

input placeholder屬性

placeholder屬性提供一種提示(hint)，描述輸入域所期待的值

 

input required屬性

required屬性是一個boolean屬性

required屬性規定必須在提交之前填寫輸入域(不能為空).

注意：required屬性適用以下型別的input標籤:text,search,url,telephone,email,password,data pickers,number,

checkbox,radio,以及file.

 <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" placeholder="請輸入三位字元國家程式碼" required>

input step屬性

step屬性為輸入域規定合法的數字間隔

如果step=3,則合法的數是-3,0,3,6等。

提示：step屬性可以與max和min屬性建立一個區域值

注意：step屬性與以下type型別一起使用，number,range,date,datetime,datetime-local,month,time,week.

 

本節完

 

相關文章