表單的作用

收集用戶提供的信息，提交給服務(wù)器

常見表單元素

<form> <input> <label> <button> <option> <select> <textarea> 等

構(gòu)成一個(gè)表單的基本結(jié)構(gòu)

<form action="">
  <input type="text">
  <input type="submit" value="">
</form>

<input>元素包含其他可用于創(chuàng)建表單元素，必須被 <form></form>包裹,放置在<form></form>外的表單元素輸入的信息是無(wú)法被收集，從而不能提交給服務(wù)器

通過(guò)一個(gè)例子來(lái)展示HTML表單，剖析表單元素常見屬性及值的正確使用

form表單

<form>元素

<form>：表示了文檔中的一個(gè)區(qū)域，這個(gè)區(qū)域包含有交互控制元件(由其他表達(dá)元素構(gòu)成 )，用來(lái)向web服務(wù)器提交信息。

常用屬性：

action：當(dāng)前數(shù)據(jù)提供給后端服務(wù)器的地址或是后端接口
method： post get
post：HTTP post方法；表單數(shù)據(jù)會(huì)包含在表單體內(nèi)然后發(fā)送給服務(wù)器.
get：HTTP get方法；表單數(shù)據(jù)會(huì)附加在 action 屬性的URI中，并以 '?'作為分隔符, 然后這樣得到的 URI 再發(fā)送給服務(wù)器.
(get與post提交數(shù)據(jù)的區(qū)別請(qǐng)看文末,實(shí)際情況下都是設(shè)置post)

<input>元素

常用屬性

input.type ：text password radio checkbox submit button
①. type="text" 輸入單行字段

Snip20181221_3.png

 <label for="username">姓名 ：</label>
 <input type="text" name="username" placeholder="請(qǐng)輸入用戶名">

②. type="password" 輸入值被遮蓋的單行文本字段,多用于密碼

Snip20181221_4.png

<label for="password" >密碼 ：</label>
<input type="password" name="password">

③. type="radio" 單選按鈕
同一組單選框按鈕的name屬性的值相同；且必須使用 value 屬性定義此控件被提交時(shí)的值

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

Snip20181221_5.png

④. type="checkbox" 復(fù)選框
同一組復(fù)選按鈕的name屬性的值可以相同也可以不相同；但是必須使用 value 屬性定義此控件被提交時(shí)的值

<input type="checkbox" name="hobby" value="game">游戲
<input type="checkbox" name="hobby" value="journey">旅游
<input type="checkbox" name="hobby" value="sport">運(yùn)動(dòng)

Snip20181221_6.png

⑤. type="submit" 提交表單的按鈕
⑥. type="button" 按鈕

type=submit 和<button>(button的類別type="button"也只是一個(gè)純粹的按鈕)可以提交數(shù)據(jù)，無(wú)論是<input>或是<button>其類型值為type=button不能提交數(shù)據(jù)(type=button只是提供一個(gè)純粹的按鈕)

Snip20181221_16.png

⑦. type="hidden" 不會(huì)顯示在頁(yè)面上，但它的值會(huì)被提交到服務(wù)器(點(diǎn)擊提交在Network可以看到數(shù)據(jù)type="hidden"所隱藏的數(shù)據(jù))。

<input type="hidden" name="csrf" value="345623fdsd">
<!-- 點(diǎn)擊提交在Network可以看到name："csrf" value："345623fdsd"-->

Snip20181223_1.png

主要用途是:

• 暫存信息，為服務(wù)器提供使用表單存儲(chǔ)狀態(tài)信息的方法。
  將在提交表單時(shí)使用相應(yīng)屬性定義的名稱/值對(duì)傳遞回服務(wù)器
  跟蹤提交編輯表單時(shí)需要更新的數(shù)據(jù)庫(kù)記錄。
• 用于存儲(chǔ)和提交安全秘鑰對(duì)。提高網(wǎng)站的安全性，解決CSRF的一種現(xiàn)實(shí)方式

⑧. type="file"讓用戶選擇文件上傳。使用 accept 屬性可以定義控件可以選擇的文件類型。
( <input type="file" accept="image/jpeg">,會(huì)彈出一個(gè)文件選擇窗口，accept的值指定文件的類型和格式，只有符合指定格式的文件才能選取。當(dāng)然實(shí)際情況下不可能只指定一種格式的圖片，多個(gè)格式可以使用逗號(hào),連接accept="image/png, image/jpeg, image/gif, image/jpg"，或者使用accept="image/*"方法只要是圖片類型的都符合要求，但是無(wú)疑會(huì)增加瀏覽器的負(fù)擔(dān)，不推薦使用)

Snip20181224_3.png

Snip20181224_6.png

常用屬性input.placeholder

提示用戶輸入框的應(yīng)該輸入的內(nèi)容。
<input id="username" type="text" name="username" placeholder="請(qǐng)輸入用戶名">

Snip20181224_9.png

常用屬性input.disable

布爾屬性表示此表單控件不可用，禁用的控件的值在提交表單時(shí)也不會(huì)被提交，被禁用。（type 屬性為 hidden，此屬性將被忽略）
(不需要給disabled設(shè)置值)

常用屬性input.checked

type屬性的值為radio或者checkbox,則該布爾屬性的存在與否表明了該控件是否是默認(rèn)選擇狀態(tài).
<input type="radio" name="sex" value="male" checked>

Snip20181224_10.png

<label>元素為HTML表單的小部件提供標(biāo)簽

常用屬性

for
標(biāo)準(zhǔn)寫法：

<label for="password" >密碼 ：</label>
<input id="password" type="password" name="password">

簡(jiǎn)寫方式：

<label>姓名 ：
  <input type="text" name="username" placeholder="請(qǐng)輸入用戶名">
</label>

可標(biāo)記的 form相關(guān)元素的id，給<input>一個(gè)關(guān)聯(lián)，for的屬性值等于想關(guān)元素id的值，在這個(gè)實(shí)例當(dāng)點(diǎn)擊姓名和密碼就可以進(jìn)行用戶名和密碼的輸入，不需要點(diǎn)擊輸入框

Snip20181221_19.png

<option> <select>元素

<select> 元素是一種表單控件，可創(chuàng)建選項(xiàng)菜單，菜單內(nèi)的選項(xiàng)為<option>

<select>常用屬性

name：控件名稱(不能省略)

<option>常用屬性元素

常用屬性

<option>如果是<select>的后代，則selected不需要跟任何值，該項(xiàng)就是默認(rèn)選擇選擇的一項(xiàng)(默認(rèn)選擇的只能一項(xiàng))
<option value="oppo" selected>oppo</option>
①value屬性的內(nèi)容，是實(shí)際提交給表單的值。如果省略了這個(gè)屬性，值就從選項(xiàng)元素的文本內(nèi)容中獲取。（不能省略這個(gè)屬性）

②selected這個(gè)布爾屬性表明，這個(gè)選項(xiàng)初始被選中(默認(rèn)選中)

<button>元素

常用屬性

type：submit name
submit: 此按鈕將表單數(shù)據(jù)提交給服務(wù)器。<button>如果未指定屬性，或者屬性值為空或無(wú)效值，默認(rèn)會(huì)升級(jí)為type="submit"。
name：button的名稱，與表單數(shù)據(jù)一起提交。
reset：此按鈕重置所有組件為初始值。

<textarea>元素 表示一個(gè)多行純文本編輯控件

Snip20181221_20.png

<textarea name="judgement" cols="6" rows="7"></textarea>

常用屬性

name：元素的名稱，必須填進(jìn)去
cols：文本域的可視寬度，必須為正數(shù)
rows：元素的輸入文本的行數(shù)（顯示的高度）

注：表單元素有如有name屬性的,不能省略。省略name屬性
導(dǎo)致表單數(shù)據(jù)雖然提交，但是實(shí)際上很多數(shù)據(jù)并么有上傳服務(wù)器，等于白寫。

post和 get方式提交數(shù)據(jù)的區(qū)別

• 表象不同，get把提交的數(shù)據(jù)url可以在地址欄，post不顯示(在瀏覽器的Network會(huì)顯示)
• 原理不同，get是把信息拼接組成新的URL各個(gè)變量之間通過(guò)&連接，添加到action所指向的URL后面。表單數(shù)據(jù)會(huì)附加在 action 屬性的URI中，并以'?' 作為分隔符，post 是放入http 請(qǐng)求體中
• 提交數(shù)據(jù)量不同，get最多提交1k數(shù)據(jù)，如果拼接后的url信息特別長(zhǎng)瀏覽器的限制,信息會(huì)被自動(dòng)截?cái)嘣斐尚畔⒌牟煌暾?code>post理論上無(wú)限制，受服務(wù)器限制
• get提交的數(shù)據(jù)在瀏覽器歷史記錄中，安全性不好
• 場(chǎng)景不同，get 重在 "要"向后臺(tái)要數(shù)據(jù), post 重在"給"側(cè)重傳送數(shù)據(jù)

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主許可不得轉(zhuǎn)載