JavaScript+html+Css中的常用《表單標籤》+簡單的項目實例

表單標籤
	* 可以提交數據到開心網的服務器,這個過程可以使用表單標籤實現

	* <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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
			<td><input type = "image" src = "02.PNG" width = "120" height = "40"/></td>
		</tr>
</table>

</form>
 </body>
</html>

運行結果展示;
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章