表單標籤
* 可以提交數據到開心網的服務器,這個過程可以使用表單標籤實現
* <form></form>:定義一個表單的範圍
- 屬性
** action:提交到地址,默認提交到當前的頁面
** method:表單提交方式
- 常用的有兩種 get 和 post,默認是get請求
** 面試題目:get 和 post區別
1.get請求地址欄會攜帶提交的數據,post不會攜帶(請求體裏面。在第七天時候講http協議時候);
2.get請求安全級別較低,post較高;
3.get請求數據大小的限制,post沒有限制。
** enctype:一盤請求下不需要這個屬性,做文件上傳時候需要
** 輸入項:可以輸入內容或者選擇內容的部分
- 大部分的輸入項 使用 <input type = "輸入項的類型"/>
***** 在輸入項裏面需要一個name屬性。
*** 普通輸入項:<input type = "text"/>
*** 密碼輸入項:<input type = "password"/>
*** 單選輸入項:<input type = "radio"/>
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中屬性
-- checked = "checked"
*** 複選輸入項:<input type = "checkbox">
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中屬性
-- checked = "checked"
*** 文件輸入項(在後面上傳時候用到)
- <input type = "file"/>
*** 下拉輸入項(不是在input標籤裏面的)
<select>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select>
- 默認選擇
*** selected = "selected"
*** 文本域
<textarea cols = "10" rows = "10"></textarea>
*** 隱藏項(不會顯示在頁面上,但是存在於html代碼裏面)
<input type = "hidden"/>
*** 提交按鈕
<input type = "submit"/>
<input type = "submit"/ value = "註冊">
file:///E:/JavaScript+html+Css_Practise/day01/code/10-表單標籤1.html
?sex=on&love=on&birth=1992&tex=312&hid=
file:///E:/JavaScript+html+Css_Practise/day01/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE1.html
?phone=123344&pwd=1234&sex=nan&love=y&love=p&love=l&birth=&tex=123456&hid=
** ?輸入項name的值 = 輸入的值&
** 參數類似於key-value形式
*** 使用圖片提交
<input type = "image" src = "圖片路徑"/>
*** 重置按鈕
<input type = "reset "/>
*** 普通按鈕(和明天講JS在一起使用)
<input type = "button" value = ""/>
小項目實例1:
<!doctype html>
<html lang="en">
<head>
<title>表單標籤1</title>
</head>
<body>
<form action = "hello.html" method = "get">
手機號碼:<input type = "text" name = "phone"/><br/>
設置密碼:<input type = "password" name = "pwd"/><br/>
性別:<input type = "radio" name = "sex" value = "nv" checked = "checked"/>女生
<input type = "radio" name = "sex" value = "nan"/>男生<br/>
愛好:<input type = "checkbox" name = "love" value = "y"/>羽毛球
<input type = "checkbox" name = "love" value = "p" checked = "checked"/>乒乓球
<input type = "checkbox" name = "love" value = "l"/>籃球<br/>
文件:<input type = "file"/><br/>
生日:<select name = "birth">
<option value = "">請選擇</option>
<option value = "1991" selected = "selected">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select><br/>
自我描述:<textarea cols = "10" rows = "10" name = "tex"></textarea><br/>
隱藏項:<input type = "hidden" name = "hid"/><br/>
<input type = "submit" value = "註冊"/>
<input type = "reset" value = "重置註冊"/>
<input type = "button" value = "普通按鈕"/>
<br/>
</form>
</body>
</html>
測試結果:
小項目實例2:
<!doctype html>
<html lang="en">
<title>案例</title>
</head>
<body>
<h1>免費開通人人網賬號</h1>
<form action = "hello.html"><!--action:提交到地址,默認提交到當前的頁面 與method:表單提交方式-->
<table width = "100%">
<tr>
<td align = "right">註冊郵箱</td>
<td><input type = "text" name = "mail"></td>
</tr>
<tr>
<td> </td>
<td>你可以使用<a href = "#">賬號</a>註冊或者<a href = "#">手機號</a>註冊</td>
</tr>
<tr>
<td align = "right">創建密碼:</td>
<td><input type = "password" name = "pwd"></td>
</tr>
<tr>
<td align = "right">真實姓名:</td>
<td><input type = "text" name = "realname"></td>
</tr>
<tr>
<td align = "right">性別:</td>
<td><input type="radio" name = "sex" value = "nv">女生<input type="radio" name = "sex" value = "nan">男生</td>
</tr>
<tr>
<td align = "right">生日:</td>
<td>
<select name = "year">
<option value = "0001">1991</option>
<option value = "0002">2002</option>
<option value = "0003">2003</option>
<option value = "0004">2004</option>
</select>年
<select name = "month">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
</select>月
<select name = "day">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
</select>日
</td>
</tr>
<tr>
<td align = "right">我現在:</td>
<td>
<select name = "now">
<option value = "study">上學</option>
<option value = "work">工作</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<img src = "01.PNG" width = "80" height = "40">
<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 = "02.PNG" width = "120" height = "40"/></td>
</tr>
</table>
</form>
</body>
</html>
運行結果展示;