7、 表單
7.1表單的作用
1）動態交互：通過查看、填寫（頁面上錄入數據）並提交表單信息到服務器端。
2）表單有兩個基本部分：
①實現數據交互的可見的界面元素，比如文本框或按鈕。
②提交後的表單處理。
3）界面元素：
①使用<form>元素創建表單。
②在<form>元素中添加其他表單可以包含的控件元素。
7.2表單元素<form>
1）定義表單：使用成對的<form></form>標記。
2）承載其他交互的元素，以表單爲單位提交數據。
3）主要屬性：
①action屬性：定義表單被提交時發生的動作，通常包含服務方腳本的URL（比如JSP、PHP）。
②method屬性：指出表單數據提交的方式，取值爲get或者post。
③enctype屬性：表單數據進行編碼的方式。
例如：<form action="login.jsp" method="post">
地址信息：包含文本框、密碼框等錄入數據的元素
包含一個提交按鈕<!--此處的提交按鈕只對當前form裏的數據進行提交-->
</form>
<form action="">發票信息：</form>
7.3 <input>元素
1）<input>元素用於收集用戶信息。
2）該元素是一個空標記，語法爲：<input />
3）主要屬性：
①type屬性：依靠type屬性的取值決定元素的類型。
②value屬性：取決於元素的類型，用作初始值（文本框/密碼框）、用於提交的值（單/多選框）、按鈕上的文本顯示（提交/重置/普通按鈕）。
③name屬性：單選或者多選框的分組。同一組name應相同。
7.4文本框與密碼框
1）文本框<input type="text" />
2）密碼框<input type="password" />
3）主要屬性：
①value屬性：用作初始值。
②maxlength屬性：限制輸入的字符數。
③readonly屬性：設置文本控件只讀，老版本可寫readonly=""，當前寫成
readonly="readonly"。
7.5單選框和多選框
1）單選框：<input type="radio" />
2）多選框：<input type="checkbox" />
3）主要屬性：
①value屬性：當提交form時，如果選中了此單選框，那麼value的值就被髮送到服務器。
②name屬性：單選或者多選框的分組。同一組name應相同。
③checked屬性：設置初始狀態是否爲選中，老版本可寫checked=""，當前寫成checked="checked"。
7.6按鈕
1）提交按鈕：<input type="submit" />，傳送表單數據給服務器端或其他程序處理，並且頁面刷新。
2）重置按鈕：<input type="reset" />，清空表單的內容並把所有表單控件恢復到默認值狀態。
3）普通按鈕：<input type="button" />，用於執行客戶端腳本，爲其設置onclick事件，纔會有功能。
4）主要屬性：value屬性：按鈕上的文本顯示。
7.7隱藏域和文件選擇框
1）隱藏域：<input type="hidden" />，不會顯示，常用於在頁面上隱藏那些不希望被用戶看到的數據。
2）文件選擇框：<input type="file" />，選擇要上傳的文件。
7.8 < label >元素
1）語法：<label>文本</label>
2）主要屬性：for屬性：表示與該元素相關聯的控件的ID值。
3）作用：使用for屬性關聯其他元素，使單擊文本時，就像單擊關聯的控件（元素）一樣
例如：<input type="radio" name="sex" value="0" id="s1"/><label for="s1">女士</label>
<input type="radio" name="sex" value="1" id="s2" /><label for="s2">男士</label>
7.9選項框
1）兩種：下拉選項框和滾動列表
2）<select>：創建選項框
①name屬性：選項框命名。
②size屬性：大於1，則爲滾動列表，即由size屬性區分下拉和滾動列表。
③multiple：設置多選。
3）<option>：選項
①value屬性：選項用於提交的值。
②selected屬性：預選中，老版本可寫selected=""，當前寫成selected="selected"。
7.10 <textarea>元素
1）多行文本輸入框：<textarea>文本</textarea>
2）主要屬性：
①cols屬性：指定文本區域的列數。
②rows屬性：指定文本區域的行數。
③readonly屬性：設置只讀。
7.11表單元素分組（表單元素特有的）
1）<fieldset>元素：爲表單控件分組。
2）<legend>元素：爲分組指定一個標題
例如：<fieldset><!--表單元素特有分組-->
<legend>角色</legend><!--表單分組標題名-->
<input type="checkbox" name="role" value="0" id="r1" />
<label for="r1">超級管理員</label><br /><!--label關聯元素-->
<input type="checkbox" name="role" value="1" id="r2" />
<label for="r2">帳單管理員</label>
</fieldset>
u 注意事項：所有標籤都可以加ID屬性，爲了作唯一區分。
7.12案例：創建複雜表單
<h2>增加管理員</h2>
<form> <table> <tr> <td align="right">姓名：</td>
<td><input type="text" value="marry" /></td>
<td>10個字符以內</td> </tr>
<tr> <td align="right">密碼：</td>
<td><input type="password" /></td>
<td>10個字符以內</td> </tr>
<tr> <td align="right">性別：</td><!--label關聯元素-->
<td><input type="radio" name="sex" value="0" id="s1"/><label for="s1">女士</label>
<input type="radio" name="sex" value="1" id="s2" /><label for="s2">男士</label>
</td><td></td> </tr>
<tr> <td align="right">角色：</td>
<td> <fieldset><!--表單元素特有分組-->
<legend>角色</legend><!--表單分組標題名-->
<input type="checkbox" name="role" value="0" id="r1" />
<label for="r1">超級管理員</label><br /><!--label關聯元素-->
<input type="checkbox" name="role" value="1" id="r2" />
<label for="r2">帳單管理員</label>
</fieldset></td>
<td>至少選擇一個角色</td> </tr>
<tr> <td align="right">上傳頭像：</td><td><input type="file" /></td><td></td></tr>
<tr> <td align="right">狀態：</td>
<td> <select><!--下拉菜單-->
<option value="1">啓用</option>
<option value="2">停用</option>
<option value="3">刪除</option> </select> </td><td></td> </tr>
<tr><td align="right">自我描述：</td>
<td> <textarea></textarea><!--多行文本框--></td><td></td> </tr>
<tr> <td></td><td align="center">
<input type="submit" value="保存" /> <input type="reset" value="重置" />
<input type= "hidden" value="123" /><!--隱藏域-->
<input type="button" value="按鈕1" /></td> </tr>
</table> </form>