html 表單用于收集不同類型的用戶輸入,所有瀏覽器都支持 <form> 標簽。定義和用法 <form> 標簽用于為用戶輸入創(chuàng)建 html 表單。 表單能夠包含 input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等。 HTML 表單表單是一個包含表單元素的區(qū)域 表單元素是允許用戶在表單中輸入內(nèi)容，如文本域 、下拉列表 、單選框 、復(fù)選框等等 表單使用表單標簽 <form> 來設(shè)置 <form>. *input 元素* .</form> HTML 表單 - 輸入元素多數(shù)情況下被用到的表單標簽是輸入標簽 ( <input> ) 輸入類型是由類型屬性（type）定義的，大多數(shù)經(jīng)常被用到的輸入類型如下 文本域<input type="text"> 標簽定義了文本域 當用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域 <form> <p>First name: <input type="text" name="firstname"></p> <p>Last name: <input type="text" name="lastname"></p> </form> 瀏覽器顯示如下 注意: 表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的缺省寬度是 20 個字符 密碼字段<input type="password"> 標簽定義了密碼字段 <form>Password: <input type="password" name="pwd"> </form> 瀏覽器顯示如下 注意: 密碼字段字符不會明文顯示，而是以星號或圓點替代 單選按鈕<input type="radio"> 標簽定義了表單單選框選項 <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> 瀏覽器顯示如下 復(fù)選框<input type="checkBox"> 定義了復(fù)選框 用戶需要從若干給定的選擇中選取一個或若干選項 <form> <input type="checkBox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkBox" name="vehicle" value="Car"> I have a car </form> 瀏覽器顯示如下 提交按鈕<input type="submit"> 定義了提交按鈕 當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件 表單的動作屬性定義了目的文件的文件名 由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理 <form name="input" action="/dy/html/getpost" method="get"> <p>用戶名：<input type="text" name="user"></p> <p><input type="submit" value="Submit"></p> </form> 瀏覽器顯示如下 可以在上面的文本框內(nèi)鍵入幾個字母，然后點擊確認按鈕 那么輸入數(shù)據(jù)會傳送到 "/dy/html/getpost" 的頁面，該頁面將顯示出輸入的結(jié)果 表單元素屬性form元素只是一個數(shù)據(jù)獲取元素的容器，而容器內(nèi)的元素稱為表單控件。最常用的表單控件是input元素 accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個屬性是input元素的傳統(tǒng)元素屬性 autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width這19個屬性是HTML5新增的元素屬性 傳統(tǒng)屬性namename屬性用于規(guī)定input元素的名稱，用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標識，或者在客戶端通過JavaScript引用表單數(shù)據(jù) [注意]只有設(shè)置了name屬性的表單元素才能在提交表單時傳遞它們的值 typetype屬性用來規(guī)定input元素的類型 [注意]如果input元素沒有設(shè)置type屬性，或者設(shè)置的值在瀏覽器中不支持，那么輸入類型會變成type="text" acceptaccept屬性用來規(guī)定能夠通過文件上傳進行提交的文件類型。理論上可以用來限制上傳文件類型，然而它只是建設(shè)性的，并很可能被忽略，它接受逗號分隔的MIME類型 [注意]該屬性只能與type="file"配合使用 <input type="file" accept="image/gif,image/jpeg,image/jpg"> altalt屬性為圖像輸入規(guī)定替代文本，功能類似于image元素的alt屬性，為用戶由于某些原因無法查看圖像時提供備選信息 [注意]alt屬性只能與type="image"的input元素配合使用 <input type="image" src="#" alt="測試圖片"> checkedchecked屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的input元素，也可以在頁面加載后，通過JavaScript進行設(shè)置 [注意]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>disableddisabled屬性規(guī)定應(yīng)該禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按鍵切換到該字段，但可以選中或拷貝其文本 [注意1]disabled屬性無法與type="hidden"的input元素一起使用 [注意2]對于IE7-瀏覽器必須設(shè)置為disabled="disabled"，而不可以直接設(shè)置disabled，否則使用javascript控制時將失效 <button id="btn1">輸入域可用</button>
<button id="btn2">輸入域不可用</button>
<input id="test" disabled value="內(nèi)容">
<script>
btn1.onclick = function(){
test.removeAttribute('disabled');
}
btn2.onclick = function(){
test.setAttribute('disabled','disabled');
}
</script>readonlyreadonly屬性規(guī)定輸入字段為只讀。只讀字段是不能修改的，但用戶仍然可以使用tab按鍵切換到該字段，還可以選中或拷貝其文本 readonly屬性可與type="text"或"password"的input元素配合使用 [注意]IE7-瀏覽器不支持使用javascript控制readonly屬性 <button id="btn1">輸入域只讀</button>
<button id="btn2">輸入域可讀寫</button>
<input id="test" value="內(nèi)容" readonly>
<script>
btn1.onclick = function(){
test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
test.removeAttribute('readonly');
}
</script>maxlengthmaxlength屬性規(guī)定輸入字段的最大長度，以字符個數(shù)計 [注意]該屬性只能與type="text"或type="password"的input元素配合使用 <input maxlength="6"> <input type="password" maxlength="6"> sizesize屬性對于type="text"或"password"的input元素是可見的字符數(shù)；而對于其他類型，是以像素為單位的輸入字段寬度 [注意]由于size屬性是一個可視化的設(shè)計屬性，推薦使用css來代替它 <input size="1"> <input type="password" size="2"> srcsrc屬性作為提交按鈕顯示的圖像的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> valuevalue屬性為input元素設(shè)定值。對于不同的輸入類型，value屬性的用法也不同： type="button"、"reset"、"submit"用于定義按鈕上的顯示的文本 [注意1]type="checkBox"或"radio"必須設(shè)置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>新增屬性autocompleteautocomplete屬性可以在個別元素或整個表單上開啟或關(guān)閉瀏覽器的自動完成功能。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，顯示出在字段中填寫的選項 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"> autofocusautofocus屬性規(guī)定在頁面加載時，域自動地獲得焦點 autofous屬性適用于button、input、keygen、select和textarea元素 <input name="test1"> <input name="test2" autofocus> novalidatenovalidate屬性規(guī)定在提交表單時不驗證form或input域 novalidate屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color [注意]IE9-瀏覽器不支持 heightheight屬性用于規(guī)定Image類型的input標簽的圖像高度 [注意]該屬性只適用于Image類型的input標簽 widthwidth屬性用于規(guī)定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大多數(shù)輸入類型包含一個屬性list，它和一個新元素datalist結(jié)合使用，這個元素定義當在表單控件輸入數(shù)據(jù)時可用的一個選項列表。datalist元素自身不會在頁面顯示，而是為其他元素的list屬性提供數(shù)據(jù) list屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color [注意]IE9-瀏覽器及safari瀏覽器不支持 minmin屬性規(guī)定輸入域所允許的最大值 maxmax屬性規(guī)定輸入域所允許的最小值 stepstep屬性為輸入域規(guī)定合法的數(shù)字間隔 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" /> multiplemultiple屬性規(guī)定按住ctrl按鍵，輸入字段可以選擇多個值 該屬性適用于type="email"和"file"的input元素 [注意]該屬性IE9-瀏覽器不支持 <button id="btn1">打開文件多選</button>
<button id="btn2">關(guān)閉文件多選</button>
<br><br>
<input id="test" type="file" multiple>
<script>
btn1.onclick = function(){
test.setAttribute('multiple','');
};
btn2.onclick = function(){
test.removeAttribute('multiple');
};
</script>patternpattern屬性規(guī)定用于驗證input域的模式。模型pattern是正則表達式 pattern屬性適用于以下類型的input元素：text、search、url、tel、email、password [注意]IE9-瀏覽器及safari瀏覽器不支持 <form action="#">
<input pattern="\d{3}">
<input type="submit">
</form>placeholderplaceholder屬性提供占位符文字，描述輸入域所期待的值。占位符會在輸入域為空時顯示出現(xiàn)，在輸入域獲得焦點時消失 placeholder屬性適用于以下類型的input元素:text、search、url、tel、email、password [注意]IE9-瀏覽器不支持 <form action="#">
<input type="tel" placeholder="請輸入數(shù)字" pattern="\d{11}">
<input type="submit">
</form>要修改placeholder的顏色需要使用::placeholder ::placeholder{color:green;}requiredrequired屬性規(guī)定必須在提交之前填寫輸入域(不能為空) required屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkBox、radio、file [注意]IE9-瀏覽器及safari瀏覽器不支持 <form action="#"> <input required> <input type="submit"> </form> formform屬性規(guī)定輸入域所屬的一個或多個表單，form屬性必須和所屬表單的id form屬性適用于所有input標簽的類型，若需要引用一個以上的表單時，用空格分隔 [注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效 <form id="form" action="#"> <input type="submit"> </form> <input name="test" form="form"> 表單重寫屬性表單重寫屬性允許重寫form元素的某些屬性設(shè)定。其中，formnovalidate適用于button或input元素，而其他屬性適用于submit或reset的button或input元素 |
