技術標籤：前端大開發htmlweb前端大前端

表單在網頁中主要負責資料採集功能，目的是使用者輸入與伺服器進行互動，也是html又一大板塊，所以本期單獨列舉表單之內容，幾乎是手把手式教學，希望本文能夠對你有所幫助。

首先一個表單需要一個form標籤

<form action="" method=""></form>

其中action的值是資料提交的伺服器地址,method的值是資料提交的方法，有兩個屬性:get:查詢伺服器的資料和post:修改伺服器的資料。一般採用post，因為更加安全，在提交表單時位址列不會顯示提交內容。

其次是表單型別

一般表單分為文字框，密碼框，提交框，單選框，複選框，上傳檔案，重置按鈕，圖片按鈕，下拉框，多行文字框和普通按鈕。

下面來細講

文字框：

<form >
	 文字框:<input type="text" placeholder="提示" name ="name" 	value="預設值">
</
 
form>

顯示內容：

這裡說明一下，placeholder值設定提示文字，value設定預設文字，如果加上disabled屬性則將value值設定為不可更改。

密碼框：

<form >
	 密碼框:<input type="password" placeholder="提示" >
</form>

顯示內容：

提交框:

<form >
	提交框：<input type="submit" value="點選提交">
</form>

顯示內容：

<form >
	單選：<input type="radio" name ="sex"  checked="checked">男
	<input type="radio" name ="sex" >女
</form>

顯示內容：

這裡說明一下，如果寫上checked屬性則表示預設選擇這個單選選項，name值必須設定一致才能使其二選一，否則會出現多選現象。
複選框：

<form >
愛好:
		<label>
		<input type="checkbox" name="favorite"  />
		唱歌</label>
		<label>
		<input type="checkbox" name="favorite"  />
		跳舞</label>
		<input type="checkbox" name="favorite"  />
		游泳
		<br/>
		<input type="checkbox" name="favorite"  />
		看書
		<input type="checkbox" checked="checked" name="favorite"  />
		玩手機
</form>

顯示內容：

這裡說明一下，如果在一個input標籤上巢狀label標籤，則會使得點選文字也能選中該框。

下拉框：

		<form>學歷
			<select size="1">
				<option selected>博士</option>
				<option>碩士</option>
				<option>本科</option>
				<option>大專</option>
			</select>
			<br>
			<br>
			學歷
			<select size="3" multiple="multiple">
				<option selected>博士</option>
				<option>碩士</option>
				<option>本科</option>
				<option>大專</option>
			</select>
		</form>

顯示內容：

這裡說明一下，selected表示預設值，option設定每一個下拉選項，multiple代表顯示滑動條，一般和size配套使用，size設定一次顯示的內容有幾個。

上傳檔案：

		<form>
			<input type="file" />
		</form>

顯示內容：

多行文字框：

		<form>
			多行文字框：
			<br>
			<textarea rows="10" cols="30" >
			</textarea>
		</form>

顯示內容：

圖片按鈕：

		<form>
			<input type="image" src="1.jpg">
		</form>

該圖片可直接點選。

重置按鈕：

		<form action="" method="post">
			<input type="reset" name="" id="" value="重置" />
		</form>

點選重置後所有表單資料清空，並設定為預設值。

普通按鈕：

		<form action="" method="post">
			<button type="button">同意</button>
		</form>

顯示內容：

以上涵蓋了幾乎所有表單涉及到的，幾乎是手把手的教學，希望對你入門html或者複習html有幫助。謝謝觀看！