1、表單
表單1
表單2
上圖都是表單，官方點說
表單就是用戶可以在其中提供一定的數據或信息或選項的一些html元素。表單通常有一個“提交”按鈕，然后可以將這些數據據/信息/選項提供給服務器上的程序使用——數據處理。
表單的核心是數據
表單標簽的構成和形式：
<form name="form1" action="將表單中數據提交給的對象（PHP文件名) method="post">"
第一個表單項
第二個表單項
……
</form>
基礎表單
表單種類及屬性
①單行文本框
<input type="text" name="n1"/>
| 屬性 | 作用 |
|---|---|
| value | 設置其中初始文字 |
| size | 設置輸入框的寬度 |
| maxlength | 設置輸入框最多輸入字符個數 |
| readonly | 只讀（無值） |
| disable | 設置輸入框無效，即數據無效 |
②密碼框
<input type="password" name="n2" />
| 屬性 | 作用 |
|---|---|
| value | 設置其中初始文字 |
| size | 設置輸入框的寬度 |
| maxlength | 設置輸入框最多輸入字符個數 |
③單選項
<input type="radio" name="n3" value="某個值" />
說明：單選項通常必有value值
| 屬性 | 作用 |
|---|---|
| checked | 表示該選項默認是選中的狀態(tài)。（無值屬性） |
| name | 一組的單選項name值必須相同 |
除了上面的屬性以外還有：
| 屬性 | 作用 |
|---|---|
| checked | 表示該選項默認是選中的狀態(tài)。（無值屬性） |
| name | 一組的單選項name值必須相同 |
④多選項
<input type="checkbox" name="n4" value="某值">
說明：單選項通常必有value值
屬性和單選項相同
⑤提交按鈕
<input type="submit" name="n5" value="提交文字" action="提交表單數據的文件" />
⑥圖片按鈕
<input type="image" name="n6" src="圖片地址" />
⑦重置按鈕
<input type="reset" name="n7" value="重置" />
會將表單的所有用戶填寫或選擇數據恢復到初始狀態(tài)
⑧普通按鈕
<input type="button" name="n8" value="文字" />
對表單沒有影響，但可以從中產生“動作”以實現其他要求
⑨文件域
<input type="file" name="n9" />
可以讓客戶選擇本地文件，發(fā)送到服務器
⑩隱藏域
<input type="hidden" name="n10" />
說明：界面上不可見，但是作為一份“隱藏的數據”提交給服務器——編程所需。
其他類型表單
a)下拉選擇：用select和option標簽配合實現
<select name="n11" multiple="multiple">
<option value=”1” >文字1</option>
<option value=”2” selected=”selected” >文字2</option>
<option value=”3” >文字3</option>
……
</select>
說明：option標簽上可以使用selected屬性，表明該select元素的默認選中的項（默認是第一項被選中）。
select標簽上可以使用multiple屬性，使該select元素可以“選擇多項”（即默認只能選一個）
文字不過癮，圖片來說明：
下拉選擇
b)多行選擇（列表選項）：
<select name=”n12” size=”4”>
<option value=”1” >文字1</option>
<option value=”2” >文字2</option>
<option value=”3” >文字3</option>
……
</select>
來！上圖！
多行選擇
c)多行文本框
<textarea name=”n13” rows=”行數” cols=”列數”>內容</textarea>
說明：rows設定的行數是數字，表示該多行文本框可以顯示的文字行數。
cols設定的列數是數字，表示該多行文本框可以顯示的一行文字中個數。
此標簽沒有value屬性。但其實際的“值”是放在此標簽中間的所有內容。
多行文本框
表單項都必須有name屬性，以表明其“名字”——服務器取其中的數據就是憑此名字。
表單的全面應用：（放大招了嗷?。?/p>
<body>
<h3>用戶注冊</h3>
<form action="abc.php" method="post">
<table width="500" border="1" >
<tr>
<td width="100" align="right">真實姓名：</td>
<td><input type="text" name="userName" value="請輸入你的真實姓名" /></td>
</tr>
<tr>
<td width="100" align="right">密碼：</td>
<td><input type="password" name="userPswd" /></td>
</tr>
<tr>
<td width="100" align="right">性別：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="打死不說" />打死也不說
</td>
</tr>
<tr>
<td width="100" align="right">愛好：</td>
<td>
<label><input type="checkbox" name="aihao" value="1" />籃球</label>
<label><input type="checkbox" name="aihao" value="2" />排球</label>
<input type="checkbox" name="aihao" value="3" />足球
<input type="checkbox" name="aihao" value="4" />中國足球
</td>
</tr>
<tr>
<td width="100" align="right">身份：</td>
<td>
<select name="shenfen" size="4">
<option value="1" >已工作</option>
<option value="2" >大學</option>
<option value="3" >中學</option>
<option value="4" >什么叫身份</option>
</select>
</td>
</tr>
<tr>
<td width="100" align="right">居住地：</td>
<td>
<select name="sheng" size="1">
<option value="1" >北京</option>
<option value="2" selected="selected">上海</option>
<option value="3" >山東</option>
<option value="4" >河北</option>
</select>
<br />
<select name="city" >
<option value="" >請選擇城市</option>
<option value="1" >北京</option>
<option value="2" >上海</option>
<option value="3" >濟南</option>
<option value="4" >青島</option>
<option value="5" >石家莊</option>
<option value="6" >邯鄲</option>
</select>
</td>
</tr>
<tr>
<td width="100" align="right">你的簡歷：</td>
<td>
<textarea name="jianli" rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td width="100" align="right">你的照片：</td>
<td><input type="file" name="zhaopian" /></td>
</tr>
<tr>
<td width="100" align="right"></td>
<td>
<input type="submit" name="submit1" value="免費注冊" />
<input type="reset" name="reset1" value="重置" />
<input type="button" name="button1" value="普通按鈕" />
</td>
</tr>
<tr>
<td width="100" align="right"></td>
<td>
<label><input type="checkbox" name="tongyi" value="1" />同意注冊協(xié)議</label>
</td>
</tr>
</table>
</form>
</body>
實現效果：
實現效果
如果你看到這里！你都懂了！那么~你的表單和表格棒棒噠！
