HTML第三章
第三章 表單
1.什麽是表單：
表單就是一個將用戶信息組織起來的容器。將用戶需要填寫的內容放置在表單容器中，當用戶單擊“提交”按鈕的時候，表單會將數據統一發送給服務器。
2.表單標簽及表單屬性：
|
規定如何發送表單數據常用值post或get用表單數據 如何發送表單數據 規定如何發送表單數據
|
|
表示向何處發送表單數據 |
<form method=”post” action=”result.html”>
<p>名字：<input name=”mingzi”type=”text”></p>
<p>密碼：<input name=”mima”type=”password”></p>
<p按鈕：<input type=”submit”name=”Button”value=”提交”></p>
<p>按鈕：<input type=”reset”name=”Reset” value=”重填”></p>
|
input元素類型 |
|
input元素的值
|
|
input元素名稱
|
<input type=”submit”name=”Button”value=”提交”>
|
屬性 |
說明 |
|
type |
指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認為 text |
|
name |
指定表單元素的名稱。 |
|
value |
元素的初始值。type 為 radio時必須指定一個值 |
|
size |
指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字符為單位。對於其他類型，寬度以像素為單位 |
|
maxlength |
type為text 或 password 時，輸入的最大字符數 |
|
checked |
type為radio或checkbox時，指定按鈕是否是被選中 |
|
默認值 |
|
文本框的長度 |
|
輸入的數據長度 |
列：
<p>登錄名：
<Input name=”sname” type=”text” value=”張” size=”30” maxlength=”20” >
</p>
3.單選按鈕：
<form method=”post” action=””>
性別： <input name=”gen” type=”radio” class=”input”value=”男”>男
<input name=”gen” type=”radio” class=”input”value=”女”>女
</form>
4.復選框：
<form method=”post” action=””>
愛好：
<input type=”checkbox”name=”interest” value=”sports”>運動
<input type=”checkbox”name=”interest” value=”talk”>聊天
<input type=”checkbox”name=”interest” value=”play”>玩遊戲
</form>
5.列表框：
<form method=”post” action=””>
<select name=”yue”>
<option value=”” >選擇月份</option>
<option value=”1” >一月</option>
<option value=”2” >二月</option>
<option value=”3” >三月</option>
<option value=”4” >四月</option>
<option value=”5” >五月</option>
</select>月
|
單選按鈕/復選框 |
選項默認 |
|
單選按鈕 |
checked=” checked” |
|
復選框 |
selected=” selected” |
6.按鈕：
1.button 普通按鈕
2.submit 提交按鈕
3.reset 重置按鈕
<input type=”reset”name=”chongzhi”value=”重置”>
7.多行文本域：
<textarea name=”textarea” cols=”顯示的列的寬度” rows=”顯示的行數”></textarea>
8.文件域：
<input type=”file” name=“wenjian”/>
9.表單的高級應用：
設置表單的隱藏域：
<form action=”” method=”get”>
<p>用戶名：<input name=”minzi” type=”text”></p>
<p>密碼 ： <input name=”mima” type=”password”></p>
<p><input type=”submit”value=”提交”></p>
|
將type屬性改為hidden隱藏類型即可創建一個隱藏域 |
<p><input type=”hidden” value=”666” name=”userid”></p>
<from>
10.表單只讀與禁用設置：
|
只讀 |
readonly=”readonly” |
|
禁用 |
disabled=”disabled” |
11.語義化的表單：
域：在表單中可以使用<fieldset>標簽實現域的定義。簡單的來說就是將一組表單元素放到<fieldset>標簽內時，瀏覽器就會以特殊方式來顯示它們，這些表單元素可能有特殊的邊界效果。
域標題：所謂的域標題就是給創建的域設置一個標題。設置域標題需要使用一個新的標簽，<legend>標簽，在該標簽內的內容就被視為域的標題。
<from>
<fieldset>
<legend>用戶信息</legend>
姓名：<input type=”text”>
年齡：<input type=”text”></br>
手機：<input type=”text”>
郵箱：<input type=”text”></br>
</fieldset>
</form>
12.表單元素的標註
對表單元素進行標註，這樣做的目的是為了增強鼠標的可用性。用表單元素標註時，在客戶端呈現的效果不會有任何的改進。但是如果當用戶使用鼠標單擊標註文本內時，瀏覽器會自動將焦點轉移到與該標註相關的表單元素上。
<form>
請選擇性別：
<input name="xingbie" type="radio" id="n" value="男" checked="checked" />
<label for="n"/>男
<input name="xingbie" type="radio" id="l" value="女" />
<label for="l" />女
HTML第三章