圖片.jpg

表單

提供給用戶輸入某種信息的格式，并且可以提交到后臺(tái)處理這些（個(gè)）數(shù)據(jù)

表單的形式

<form action="提交到哪個(gè)地址" method="提交方式（get、post）" >
.
input表單
...
<input type="submit" value="提交"/>
.
</form>

提供給用戶的輸入標(biāo)簽一定要放在form標(biāo)簽中
注：如果需要發(fā)送一些數(shù)據(jù)到后端 但是不想讓用戶看見(jiàn) 那么 設(shè)置type="hidden" 隱藏 并且設(shè)置 name="xx" value="yy" 數(shù)據(jù)提交

input表單(type類型的設(shè)置)

如我們常見(jiàn)的用戶登錄中的用戶名和密碼這兩個(gè)輸入框就稱作表單
但是還有其他用于提供給用戶輸入信息的格式也稱作表單

表單數(shù)據(jù)傳到后臺(tái)是需要對(duì)傳到后臺(tái)的數(shù)據(jù)進(jìn)行特定的指定，就像每個(gè)人都有個(gè)自己的名字，才能區(qū)分每個(gè)人，同理，傳到后臺(tái)的數(shù)據(jù)也需要對(duì)其進(jìn)行取名字，這個(gè)是前端的事情，所以，注：每個(gè)表單需要一個(gè)name值

第一種：不手動(dòng)設(shè)置value值

用戶輸入的值就會(huì)被計(jì)算機(jī)認(rèn)為是傳到后臺(tái)的value值

1.text

文本文字的輸入框，沒(méi)有換行

<label for="usrename">用戶名：</label>
<input type="text" name="text1" id="username"/>

圖片.png

注：
（1）label: for對(duì)應(yīng)id的值 是當(dāng)鼠標(biāo)點(diǎn)擊用戶名這幾個(gè)文字是，可以定位到輸入框，聚焦到文本輸入框，如果沒(méi)有l(wèi)abel 沒(méi)有for對(duì)應(yīng)id的值，是不會(huì)有這種效果的

（2）

圖片.png

2.password 密碼輸入框

type="password"

3.關(guān)于日期和時(shí)間

1)date 非手動(dòng)填寫(xiě)日期（年月日）

<input type="date" name="date" />

效果：

圖片.png

2).datetime 手動(dòng)填寫(xiě)日期和時(shí)間（UTC時(shí)間）

type="datetime"

<input type="datetime" name="time"/>

圖片.png

3)datetime-local 手動(dòng)填寫(xiě)日期和時(shí)間（無(wú)時(shí)區(qū)）

<input type="datetime-local" name="time"/>

圖片.png

4) time 非手動(dòng)填寫(xiě)時(shí)間（時(shí)分）

<input type="time" name="time"/>

圖片.png

5)week非手動(dòng)輸入年和周

<input type="week" name="week-year"/>

圖片.png

6)month 非手動(dòng)輸入年和月

<input type="month" name="month"/>

圖片.png

4.email手動(dòng)輸入郵箱

類似一般的輸入框

圖片.png

5.number 非手動(dòng)輸入數(shù)字

規(guī)定數(shù)字輸入范圍（有輸入范圍的控制）：

<input type="number" name="quantity" min="0" max="5"/>

圖片.png

不規(guī)定范圍（沒(méi)有輸入范圍的控制）：

<input type="number" name="quantity"/><br />

圖片.png

6.range范圍

有范圍控制（可以有沒(méi)有范圍控制的設(shè)置，同數(shù)字表單）：

0<input type="range" name="points" min="0" max="10" />10

效果：

圖片.png

7.search搜索字段（類似于站點(diǎn)搜索或google搜索）

<input type="search" name="search" />

圖片.png

8.tel電話號(hào)碼字段

<input type="tel" name="usertel" />

圖片.png

9.url網(wǎng)址輸入

<input type="url" name="mypage" />

圖片.png

第二種：手動(dòng)設(shè)置value值

手動(dòng)為每個(gè)選項(xiàng)設(shè)置它的value值，這樣在http傳輸?shù)臅r(shí)候，才會(huì)有值的傳輸?shù)胶笈_(tái)

1. checkbox 復(fù)選框

注意：復(fù)選框的每個(gè)選擇項(xiàng)需要設(shè)置不同的名字name

愛(ài)好:
<input type="checkbox" name="hobby1" value="dota"/>dota
<input type="checkbox" name="hobby2" value="travel" />旅游
<input type="checkbox" name="hobby3" value="animal" />寵物

效果：

圖片.png

2.radio 單選框

注意:單選框的每個(gè)選項(xiàng)需要設(shè)置相同的名字name,如果需要分為幾組，就設(shè)置幾組名字

性別:
<input type="radio" name="sex" value="famle" />男
<input type="radio" name="sex" value="male" />女
效果圖：

圖片.png

3. select-option下拉列表

我的car:<select name="select1">
<option value="L">大車</option>
<option value="M">中車</option>
<option value="s">小車</option>
</select>

圖片.png

第三種：其他

1.color 顏色

選擇顏色

選擇您喜歡的顏色：
<input type="color" name="color" />

圖片.png