HTML表單應用
A、表單元素都是放在<form></form>標簽內的。來看看表單的屬性
屬性 值 描述
accept MIME_type 規定通過文件上傳來提交的文件的類型
accept-charset charset 服務器處理表單數據所接受的字符集
enctype MIME_type 規定表單數據在發送到服務器之前應該如何編碼
method get/post 規定表單數據發送的方式，get方法和post方法
name name 規定表單的名稱
target _blank/_parent/_self/_top 規定在何處打開action URL
三個重要的屬性說明：
1、action指定該表單發送時接受操作的地址
2、method指定表單數據發送的方法。可選值:get、post。get發送則表單內的數據將附加到url後發送。post則是在HTTP請求中發送。
3、enctype指定表單數據在發送的服務器之前如何編碼，特別註意的是，當含有上傳域時要設置編碼方式為enctype="multipart/form-data"，否則後臺無法獲取到瀏覽器發送的文件數據。是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，form裏面的input的值以2進制的方式傳過去。才能完整的傳遞文件數據。FTP上傳大文件的時候，也有個選項是以二進制方式上傳。
enctype的三個選項
值 描述
application/x-www-form-urlencoded 在發送前編碼所有字符（默認）
multipart/form-data 不對字符編碼。以二進制的方式發送數據，當表單含有上傳域時，必須使用後臺才能獲取上傳的文件。
text/plain 空格轉換為 "+" 加號，但不對特殊字符編碼。
其他常用說明
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| accept | mime_type | 規定通過文件上傳來提交的文件的類型。 | STF |
| align |
|
不贊成使用。規定圖像輸入的對齊方式。 | TF |
| alt | text | 定義圖像輸入的替代文本。 | STF |
| checked | checked | 規定此 input 元素首次加載時應當被選中。 | STF |
| disabled | disabled | 當 input 元素加載時禁用此元素。 | STF |
| maxlength | number | 規定輸入字段中的字符的最大長度。 | STF |
| name | field_name | 定義 input 元素的名稱。 | STF |
| readonly | readonly | 規定輸入字段為只讀。 | STF |
| size | number_of_char | 定義輸入字段的寬度。 | STF |
| src | URL | 定義以提交按鈕形式顯示的圖像的 URL。 | STF |
| type |
|
規定 input 元素的類型。 | STF |
| value | value | 規定 input 元素的值。 | STF |
B、input
一、文本域
<input type="text" name="text" value="" />
二、密碼域
密碼跟文本框類似，但是在裏面輸入的內容顯示為圓點。
<input type="password" name="text" value="" />
三、單選按鈕
男人:<input type="radio" name="sex" value="male" /> Male <br /> 女人：<input type="radio" name="sex" value="female" /> Female
四、復選框
<input type="checkbox" name="check1" value="" />
五、按鈕
<input type="button" value="確認" />
六、重置按鈕
當點擊重置按鈕時，重置按鈕所在的表單將全部清空，而其他表單不受影響。
<input type="reset" value="重置" />
七、提交按鈕
當點擊提交按鈕時，瀏覽器將自動提交表單。
<input type="submit" value="提交" />
八、隱藏域
隱藏域在瀏覽器中並不顯示，僅僅為保存一些不太重要的資料而存在。
<input type="hidden" value="我是一個隱藏域" />
九、上傳域
<input type="file" value="" />
十、圖片按鈕
<input type="image" src="123.gif" />
十一、下拉列表
<select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select>
| 屬性 | 可選值 | 說明 |
|
disabled |
disabled | 規定禁用該下拉列表。 |
| multiple | multiple | 規定可選擇多個選項。 |
| name | name | 規定下拉列表的名稱。 |
| size | number | 規定下拉列表中可見選項的數目。 |
十二、label
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。例如，當將單選按鈕放在label內。則點擊label內的文字也會觸發單選按鈕，而不必只是點中小圓點。
<p><label><input type="radio" name="male" />男人</label></p> <p><label><input type="radio" name="male" />女人</label></p>
女人
也可以寫成這樣
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
十三、disabled與readonly
禁用和只讀屬性。readonly只針對input(text / password)和textarea有效，而disabled對於所有的表單元素都有效，包括select, radio, checkbox, button等。但是表單元素在使用了disabled後，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去。
可以在用戶按了提交按鈕後，利用javascript將提交按鈕disabled掉，這樣可以防止網絡條件比較差的環境下，用戶反復點提交按鈕導致數據冗余地存入數據庫。
<form id="form1" action="/home/index" method="post">
禁用文本框：<input type="text" disabled="disabled" />
只讀文本框: <input type="text" readonly="readonly" />
</form>
十四、TextArea
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| cols | number | 規定文本區內的可見寬度。 | STF |
| rows | number | 規定文本區內的可見行數。 | STF |
<form id="form1" action="/home/index" method="post">
<textarea cols="10" rows="10">我是一個兵，來自老百姓。</textarea>
</form>
十五、fieldset 定義域
fieldset用於給表單元素分組，legend用於設置分組標題
<fieldset>
<legend>你的信息？</legend>
身高: <input type="text" value="180" />
體重: <input type="text" value="200" />
</fieldset>
顯示效果如下所示：
以下是一個簡單的例子：
<form id="form1" action="/home/index" method="post">
<input type="hidden" value="隱藏信息" />
賬號: <input type="text" maxlength="8" /><br/>
密碼：<input type="password" /><br/>
姓名：<input type="text" name="Name" /><br/>
性別: <input type="radio" name="male" />男人
<input type="radio" name="male" />女人<br/>
是否單身: <input type="checkbox" name="single" /> <br/>
年齡：<select name="age">
<option value="0">0-30</option>
<option value="1">31-60</option>
<option value="2">60-100</option>
</select><br/>
喜歡的花:<select multiple="multiple" name="flower">
<option value="0">玫瑰花</option>
<option value="1">百合花</option>
<option value="2">仙人掌</option>
<option value="3">郁金香</option>
<option value="4">萬壽菊</option>
</select> <br/>
上傳照片：<input type="file" /> <br/>
<input type="image" src="brt_btn.png" /> <br/>
<input type="button" value="確認" /> <input type="submit" value="提交" /> <input type="reset" value="重置" /><br/>
</form>
顯示效果如下:
HTML表單應用