表單標籤

為什麼需要表單

最大的特點就是註冊資訊，為了收集資訊。

表單的組成

在html中完整的表單通常需要3個部分組成，表單域、表單控制元件(也稱作為表單元素)和提示資訊

表單域

<form></form>標籤是用於定義表單域。
form會把範圍內的表單元素資訊提交給伺服器。

<form action="url地址" method="提交方式" name="表單域名稱">
    各種表單元素控制元件
</form>

表單空間（表單元素）

不同的表單元素

• input輸入表單元素
• select下拉表單元素
• textarea文字域元素

input標籤

標籤中，包含一個type屬性，根據不同的type屬性值，輸入欄位有很多種形式（可以是文字欄位、複選框、掩碼後的文字空間、單選按鈕、按鈕等）。

input是單標籤

<input type="屬性值" />

type屬性設定不同的屬性值用來指定不同的控制元件型別

input表單元素屬性和屬性值

name和value是每個元素都有的屬性值，主要給後臺人員使用的。

name表單元素和名字，要求單選按鈕和複選框要有相同的name值。

checked屬性主要針對於單選按鈕和複選框，主要作用一開啟頁面，就要可以預設選中某個表單元素。

maxlength是使用者可以在表單元素輸入的最大字元數，一般較少使用。

label標籤

label標籤用於繫結一個表單元素，當點選標籤內的文字時，瀏覽器會自動的吸附到對應的表單元素上，來增加使用者體驗。

語法

<label for="sex">男</label><input type="radio" name="sex" id="sex"/>

標籤的for屬性應當與相關元素的id屬性相同

練習

<form action="demo.php" method="post" name="name1">
			<!--text文字框	使用者可以在裡面輸入任何文字
				maxlength 正整數 可以規定欄位中的字元最大長度
			-->			
				使用者名稱：<input type="text" name="username" value="請輸入使用者名稱" maxlength="6">	
			<br>
			<!--password密碼	框	使用者看不見輸入的密碼-->
			密碼:<input type="password"	name="password"  value="請輸入密碼"/>
			<br>
			<!--radio單選按鈕		可以實現多選
				name是表單元素名字 這裡性別單選按鈕必須有相同的name才可以實現多選1
				單選按鈕和複選框可以設定checked屬性 當頁面開啟的時候就可以預設選中這個按鈕
				但是單選的只能寫一個，複選框可以多寫幾個checked屬性
				label是需要挨著你要選擇的input標籤的，在把文字包含進去-->
			性別:<label for="sex">男</label><input type="radio"  name="sex" value="男" checked="checked" id="sex"/>  
				  女 <input type="radio" name="sex" value="女"/>
			<br>
			<!--checkbox複選框		可以實現多選
				單選按鈕和多選按鈕name都要設定成一樣，單選和多選才能實現。-->
			愛好：	籃球<input type="checkbox"  name="hobby" value="籃球" checked="checked"/> 
					足球<input type="checkbox" 	name="hobby" value="足球" checked="checked"/>
					橄欖球<input type="checkbox" name="hobby"value="橄欖球"/>
			<br>
			<!--點選提交按鈕，可以把表單域form裡面的表單元素的值提交給後臺伺服器-->
			<input type="submit" value="免費註冊"/>
			<br>
			<!--重置按鈕可以還原表單元素的初始形態-->
			<input type="reset"  value="重新填寫"/>
			<br>
			<!--button是單純的一個按鈕，可以通過value來設定文字，後期需要配合js來使用-->
			<input type="button" value="傳送驗證碼" />
			<br>
			<!--檔案域 使用場景 上傳檔案使用-->
			上傳頭像:<input type="file" />
		</form>
 

select標籤

select下拉表單元素

語法

	<form>
		<select>
			<option>上海</option>
			<option>長春</option>
			<option selected="selected">瀋陽</option>
		</select>
    </form>

中至少包含一對 在中定義selected="selected"時，當前項即為預設選中項。 textarea文字域元素 文字域時候內容比較多的時候就要用文字域，可以多行輸入內容。一般自我介紹、留言板、反饋等之類。 語法 <form> 籍貫: <select> <option>上海</option> <option>長春</option> <option selected="selected">瀋陽</option> </select> <br /> 自我介紹: <textarea cols="30" rows="5">請輸入自我介紹的內容 </textarea> </form>