了解HTML表單之13個表單控件 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　input元素無疑是一個龐大和復雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統表單控件，datalist、progress、meter、output、keygen這五個新增表單控件

傳統控件

　　button 　　　　　　定義一個按鈕

　　select 　　　　　　定義一個下拉列表

　　option 　　　　　　定義下拉列表中的一個選項

　　optgroup 　　　　定義選項組，用于組合選項

　　textarea 　　　　　定義多行的文本輸入控件

　　fieldset 　　　　　分組表單內的相關元素

　　legend 　　　　　　定義fieldset元素的標題

　　label 　　　　　　定義input元素的標注

button

　　button元素用來定義一個按鈕，button元素內部可以放置文本或圖像或其他多媒體內容。但唯一禁止使用的元素是圖像映射，因為它對鼠標和鍵盤敏感的動作會干擾表單按鈕的行為

　　始終為button元素設置type屬性，IE7-瀏覽器的默認類型是button，而其他瀏覽器的默認類型是submit

　　IE7-提交button元素之間的文本，而其他瀏覽器則會提交value屬性的內容

　　<button>元素比<input>元素更易樣式化。可以添加內聯HTML內容（如<em>，<strong> 甚至<img>），并使用:after和:before偽元素實現復雜的渲染，而<input>只有文本值屬性

//IE7-瀏覽器:按下提交按鈕時，URL添加?btn=1
//其他瀏覽器:按下button按鈕時，URL添加?btn=2
<form action="#" >
<button value="2" name="btn">1</button>
<input type="submit">
</form>

【默認樣式】

chrome/safari
    padding: 1px 6px;
    border-width:1px;
firefox
    padding: 0px 6px;
    border-width:2px;
IE8-IE11
    padding: 3px 10px;
    border-width:1px;
IE7-
    padding: 1px 0.5px;
    border-width:1px;

【屬性】

　　autofocus 　　　　規定當頁面加載時按鈕自動獲得焦點

　　disabled 　　　　規定應該禁用該按鈕

　　form 　　　　　規定按鈕屬性一個或多個表單

　　formaction 　　覆蓋form元素的action屬性

　　formenctype　　覆蓋form元素的enctype屬性

　　formmethod 　　覆蓋form元素的method屬性

　　formnovaliadate 覆蓋form元素的novalidate屬性

　　formtarget 　　覆蓋form元素的target屬性

　　name 　　　　規定按鈕的名稱

　　type 　　　　　　規定按鈕的類型

　　value 　　　　　　規定按鈕的初始值

select

　　select元素用來定義一個下拉列表，包含任意數量的option和optgroup元素

【屬性】

　　autofocus 　　　　規定在頁面加載后文本區域自動獲得焦點

　　disabled 　　　　規定禁用該下拉列表

　　form 　　　　　　規定文本區域所屬的一個或多個表單

　　multiple 　　　　規定可選擇多個選項

　　name 　　　　　　規定下拉列表的名稱

　　size 　　　　　　規定下拉列表中可見選項的數目

　　[注意]size不可為0，默認為1

【默認樣式】

chrome/safari
    border: 1px solid;
    box-sizing: border-box;
firefox
    padding: 1px;
    box-sizing: border-box;
IE9+
    border: 1px solid;
    box-sizing: border-box;
IE8-
    border: 1px solid;

　　[注意]IE8-瀏覽器box-sizing:content-box;而其他瀏覽器box-sizing:border-box

【默認寬高】

chrome
    width:65px;
    height:16px;
firefox
    width:54px;
    height:21px;
safari
    width: 56px;
    height: 15px;
IE8+
    width:74px;
    height:17px;

　　[注意]safari瀏覽器無法設置高度

option

　　option元素定義下拉列表中的一個選項

　　option元素有兩種應用場景，除了用于下拉列表select外，還可以用于選項列表datalist中

　　詳細信息移步至此

【屬性】

　　disabled 　　　　　　規定此選項應在首次加載時被禁用

　　label 　　　　　　　定義當使用optgroup時所使用的標注，替代option元素內容

　　　　[注意]firefox不支持label屬性

　　selected 　　　　　　規定選項在首次顯示在列表中時表現為選中狀態

　　value 　　　　　　定義送往服務器的選項值

　　　　[注意]當設置value值時，服務器提交的是value的值；否則提交給服務器的是option的元素內容

【默認樣式】

chrome
    padding: 0 2px 1px;

　　[注意]option無法設置margin、padding、border等盒模型樣式

optgroup

　　optgroup元素定義選項組，用于組合選項

　　[注意]optgroup無法設置margin、padding、border等盒模型樣式

【屬性】

　　label 　　　　　　　為選項組規定描述(必須)

　　disabled 　　　　　規定禁用該選項組(可選)

<button id="btn1a" type="button">啟用</button>
<button id="btn1b" type="button">禁用</button>
<button id="btn2a" type="button">可多選</button>
<button id="btn2b" type="button">不可多選</button>
<button id="btn3a" type="button">size=1</button>
<button id="btn3b" type="button">size=2</button>
<button id="btn3c" type="button">size=3</button>
<button id="btn3d" type="button">不設置size</button>    
<form action="#">
    <br><br>
    <select name="test" id="select"> 
        <optgroup label="num">
            <option value="11" disabled>1</option>
            <option value="22" selected>2</option>
            <option value="33">3</option>
            <option value="44" label="word">4</option>        
        </optgroup>
        <optgroup  label="word">
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>        
        </optgroup>
        <optgroup  label="漢字" disabled>
            <option value="一個">一</option>
            <option value="二個">二</option>
            <option value="三個">三</option>
            <option value="四個">四</option>        
        </optgroup>    
    </select>
    <input type="submit">    
</form>
<script>
var select = document.getElementById('select');
btn1a.onclick = function(){
    select.removeAttribute('disabled');
}    
btn1b.onclick = function(){
    select.setAttribute('disabled','');
}
btn2a.onclick = function(){
    select.setAttribute('multiple','');
}
btn2b.onclick = function(){
    select.removeAttribute('multiple');
}
btn3a.onclick = function(){
    select.setAttribute('size','1');
}
btn3b.onclick = function(){
    select.setAttribute('size','2');
}
btn3c.onclick = function(){
    select.setAttribute('size','3');
}
btn3d.onclick = function(){
    select.removeAttribute('size');
}
</script>

textarea

　　textarea定義多行的文本輸入控件，文本區可容納無限數量的文本

　　[注意]瀏覽器不允許textarea嵌套textarea

【默認樣式】

chrome/firefox/safari/IE
    padding: 2px;
    border: 1px solid;

【默認寬高】

chrome
    width: 137px;
    height: 30px;
firefox
    width: 181px;
    height: 51px;
safari
    width: 181px;
    height: 32px;
IE9+
    width: 160px;
    height: 30px;

　　[注意]IE8-瀏覽器寬高設置不包含滾動條；其他瀏覽器寬高設置包含滾動條

【樣式重置】

overflow: auto;
resize: none;
float: left;
outline: none;

【屬性】

　　name 　　　　規定文本區的名稱

　　value 　　　　表示文本區的值

　　disabled 　　　規定禁用該文本區

　　[注意]IE7-瀏覽器不支持通過setAttribute('disabled','')的寫法，必須設置為setAttribute('disabled','disabled')

　　readonly 　　規定文本區為只讀

　　[注意]IE7-瀏覽器不支持通過javascript設置readonly屬性

<input id="btn1" type="button" value="禁用">
<input id="btn2" type="button" value="啟用">
<input id="btn3" type="button" value="只讀">
<input id="btn4" type="button" value="讀寫">
<textarea id="test">測試內容</textarea>
<script>
btn1.onclick = function(){
    test.setAttribute('disabled','');
};
btn2.onclick = function(){
    test.removeAttribute('disabled');
};    
btn3.onclick = function(){
    test.setAttribute('readonly','readonly');
};
btn4.onclick = function(){
    test.removeAttribute('readonly');
};
</script>

　　form 　　　規定文本區域所屬的一個或多個表單

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

　　autofous 　　規定在頁面加載后文本區域自動獲得焦點

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

　　required 　　規定文本區域是必填的

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

　　placeholder 　規定描述文本區域預期值的簡短提示

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

<input id="btn1" type="button" value="placeholder='123'">
<input id="btn2" type="button" value="placeholder='abc'">
<input id="btn3" type="button" value="必填">
<input id="btn4" type="button" value="可不填">
<form action="#">
    <textarea id="test" placeholder="測試內容"></textarea>    
    <input type="submit">
</form>
<script>
var test = document.getElementById('test');
btn1.onclick = function(){
    test.setAttribute('placeholder','123');
};
btn2.onclick = function(){
    test.setAttribute('placeholder','abc');
};    
btn3.onclick = function(){
    test.setAttribute('required','');
};
btn4.onclick = function(){
    test.removeAttribute('required');
};
</script>

　　maxlength 　　規定文本區域的最大字符數

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

<input id="btn1" type="button" value="0">
<input id="btn2" type="button" value="1">
<input id="btn3" type="button" value="6">
<input id="btn4" type="button" value="默認">
<textarea id="test"></textarea>    
<script>
btn1.onclick = function(){
    test.setAttribute('maxlength','0');
};
btn2.onclick = function(){
    test.setAttribute('maxlength','1');
};    
btn3.onclick = function(){
    test.setAttribute('maxlength','6');
};
btn4.onclick = function(){
    test.removeAttribute('maxlength');
};
</script>

　　cols 　　規定文本區內的可見列數

　　rows 　　規定文本區內的可見行數

　　[注意]可以用cols和rows來規定textarea的尺寸，但更好的辦法是使用CSS的height和width屬性

<form action="#">
    cols:<input id="cols" pattern="\d" placeholder="請輸入0-9的數字"><br>
    rows:<input id="rows" pattern="\d" placeholder="請輸入0-9的數字">
    <input id="set" type="submit" value="設置">    
    <textarea id="test"></textarea>        
</form>

<script>
var cols = document.getElementById('cols');
var rows = document.getElementById('rows');
var test = document.getElementById('test');
var set = document.getElementById('set');
set.onclick = function(){
    test.setAttribute('cols',cols.value);
    test.setAttribute('rows',rows.value);
};
</script>

　　wrap 　　規定當在表單中提交時，文本區域中折行如何處理

　　當wrap="soft"，表示表單提交時，雖然文字在屏幕上折行，但提交的數據里不會有換行符(默認值)；而當wrap="hard"，表示表單提交時，提交的數據包含文本換行符%0D%0A

//hard:?test=111111111111111111111%0D%0A1#
//soft:?test=1111111111111111111111111111#
<form action="#">
    <input id="hard" type="button" value="wrap:hard">
    <input id="soft" type="button" value="wrap:soft(默認)">
    <input id="set" type="submit" value="設置">    
    <textarea id="test" name="test"></textarea>        
</form>
<script>
var hard = document.getElementById('hard');
var soft = document.getElementById('soft');
var test = document.getElementById('test');
var set = document.getElementById('set');
hard.onclick = function(){
    test.setAttribute('wrap','hard');
}
soft.onclick = function(){
    test.setAttribute('wrap','soft');
}
</script>

fieldset

　　fieldset元素用于將表單內的相關元素分組，提升可訪問性，多數瀏覽器用一個簡單的邊框來顯示fieldset

【默認樣式】

chrome/firefox/safari
    display:block;
    margin: 0 2px;
    border: 2px groove threedface;
    padding: 5px 12px 10px;
IE9+
    display: block;
    margin: 0 2px;
    border: 1px solid;
    padding: 3px 3px 4px;
IE8
    display: block;
    margin: 0 2px;
    border: 1px solid;
    padding: 1px 3px 4px;
IE7-
    display: block;
    border: 1px solid;
    padding: 1px 3px 4px;

【屬性】

　　disabled　　　　禁用fieldset

　　form 　　　　　　規定fieldset所屬的一個或多個表單

　　name 　　　　　規定fieldset的名稱

legend

　　legend元素用于定義fieldset元素的標題

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
</fieldset>

label

　　label元素為input元素定義標注，建立文字標簽與表單控件的關聯。在label元素內點擊文本會觸發此控件，選擇該文本時瀏覽器會自動把焦點轉到和標簽相關的表單控件上

　　label元素有兩種用法：一種是使用for屬性，另一種是將表單控件嵌套到label內部。但IE6瀏覽器只識別使用for屬性的方法

【屬性】

　　for 　　　　規定label綁定到哪個表單元素

　　form 　　　規定label字段所屬的一個或多個表單

　　[注意]label標簽的for屬性要與相關元素的id屬性相同

<h4>使用for方法</h4>
<label for="male">Male</label>
<input type="radio" name="sex1" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex1" id="female" />
<h4>使用嵌套方法</h4>
<label>Male<input type="radio" name="sex2" /></label>
<br />
<label>Female<input type="radio" name="sex2"  /></label>

【js屬性】

　　label控件有三個javascript屬性，分別是form、htmlFor和control

　　form表示label控件所歸屬的表單

　　htmlFor表示label控件的for屬性的字符串值

　　control表示label控件所指定的input控件(注意：IE瀏覽器不支持)

<form id="myForm">
  <input type="file" id="myFile">
  <label for="myFile" id="myLabel">我是label</label>
</form>
<script>
var myLabel = document.getElementById('myLabel');
console.log(myLabel.form);//<form id="myForm">
console.log(myLabel.htmlFor);//'myFile'
console.log(myLabel.control);//<input type="file" id="myFile">
</script>

新增控件

　　datalist 　　　　定義輸入域的選項列表

　　keygen 　　　　定義密鑰對生成器，用于生成密鑰

　　output 　　　　用于顯示計算的結果

　　progress 　　用于顯示進度(前進量)

　　meter 　　　　用于顯示度量(剩余量)

datalist

　　datalist元素規定輸入域的選項列表，列表是通過datalist內的option元素創建的。如果需要把datalist綁定到輸入域，需要把輸入域的list屬性引用datalist的id。option元素一定要設置value屬性

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

<form action="#">
    <input list="list" name="input">
    <datalist id="list">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>
</form>

keygen

　　keygen規定用于表單的密鑰生成器字段，當提交表單時，私鑰存儲在本地，公鑰發送到服務器

　　[注意]safari和IE不支持該屬性，chrome部分支持該屬性

【屬性】

　　autofocus 　　　　使用keygen字段在頁面加載時獲得焦點

　　challenge 　　　如果使用，則將keygen的值設置為在提交時詢問

　　disabled 　　　　禁用keygen字段

　　form 　　　　　　定義該keygen字段所屬的一個或多個表單

　　keytype 　　　　定義keytype，rsa生成RSA密鑰(默認)

　　name 　　　　　定義keygen元素的唯一名稱

//firefox: 1->usr_name=1&security=MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA1HUwmm%2B75QTnuDXC%0D%0AnUsL8cD8KkncFnA6TRaJttYss0Oi6dVzOPOtdK0O7wxD4%2BIhjSMZRD%2FddKFciZw0%0D%0AURyAimXxe%2FlDKmR3Nb1SzmqA7RJnns%2FA%2BduiYeeIIiMSL2ydUOvQvVFYMtaDkWra%0D%0AtpQfeWv1Hjz9hb7HlGzOUbtGrAECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBAJ0I%0D%0ATWv7CdcNzqkaq5OpN6GHWtrlIpD5UAL%2FOiFDICb%2F8PFgV7FQk0MaGwj5XzQfEu4B%0D%0A6YlAbyz2l91I9%2FJW6Oerru5wL646OpvnTvD2U%2FzByU%2FHWp0BRNeDqntMAsGvzl6D%0D%0AoNsHTwLjDUGYVILge4syfcQVRpFRZiyVRaNlIJT9#
<form action="#">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security"  />
    <input type="submit" />
</form>

output

　　output元素用于顯示計算的結果，這是一個語義化標簽，定義不同類型的輸出，比如腳本的輸出

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

【屬性】

　　for 　　　　定義輸出域相關的一個或多個元素

　　form 　　定義輸入字段所屬的一個或多個元素

　　name 　　定義對象的唯一名稱

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

progress

　　progress元素用來標示任務的進度或進程(常用于表示過程)

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

【屬性】

　　max 　　　　規定任務一共需要多少工作

　　value 　　　規定已經完成多少工作

　　如果progress控件什么屬性都不設置，則會有進度條左右往返運動的效果

<progress></progress>

<input id="btn" type="button" value="開始下載">
下載進度：<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
}
</script>

meter

　　meter元素用于顯示剩余容量或剩余庫存(常用于表示狀態)

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

【屬性】

　　form 　　　　規定meter元素所屬的一個或多個表單

　　high 　　　　規定被視作高的值的范圍

　　low 　　　　規定被視作低的值的范圍

　　max 　　　　規定范圍的最大值

　　min 　　　　規定范圍的最小值

　　optimum 　　規定度量的最優值

　　value 　　　規定度量的當前值(必需)

　　[注意]min 小于 low 小于 high 小于 max

<input id="btn" type="button" value="增加庫存">
庫存量：<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
};
</script>