表單標籤簡介:
功能:提交數據到某服務器
<form></form>:定義一個表單範圍
屬性:action:提交到地址,默認提交到當前頁面
method:表單提交方式:get(默認)和post
get和post的區別:(1)get請求地址欄會攜帶提交的數據,post不攜帶提交的數據
(2)get請求安全性低,post較高
(3)get請求數據大小有限制,post沒有限制
輸入項:
功能:可以輸入內容或者選擇內容的部分
大部分的輸入項使用<input type="輸入項"/>,在每個輸入項裏面需要一個name屬性
a.普通輸入項:<input type="text"/>
b.密碼輸入項:<input type="password"/>
c.單選輸入項:<input type="radio"/>
--需要屬性name
--name屬性值必須相同
--必須有一個value值
*實現默認選中項:設置屬性checked=“checked”
d.複選輸入項:<input type="checkbox"/>
--需要屬性name
--name屬性值必須相同
--必須有一個value值
*實現默認選中項:設置屬性checked=“checked”
e.文件輸入項:<input type="file"/>f.下拉輸入項:(不是在input標籤中實現)
<select name=" ">
<option value = " ">選項一</option>
<option value = " ">選項二</option>
</select>
g.文本域:<textarea cols = "10" rows = "10">文本內容</textarea>
h.隱藏項:(不會出項在頁面上,但是存在於html代碼中)
<input type = "hidden"/>
i.提交按鈕:
<input type = "submit" value = “顯示內容“ />
j.使用圖片提交:
<input type = "image" src= “圖片路徑“ />
k.重置按鈕:
<input type = "reset" value = “ 重置註冊“ />
---重置是回到輸入項的初始狀態
l.普通按鈕:
<input type = "button" value = “ “ />
-----和js一起使用
所有的標籤字符都是在英文字符的情況下輸入
舉一個栗子
運行結果:
源碼:
<html>
<head>
<title> 表單實例 </title>
</head>
<body>
<font size="5"color="#000000" ><b>免費開通人人網賬號</b></font>
<form>
<table borber="1" bordercolor="#000000">
<tr>
<td>註冊郵箱:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td> </td> <!--單元格佔位符是什麼???-->
<td>你還可以使用賬號<a href="#">註冊</a>或者<a href="#">手機號註冊</a></td>
</tr>
<tr>
<td align="right">創建密碼: </td>
<td><input type="password"></td>
</tr>
<tr>
<td align="right"> 真實姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">性別:</td>
<td> <input type="radio" name="sex" value="nv"/checked=“checked”>女<input type="radio" name="sex" value="nan"/>男</td>
</tr>
<tr>
<td align="right"> 生日:</td>
<td>
<select name="year">
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<select name="month">
<option value="1"selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select>
<option value="1"selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td align="right">我現在:</td>
<td>
<select name="work">
<option value="study"selected="selected">我正在上學</option>
<option value="work">我已經工作</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><img src="表單標籤.html/picture.gif"/></td>
<td> <a href="#">看不清換一張</a></td>
</tr>
<tr>
<td align="right">驗證碼:</td>
<td><input type="text" name="yanzhengma"></td>
</tr>
<tr>
<td></td>
<td><input type="image" src="Hydrangeas.jpeg"/></td>
</tr>
</table>
</form>
</body>
</html>