HTML form標(biāo)簽小結(jié)
<pre>
最近研究 form標(biāo)簽，有一些小心得寫下來與大家分享分享筑凫，共勉。在小結(jié)的最后有一個form表單的小例子并村，可以作為參考巍实。
-----DanlV
</pre>
<pre>
form是HTML的一個極為重要的功能標(biāo)簽之一。
</pre>
輸入域input
- input type屬性有如下屬性值：
1.button按鈕（具體接下來細(xì)說）
2.file用于文件選取
3.hidden隱藏域哩牍，可以實現(xiàn)隱藏的操作
4.text用于文本輸入
5.password用密碼輸入
6.radio單選按鈕棚潦，name屬性相同的為一組
7.checkbox多選按鈕，name屬性相同的為一組
8.image圖片形式提交按鈕
9.reset重置form按鈕
10.submit提交form按鈕 - alt屬性膝昆，定義當(dāng)按鈕式圖片時丸边，提片的替代文本
- src屬性，定義當(dāng)按鈕為圖片時荚孵，圖片的鏈接地址
- checked屬性妹窖，定義默認(rèn)選項
<input type="radio" name="" checked>checked的值為true或false，也可以直接寫成checked - disabled屬性，禁用當(dāng)前輸入域（用法如checked）
- readonly屬性，對當(dāng)前輸入域只讀此迅，實際作用與disabled相同郊愧，但是展現(xiàn)出來的效果不一樣（用法如checked）
- maxlength屬性，定義輸入域字符的最大長度
- name屬性粱锐，定義當(dāng)前的輸入域的名字
- value屬性，定義當(dāng)前輸入域的默認(rèn)值
文本輸入?yún)^(qū)textarea
- rows屬性，規(guī)定可見行數(shù)
- cols屬性绕德，規(guī)定可見列數(shù)
- disabled屬性，禁用當(dāng)前文本輸入?yún)^(qū)
- name屬性摊阀，當(dāng)前文本區(qū)的名字
- readonly屬性耻蛇，當(dāng)前文本區(qū)域只讀
按鈕button
- type類型一共有三種：
1.type="button"普功通功能按鈕
2.type="submit"提交form表單功能按鈕
3.type="reset"重置form表單功相關(guān)屬能按鈕 - disabled屬性踪蹬，禁用此按鈕
- name屬性，按鈕的名字
- value屬性臣咖，按鈕上顯示文本內(nèi)容的默認(rèn)值
下來菜單select
- 相關(guān)屬性：
1.disabled屬性跃捣，禁用該菜單
2.multiple屬性，規(guī)定可同時選中多項
3.name屬性夺蛇，下拉列表的名字
4.size屬性疚漆，菜單中可見項目的數(shù)目 -
<optgroup>標(biāo)簽，定義下拉列表的選項分組刁赦，屬性為：
5.label屬性娶聘，定義選項組的標(biāo)記（名字），必要屬性
6.disabled屬性甚脉，禁用 -
<optinon>屬性丸升，定義下拉列表中的選項（此標(biāo)簽在<optgroup>標(biāo)簽）中，屬性為：
1.disabled屬性牺氨，禁用
2.label屬性狡耻，定義當(dāng)使用 <optgroup> 時所使用的標(biāo)注
3.selected屬性，規(guī)定選項（在首次顯示在列表中時猴凹，與checked類似）表現(xiàn)為選中狀態(tài)夷狰。
4.value屬性，向服務(wù)器輸送的值
表單中的標(biāo)記<label>
為了是輸入更為人性化精堕，提高用戶的體驗度孵淘，再點擊提示文字的時候光標(biāo)自動聚焦到輸入的位置，使用此標(biāo)簽歹篓。有兩種使用方法：
-
<label for="user"></label> <inpu t type="text" name="user">此方式使用label的for屬性瘫证，值制定輸入?yún)^(qū)域的name -
<label > <input type="text" name="user"></label>
將input直接放入label中，不需要使用for屬性庄撮，推薦使用背捌。
表單中相關(guān)元素分組fieldset
將表單中相關(guān)的元素進行分組，使用<ledend>標(biāo)簽 定義分組標(biāo)題洞斯。相關(guān)實例見最后的代碼毡庆。
實例
代碼示例
<form action="" method="post">
<fieldset>
<legend>天下第一爭霸賽</legend>
<label > 門派： <input type="text" name="menpai" id=""></label>
<br><label >密碼： <input type="password" name="psw" id=""> </label>
<br><label >上傳你的請柬： <input type="file" name="qingjian" id=""></label>
<br>選武器： <input type="radio" name="arms" id="">刀
<input type="radio" name="arms" id="">劍
<input type="radio" name="arms" id="">槍
<input type="radio" name="arms" id="">鞭
<br>挑戰(zhàn)對手： <input type="checkbox" name="Army" id="">梅超風(fēng)
<input type="checkbox" name="Army" id="">洪七
<input type="checkbox" name="Army" id="">金毛獅王謝遜
<input type="checkbox" name="Army" id="">張三豐
<br><label > 選擇你的門派：<select name="" id="" >
<optgroup label="西域">
<option value="天山">天山派</option>
<option value="昆侖">昆侖派</option>
</optgroup>
<optgroup label="中原" >
<option value="峨眉">峨眉派</option>
<option value="少林">少林派</option>
<option value="武當(dāng)" selected>武當(dāng)派</option>
<option value="天龍">天空派</option>
<option value="星宿">星宿派</option>
<option value="逍遙">逍遙派</option>
<option value="丐幫">丐幫派</option>
<option value="五毒">五毒派</option>
<option value="明教">明教派</option>
</optgroup>
</select></label>
<br> <input type="image" src="" alt="假裝有圖片">
<br> <input type="reset" value="重置"> <input type="submit" value="確定">
</fieldset>
</form>
