第一章 表單基本結(jié)構(gòu)
主要內(nèi)容
- 表單應(yīng)用場景
主要作用：收集信息
image.png
- 表單結(jié)構(gòu)
image.png
- 常用表單元素使用
image.png
image.png
image.png
注：input為單標(biāo)簽，沒有結(jié)束標(biāo)簽
注意：
所有元素都應(yīng)寫在form標(biāo)簽內(nèi)；
form標(biāo)簽本身不在網(wǎng)頁中顯示。
- 表單交互屬性
- 案例
第二章 表單元素
image.png
image.png
image.png
相同name值的情況下只能有一個選項
eg..
image.png
在input里＋checked，表示默認(rèn)選中
eg..
image.png
如上圖表示默認(rèn)選中“保密”
image.png
image.png
注：運(yùn)用value可以修改按鈕名字??！
image.png
image.png
注：該功能用于針對用戶隱藏信息
下拉菜單和列表標(biāo)簽
- 優(yōu)點(diǎn)：節(jié)約空間且美觀
image.png
image.png
注：value里面的東西才是傳給服務(wù)器的，北京天津等是顯示在網(wǎng)頁上的
image.png
注：＋multiple表示可以按住Ctrl鍵進(jìn)行多項選擇；
＋size表示一次可顯示出多個選項。eg size=“4”表示一次顯示4個選項。
image.png
注：selected的效果相當(dāng)于上文提到的checked，都表示默認(rèn)選擇
分組下拉菜單和列表標(biāo)簽
image.png
image.png
注意與單行文本域進(jìn)行區(qū)分！?。?/p>
image.png
第三章 表單頁面調(diào)整
image.png
image.png
注意：
image.png
第四章 總結(jié)
略
以下是鐘琳天才的杰作
<!DOCTYPE html>
<html>
<head>
<title> 表單 </title>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="post" name="bet" target="blank">
<table bgcolor="#f2f2f2" align="center">
<tr>
<td> 姓名 </td>
<td> <input type="text" name="username" placeholder="輸入您的姓名..."/> </td>
</tr>
<tr>
<td> 下拉 </td>
<td>
<select name="city" size="1">
<option value="qxz"> 請選擇 </option>
<option value="nj"> 南京 </option>
<option value="xa"> 西安 </option>
<option value="xm"> 廈門 </option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td> 性別 </td>
<td>
<input type="radio" name="sex" value="man" checked />男生
<input type="radio" name="sex" value="woman"/>女生
</td>
</tr>
<tr>
<td> 多選 </td>
<td>
<input type="checkbox" name="dx1" value="eat" />吃東西
<input type="checkbox" name="dx2" value="sleep" />睡大覺
<input type="checkbox" name="dx3" value="run" />跑跑步
<input type="checkbox" name="dx4" value="watch movie" />看電影
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td> 文本 </td>
<td>
<textarea name="wb" rows="3" cols="50" placeholder="請輸入文本內(nèi)容...">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
