HTML form標簽小結 最近研究 form標簽，有一些小心得寫下來與大家分享分享，共勉。在小結的最後有一個form表單的小例子，可以作為參考。 DanlV form是HTML的一個極為重要的功能標簽之一。 輸入域input input type屬性有如下屬性值： 1.button按鈕（具體接下來 ...
HTML form標簽小結
最近研究 form標簽，有一些小心得寫下來與大家分享分享，共勉。在小結的最後有一個form表單的小例子，可以作為參考。 -----DanlV
form是HTML的一個極為重要的功能標簽之一。
輸入域input
- input type屬性有如下屬性值：
1.button按鈕（具體接下來細說）
2.file用於文件選取
3.hidden隱藏域，可以實現隱藏的操作
4.text用於文本輸入
5.password用密碼輸入
6.radio單選按鈕，name屬性相同的為一組
7.checkbox多選按鈕，name屬性相同的為一組
8.image圖片形式提交按鈕
9.reset重置form按鈕
10.submit提交form按鈕
- alt屬性，定義當按鈕式圖片時，提片的替代文本
- src屬性，定義當按鈕為圖片時，圖片的鏈接地址
- checked屬性，定義預設選項
<input type="radio" name="" checked>checked的值為true或false，也可以直接寫成checked - disabled屬性，禁用當前輸入域（用法如checked）
- readonly屬性，對當前輸入域只讀，實際作用與disabled相同，但是展現出來的效果不一樣（用法如checked）
- maxlength屬性，定義輸入域字元的最大長度
- name屬性，定義當前的輸入域的名字
- value屬性，定義當前輸入域的預設值
文本輸入區textarea
- rows屬性，規定可見行數
- cols屬性，規定可見列數
- disabled屬性，禁用當前文本輸入區
- name屬性，當前文本區的名字
- readonly屬性，當前文本區域只讀
按鈕button
- type類型一共有三種：
1.type="button"普功通功能按鈕
2.type="submit"提交form表單功能按鈕
3.type="reset"重置form表單功相關屬能按鈕
- disabled屬性，禁用此按鈕
- name屬性，按鈕的名字
- value屬性，按鈕上顯示文本內容的預設值
下來菜單select
- 相關屬性：
1.disabled屬性，禁用該菜單
2.multiple屬性，規定可同時選中多項
3.name屬性，下拉列表的名字
4.size屬性，菜單中可見項目的數目 <optgroup>標簽，定義下拉列表的選項分組，屬性為：
5.label屬性，定義選項組的標記（名字），必要屬性
6.disabled屬性，禁用<optinon>屬性，定義下拉列表中的選項（此標簽在<optgroup>標簽）中，屬性為：
1.disabled屬性，禁用
2.label屬性，定義當使用
表單中的標記<label>
為了是輸入更為人性化，提高用戶的體驗度，再點擊提示文字的時候游標自動聚焦到輸入的位置，使用此標簽。有兩種使用方法：
<label for="user"></label> <inpu t type="text" name="user">此方式使用label的for屬性，值制定輸入區域的name<label > <input type="text" name="user"></label>
將input直接放入label中，不需要使用for屬性，推薦使用。
---表單中相關元素分組fieldset
將表單中相關的元素進行分組，使用<legend>標簽 定義分組標題。相關實例見最後的代碼。
代碼示例
<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>挑戰對手： <input type="checkbox" name="Army" id="">梅超風
<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="武當" selected>武當派</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>
