html中常用的標籤-表單標籤

ZHOU_VIP發表於2017-06-18
HTML

表單標籤（****今天最重要的標籤****）
	* 可以提交資料到開心網的伺服器，這個過程可以使用表單標籤實現

	* <form></form>: 定義一個表單的範圍
		- 屬性
			** action： 提交到地址，如果不寫預設提交到當前的頁面
			** method:  表單提交方式 
				- 常用的有兩種  get和post，預設是get請求

			** 面試題目： get和post區別
				1、get請求位址列會攜帶提交的資料，post不會攜帶（請求體裡面。在第七天時候講http協議時候）
				2、get請求安全級別較低，post較高
				3、get請求資料大小的限制，post沒有限制
			
			** enctype：一般請求下不需要這個屬性，做檔案上傳時候需要設定這個屬性（第22天時候講檔案上傳）
    -----------------------------------------------------------------------------
	** 輸入項：可以輸入內容或者選擇內容的部分
		- 大部分的輸入項 使用  <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 name="birth">
				<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:///C:/Users/asus/Desktop/0413/day01/code/10-表單標籤一.html
			 ?sex=on&love=on&love=on&birth=1991
			
			當在輸入項裡面寫了name屬性之後 
			- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標籤一.html
			?phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=

			寫了value屬性之後
			- file:///C:/Users/asus/Desktop/0413/day01/code/10-表單標籤一.html?
			phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love&hid=

			** ?輸入項name的值=輸入的值&
			** 引數類似於key-value形式

		*** 使用圖片提交,點選圖片,提交表單（實際開發也不會這麼用）
			<input type="image" src="圖片路徑"/>
		
		*** 重置按鈕： 回到輸入項的初始狀態
			<input type="reset"/>
		
		*** 普通按鈕(和明天講js在一起使用的)
			<input type="button" value=""/>



<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<form action="01-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="pp" /> 排球<br/> 
			檔案：<input type="file" /><br/> 
			生日：<select name="birth">
				<option value="0">請選擇</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/>
			<!--  <input type="image" src="a.jpg"/>-->
		</form>
	</body>

</html>

補充知識：

<input>標籤的name屬性：

name 屬性規定 input 元素的名稱。

name 屬性用於對提交到伺服器後的表單資料進行標識，或者在客戶端通過 JavaScript 引用表單資料。

註釋：只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

--------------------------------------------------------------------------------------------------------------------------------------

<input>標籤的value屬性：

value 屬性為 input 元素設定值。

對於不同的輸入型別，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文字

type="text", "password", "hidden" - 定義輸入欄位的初始值

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

註釋：<input type="checkbox"> 和 <input type="radio"> 中必須設定 value 屬性。

註釋：value 屬性無法與 <input type="file"> 一同使用。


相關文章