瞭解HTML表單之input元素的30個元素屬性

前面的話

　　form元素只是一個數據獲取元素的容器，而容器內的元素稱爲表單控件。最經常使用的表單控件是input元素

　　accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個屬性是input元素的傳統元素屬性

　　autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width這19個屬性是HTML5新增的元素屬性

 

傳統屬性

name

　　name屬性用於規定input元素的名稱，用於對提交到服務器後的表單數據進行標識，或者在客戶端經過javascript引用表單數據

　　[注意]只有設置了name屬性的表單元素才能在提交表單時傳遞它們的值

type

　　type屬性用來規定input元素的類型

　　[注意]若是input元素沒有設置type屬性，或者設置的值在瀏覽器中不支持，那麼輸入類型會變成type="text"

　　詳細狀況移步至此

accept

　　accept屬性用來規定可以經過文件上傳進行提交的文件類型。理論上能夠用來限制上傳文件類型，然而它只是建設性的，並極可能被忽略，它接受逗號分隔的MIME類型

　　[注意]該屬性只能與type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

　　alt屬性爲圖像輸入規定替代文本，功能相似於image元素的alt屬性，爲用戶因爲某些緣由沒法查看圖像時提供備選信息

　　[注意]alt屬性只能與type="image"的input元素配合使用

<input type="image" src="#" alt="測試圖片">

 

checked

　　checked屬性規定在頁面加載時應該被預先選定的input元素，也能夠在頁面加載後，經過javascript進行設置

　　[注意]checked屬性只能與type="radio"或type="checkbox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<script>
var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
    oInput[i].onmouseover = function(){
        this.checked = 'checked';
    }
}    
</script>

disabled

　　disabled屬性規定應該禁用input元素。被禁用的字段是不能修改的，也不可使用tab按鍵切換到該字段，但能夠選中或拷貝其文本

　　[注意1]disabled屬性沒法與type="hidden"的input元素一塊兒使用

　　[注意2]對於IE7-瀏覽器必須設置爲disabled="disabled"，而不能夠直接設置disabled，不然使用javascript控制時將失效

<button id="btn1">輸入域可用</button>
<button id="btn2">輸入域不可用</button>
<input id="test" disabled value="內容">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

readonly

　　readonly屬性規定輸入字段爲只讀。只讀字段是不能修改的，但用戶仍然可使用tab按鍵切換到該字段，還能夠選中或拷貝其文本

　　readonly屬性可與type="text"或"password"的input元素配合使用

　　[注意]IE7-瀏覽器不支持使用javascript控制readonly屬性

<button id="btn1">輸入域只讀</button>
<button id="btn2">輸入域可讀寫</button>
<input id="test" value="內容" readonly>
<script>
btn1.onclick = function(){
    test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
    test.removeAttribute('readonly');
}    
</script>

maxlength

　　maxlength屬性規定輸入字段的最大長度，以字符個數計

　　[注意]該屬性只能與type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size

　　size屬性對於type="text"或"password"的input元素是可見的字符數；而對於其餘類型，是以像素爲單位的輸入字段寬度

　　[注意]因爲size屬性是一個可視化的設計屬性，推薦使用CSS來代替它

<input size="1">
<input type="password" size="2">

src

　　src屬性做爲提交按鈕顯示的圖像的URL

　　[注意]src屬性只能且必須與type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="測試圖片">
</form>

value

　　value屬性爲input元素設定值。對於不一樣的輸入類型，value屬性的用法也不一樣：

　　type="button"、"reset"、"submit"用於定義按鈕上的顯示的文本

　　type="text"、"password"、"hidden"用於定義輸入字段的初始值

　　type="checkbox"、"radio"、"image"用於定義與輸入相關聯的值

　　[注意1]type="checkbox"或"radio"必須設置value屬性

　　[注意2]value屬性沒法與type="file"的input元素一塊兒使用

<button id="btn1">1</button>
<button id="btn2">2</button>
<input id="test">
<script>
btn1.onclick = btn2.onclick =function(){
    test.value=this.innerHTML;
}    
</script>

 

新增屬性

autocomplete

　　autocomplete屬性能夠在個別元素或整個表單上開啓或關閉瀏覽器的自動完成功能。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，顯示出在字段中填寫的選項

　　autocomplete屬性適用form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性纔有效

<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off">    

　　詳細狀況移步至此

autofocus

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

　　autofous屬性適用於button、input、keygen、select和textarea元素

<input name="test1">
<input name="test2" autofocus>

novalidate

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

　　novalidate屬性適用於form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE9-瀏覽器不支持

　　詳細狀況移步至此

height

　　height屬性用於規定image類型的input標籤的圖像高度

　　[注意]該屬性只適用於image類型的input標籤

width

　　width屬性用於規定image類型的input標籤的圖像寬度

　　[注意]該屬性只適用於image類型的input標籤

//http://127.0.0.1/form.html?test=123&x=38&y=57#
<form action="#">
    <input name="test">
    <input type="image" src="submit.jpg" width="99" height="99">
</form>

list

　　大多數輸入類型包含一個屬性list，它和一個新元素datalist結合使用，這個元素定義當在表單控件輸入數據時可用的一個選項列表。datalist元素自身不會在頁面顯示，而是爲其餘元素的list屬性提供數據

　　list屬性適用於form元素以及如下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE9-瀏覽器及safari瀏覽器不支持

　　詳細狀況移步至此

min

　　min屬性規定輸入域所容許的最大值 

max

　　max屬性規定輸入域所容許的最小值

step

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

　　min、max、step屬性適用於如下類型的input元素:date pickers、number、range

<input type="number" min="0" max="10" step="0.5" value="6" />

<input type="range" min="0" max="10" step="0.5" value="6" />

multiple

　　multiple屬性規定按住ctrl按鍵，輸入字段能夠選擇多個值

　　該屬性適用於type="email"和"file"的input元素

　　[注意]該屬性IE9-瀏覽器不支持

<button id="btn1">打開文件多選</button>
<button id="btn2">關閉文件多選</button>
<br><br>
<input id="test" type="file" multiple>
<script>
btn1.onclick = function(){
    test.setAttribute('multiple','');
};
btn2.onclick = function(){
    test.removeAttribute('multiple');
};
</script>

pattern

　　pattern屬性規定用於驗證input域的模式。模型pattern是正則表達式

　　pattern屬性適用於如下類型的input元素：text、search、url、tel、email、password

　　[注意]IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder

　　placeholder屬性提供佔位符文字，描述輸入域所期待的值。佔位符會在輸入域爲空時顯示出現，在輸入域得到焦點時消失

　　placeholder屬性適用於如下類型的input元素:text、search、url、tel、email、password

　　[注意]IE9-瀏覽器不支持

<form action="#">
    <input type="tel" placeholder="請輸入數字" pattern="\d{11}">    
    <input type="submit">
</form>

　　要修改placeholder的顏色須要使用::placeholder

::placeholder{color:green;}

 

required

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

　　required屬性適用於如下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

　　[注意]IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input required>    
    <input type="submit">
</form>

form

　　form屬性規定輸入域所屬的一個或多個表單，form屬性必須和所屬表單的id

　　form屬性適用於全部input標籤的類型，若須要引用一個以上的表單時，用空格分隔

　　[注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性纔有效

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

 

表單重寫屬性

　　表單重寫屬性容許重寫form元素的某些屬性設定。其中，formnovalidate適用於button或input元素，而其餘屬性適用於submit或reset的button或input元素

formaction

　　重寫表單的action屬性

　　關於action的詳細信息移步至此

<form action="#" >
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="#" value="以管理員身份提交" />
</form>

formenctype

　　重寫表單的enctype屬性

　　關於enctype的詳細信息移步至此

<form action="#" method="post">
  First name: <input type="text" name="fname" /><br />
  <input type="submit" value="提交" />
  <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data編碼提交" />
</form>

formmethod

　　重寫表單的method屬性

　　關於method的詳細信息移步至此

<form action="#" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
</form>

formnovalidate

　　重寫表單的novalidate屬性

　　關於novalidate的詳細信息移步至此

<form action="#" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="進行沒有驗證的提交" />
</form>

formtarget

　　重寫表單的target屬性

　　關於target的詳細信息移步至此

<form action="#">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新窗口/選項卡" />
</form>