目錄1. 用戶交互2. 按鈕3. 表單的結(jié)構(gòu)3.1 \form\元素3.1.1 檢查提交的數(shù)據(jù)3.1.2 結(jié)構(gòu)化表單3.2 \input\元素3.2.1 required和value屬性的實(shí)際效果3.2.2 特定類型的文本輸入框3.3 \label\元素3.3.1 顯式與隱式表單標(biāo)簽3.4 \button\元素4. 關(guān)于無障礙的小提示5. 其他控件類型5.1 單選按鈕5.1.1 禁用表單控件5.2 復(fù)選框5.3 下拉菜單3.4 多行文本輸入框6. 表單驗(yàn)證參考1. 用戶交互用戶和網(wǎng)頁交互的幾種方式鏈接可用于導(dǎo)航到同一頁面或不同頁面的不同內(nèi)容部分。video和audio元素通常含有播放/暫停、快進(jìn)、回退等功能允許用戶根據(jù)需要來消費(fèi)媒體內(nèi)容。然而這些功能通常更偏向于單向交互讓用戶被動(dòng)地消費(fèi)內(nèi)容。雖然這沒問題但Web是一種雙向體驗(yàn)。網(wǎng)站用戶會(huì)根據(jù)自己的喜好調(diào)整內(nèi)容和服務(wù)的使用方式。要實(shí)現(xiàn)這種雙向交互體驗(yàn)?zāi)阈枰褂冒粹o和表單。按鈕通常是通過HTML的button元素創(chuàng)建的(有時(shí)也使用input元素并將其type屬性設(shè)置為button或submit值)。這些按鈕用途廣泛——你可以將它們與任意功能關(guān)聯(lián)實(shí)現(xiàn)什么功能只取決于你的想象力和編碼能力。表單是通過form、label、input和select等元素創(chuàng)建的。與簡單的按鈕相比表單元素可以創(chuàng)建更復(fù)雜的控件——例如包含多個(gè)選項(xiàng)的下拉菜單允許用戶在不同的用戶界面主題之間進(jìn)行選擇。更重要的是它們還可以用于創(chuàng)建表單供用戶在需要向網(wǎng)站服務(wù)器提交信息時(shí)填寫。2. 按鈕最簡單的按鈕如下button點(diǎn)擊這里/button出現(xiàn)在button/button標(biāo)簽的文字會(huì)顯示在按鈕內(nèi)部并且瀏覽器會(huì)為其應(yīng)用一些基礎(chǔ)樣式使它默認(rèn)看起來和表現(xiàn)得像一個(gè)按鈕。給它添加一些Javascript代碼button點(diǎn)擊這里/buttonscriptconstbtndocument.querySelector(button);btn.addEventListener(click,(){btn.textContent你點(diǎn)擊了這個(gè)按鈕 ??;setTimeout((){btn.textContent點(diǎn)擊這里;},1000);});/script3. 表單的結(jié)構(gòu)一個(gè)基礎(chǔ)的表單包含以下三個(gè)部分一個(gè)form元素用于包裹表單的所有提交內(nèi)容。所有包含在form/form標(biāo)簽內(nèi)的表單控件都屬于同一個(gè)表單它們的數(shù)據(jù)會(huì)在表單提交時(shí)一起發(fā)送。一對或多對label元素與表單控件元素(通常是input元素但也有其他類型例如select)表單控件元素允許用戶選擇或輸入一些數(shù)據(jù)這些數(shù)據(jù)將在表單提交時(shí)發(fā)送到服務(wù)器。label元素為表單控件提供一個(gè)標(biāo)識(shí)標(biāo)簽用于描述應(yīng)在控件中輸入的數(shù)據(jù)內(nèi)容。一個(gè)button元素用于提交表單。formaction./submit_pagemethodgeth2訂閱我們的新聞簡報(bào)/h2plabelforname姓名必填/labelinputtypetextnamenameidnamerequired//pplabelforemail郵箱必填/labelinputtypeemailnameemailidemailrequired//ppbutton訂閱新聞簡報(bào)/button/p/form如果填寫了數(shù)據(jù)點(diǎn)擊按鈕會(huì)看到一個(gè)404錯(cuò)誤頁面。3.1 form元素form元素作為表單的外層容器用于將所有的表單控件組織到一起。當(dāng)點(diǎn)擊button按鈕時(shí)所有在表單控件中填寫的數(shù)據(jù)都會(huì)被提交到服務(wù)器。form元素可以包含多個(gè)屬性最重要的兩個(gè)屬性是action包含一個(gè)路徑用于指定提交的表單數(shù)據(jù)將發(fā)送到哪個(gè)頁面進(jìn)行處理。稍后當(dāng)你提交表單時(shí)你會(huì)在URL中看到/submit_page。你還會(huì)受到一個(gè)404錯(cuò)誤響應(yīng)因?yàn)樘幚頂?shù)據(jù)的頁面實(shí)際上并不存在但目前這樣做是沒問題的。method指定將表單數(shù)據(jù)發(fā)送到服務(wù)器時(shí)使用的數(shù)據(jù)傳輸方法?，F(xiàn)在你不必太過擔(dān)憂這個(gè)屬性當(dāng)值為get時(shí)數(shù)據(jù)會(huì)作為參數(shù)附加在URL的末尾進(jìn)行發(fā)送。3.1.1 檢查提交的數(shù)據(jù)在上面示例中的表單中填入姓名Bob電子郵件地址bobbob.com點(diǎn)擊提交按鈕。action和method屬性會(huì)使表單數(shù)據(jù)以下列URL形式提交/some/url/submit_page?nameBobemailbob%40bob.com3.1.2 結(jié)構(gòu)化表單可以在form元素中包含任意的HTML元素用于組織表單控件本身并為CSS樣式提供可定位的容器以便進(jìn)行樣式設(shè)置等操作。在示例中使用了一個(gè)h2來描述該表單的用途。還將每一對輸入框/標(biāo)簽和提交按鈕分別放在一個(gè)單獨(dú)的p元素中這樣每一組控件就會(huì)獨(dú)占一行上。這些元素默認(rèn)是行內(nèi)的這意味著如果不這么做所有的控件將會(huì)處于同一行。這是表單結(jié)構(gòu)化的常見形式。一些人使用p元素來分割表單控件一些人使用div、section甚至是li元素。只要使用的元素在語義上合理這些其實(shí)并沒有太大區(qū)別。但使用塊級(jí)引用元素、側(cè)邊欄元素或者是聯(lián)系人地址元素來表示就不太合適。還有一個(gè)專門用來對表單控件進(jìn)行分組的元素fieldset。當(dāng)表單較復(fù)雜或需要把多個(gè)復(fù)選框、單選按鈕歸為一組時(shí)它就非常有用。3.2 input元素input元素表示用戶在表單中輸入的各種數(shù)據(jù)項(xiàng)。inputtypetextnamenameidnamerequired/type指定要?jiǎng)?chuàng)建的表單控件類型。表單控件類型有很多從各種簡單的文本字段到單選按鈕、復(fù)選框等。當(dāng)值為text時(shí)會(huì)渲染一個(gè)可接受任何文本的基本文本框。name為該數(shù)據(jù)項(xiàng)指定一個(gè)名稱。當(dāng)表單提交時(shí)數(shù)據(jù)會(huì)以名值對的形式發(fā)送。一般來說name屬性的值就是這個(gè)數(shù)據(jù)項(xiàng)的名稱而用戶在文本框輸入的數(shù)據(jù)就是這個(gè)數(shù)據(jù)項(xiàng)的值。id指定一個(gè)用于標(biāo)識(shí)該元素的ID。在這里它用于將該表單控件與對應(yīng)的label標(biāo)簽關(guān)聯(lián)起來。required指定該表單控件在提交表單前必須填寫。這應(yīng)僅用于必填字段而不應(yīng)設(shè)置在可選字段上。有些輸入類型的值并不是用戶直接在字段輸入的。input type“color”會(huì)顯示一個(gè)取色器你可以從中選擇顏色input type“radio”會(huì)顯示一個(gè)單選按鈕可以被選中也可以不被選中。對于單選按鈕一般需要在value屬性中指定一個(gè)具體的值表示當(dāng)該按鈕被選中時(shí)提交到服務(wù)器的實(shí)際內(nèi)容。也可以在text和color等輸入類型上也設(shè)置value屬性其效果是表單控件在初次渲染完成時(shí)就預(yù)先填充這個(gè)值。3.2.1 required和value屬性的實(shí)際效果在之前示例沒有填寫內(nèi)容的情況下提交表單。你會(huì)看到一條錯(cuò)誤提示。在姓名中填寫有效的名字在電子郵件地址中填入123。點(diǎn)擊提交會(huì)給出關(guān)于電子郵件地址的錯(cuò)誤提示。嘗試在第一個(gè)input中加入value屬性值為Bob。你會(huì)看到第一個(gè)輸入框中默認(rèn)填入了Bob。3.2.2 特定類型的文本輸入框示例中第二個(gè)輸入字段特別要求輸入一個(gè)郵箱地址并會(huì)對填寫的內(nèi)容進(jìn)行郵件格式的驗(yàn)證。第二個(gè)input元素的type為email。還有許多專門用于處理特定類型數(shù)據(jù)的文本字段輸入類型input type“number”、input type“password”、input type“tel”等。3.3 label元素label元素為表單控件提供了標(biāo)識(shí)性標(biāo)簽用于描述應(yīng)該在控件中輸入的數(shù)據(jù)。你可以在label元素中放置任意文本內(nèi)容但這些內(nèi)容應(yīng)該準(zhǔn)確描述關(guān)聯(lián)表單控件所期望的數(shù)據(jù)類型。標(biāo)簽與控件之間的關(guān)聯(lián)方式是給表單控件設(shè)置一個(gè)id屬性然后給label設(shè)置for屬性其值與該控件的id相同。labelforname姓名必填/labelinputtypetextnamenameidnamerequired/label元素的重要性體現(xiàn)在多個(gè)方面尤其包括以下幾點(diǎn)當(dāng)視力障礙用戶使用屏幕閱讀器瀏覽和操作網(wǎng)頁內(nèi)容時(shí)屏幕閱讀器在遇到每個(gè)控件時(shí)會(huì)朗讀與之關(guān)聯(lián)的標(biāo)簽文本。這能讓用戶更容易理解每個(gè)控件需要輸入什么內(nèi)容。它們允許用戶不僅可以點(diǎn)擊控件本身還可以點(diǎn)擊標(biāo)簽文本來聚焦表單控件。這對移動(dòng)設(shè)備用戶尤其有用因?yàn)樵谟|摸屏上用手指精確選擇表單控件可能比較困難。在這種情況下擴(kuò)大可點(diǎn)擊區(qū)域會(huì)非常有幫助。3.3.1 顯式與隱式表單標(biāo)簽示例中的標(biāo)簽樣式被稱為顯式表單標(biāo)簽——控件與標(biāo)簽之間的關(guān)聯(lián)是通過id和for屬性顯式建立的。你也可以通過將控件嵌套在標(biāo)簽內(nèi)的方式實(shí)現(xiàn)隱式表單標(biāo)簽。label姓名必填inputtypetextnamenamerequired//label通過嵌套方式控件與標(biāo)簽之間的關(guān)聯(lián)是隱式建立的因此你不再需要id和for屬性。但更建議使用顯式標(biāo)簽。3.4 button元素當(dāng)一個(gè)button元素被放在form元素中時(shí)它的默認(rèn)行為是提交表單只要沒有無效數(shù)據(jù)阻止客戶端表單驗(yàn)證。通過button元素的type屬性可以指定按鈕的其他行為button type“submit”明確聲明該按鈕是提交按鈕。一般來說不需要顯式聲明除非你的form中包含了多個(gè)按鈕并且你想明確表示哪個(gè)按鈕是用于提交表單的。button type“reset”創(chuàng)建一個(gè)重置按鈕——這會(huì)立即清空表單中輸入的所有內(nèi)容將表單恢復(fù)到初始狀態(tài)。不建議使用重置按鈕——在早期的網(wǎng)頁中它們比較常見但通常會(huì)造成更多困擾。button type“button”創(chuàng)建一個(gè)普通按鈕其行為和form外的按鈕一樣。需要使用JavaScript來給它們添加功能。4. 關(guān)于無障礙的小提示關(guān)于無障礙的小提示5. 其他控件類型formaction./payment_pagemethodgeth2報(bào)名參見見面會(huì)/h2fieldsetlegend選擇酒店房型/legenddivinputtyperadioidhotelChoice1namehotelvalueeconomychecked/labelforhotelChoice1經(jīng)濟(jì)型$0/labelinputtyperadioidhotelChoice2namehotelvaluesuperior/labelforhotelChoice2高級(jí)型$50/labelinputtyperadioidhotelChoice3namehotelvaluepenthousedisabled/labelforhotelChoice3頂級(jí)套房$150/label/div/fieldsetfieldsetlegend要參加的課程/legenddivinputtypecheckboxidyoganameyoga/labelforyoga瑜伽$10/labelinputtypecheckboxidcoffeenamecoffee/labelforcoffee咖啡烘焙$20/labelinputtypecheckboxidballoonnameballoon/labelforballoon氣球動(dòng)物藝術(shù)$5/label/div/fieldsetplabelfortransport出行方式/labelselectnametransportidtransportoptionvalue--請選擇一項(xiàng)--/optionoptionvalueplane乘坐飛機(jī)/optionoptionvaluebike騎自行車/optionoptionvaluewalk徒步/optionoptionvaluebus乘坐公交/optionoptionvaluetrain搭乘火車/optionoptionvaluejetPack使用噴氣背包/option/select/pplabelforcomments其他備注/labeltextareaidcommentsnamecommentsrows5cols33/textarea/ppbutton去結(jié)賬/button/p/form5.1 單選按鈕單選按鈕是通過input type“radio”控件來實(shí)現(xiàn)的。這些控件會(huì)渲染為一組按鈕控件每次只能選擇其中一個(gè)——你不能同時(shí)選中多個(gè)。單選按鈕部分fieldsetlegend選擇酒店房型/legenddivinputtyperadioidhotelChoice1namehotelvalueeconomychecked/labelforhotelChoice1經(jīng)濟(jì)型$0/labelinputtyperadioidhotelChoice2namehotelvaluesuperior/labelforhotelChoice2高級(jí)型$50/labelinputtyperadioidhotelChoice3namehotelvaluepenthousedisabled/labelforhotelChoice3頂級(jí)套房$150/label/div/fieldsetradio輸入控件的工作方式大致和text輸入控件相同但也有極點(diǎn)不同每組單選按鈕的name屬性值必須相同以便將它們關(guān)聯(lián)成一組。如果name屬性值不同它們會(huì)被視為不同的組提交時(shí)也會(huì)有發(fā)送不同的值。每個(gè)單選按鈕必須包含一個(gè)value屬性用于指定提交時(shí)該按鈕對應(yīng)的值。提交的數(shù)據(jù)會(huì)是一個(gè)名值對其中名稱始終相同。每個(gè)單選按鈕的label應(yīng)該描述該具體選項(xiàng)的值而不是你正在選擇的這一組選項(xiàng)所代表的字段含義。描述整組選項(xiàng)的推薦做法是使用fieldset元素包裹這些選項(xiàng)并用其子元素legend來提供整體描述。為第一個(gè)單選按鈕添加了checked屬性——這會(huì)讓它在頁面初次加載時(shí)默認(rèn)被選中。這意味著總會(huì)有一個(gè)選項(xiàng)被選中并且你無法取消選中一個(gè)單選按鈕除非選擇另一個(gè)。5.1.1 禁用表單控件第三個(gè)單選按鈕設(shè)置了disabled屬性。這會(huì)導(dǎo)致該控件顯示為灰色且無法被選中。這在很多情況下都非常有用比如某個(gè)選項(xiàng)通常是可用的但目前暫時(shí)不可用。可以在任何表單控件上設(shè)置disabled屬性包括button元素。fieldset元素可以接受disabled屬性——這會(huì)導(dǎo)致該fieldset內(nèi)的所有表單控件都被禁用。給兩個(gè)fieldset設(shè)置disabled屬性后5.2 復(fù)選框復(fù)選框是使用input type“checkbox”控件實(shí)現(xiàn)的。這些控件渲染為一組開關(guān)狀態(tài)的復(fù)選框?？梢酝瑫r(shí)選擇多個(gè)選項(xiàng)。復(fù)選框部分fieldsetlegend選擇要參加的課程/legenddivinputtypecheckboxidyoganameyoga/labelforyoga瑜伽$10/labelinputtypecheckboxidcoffeenamecoffee/labelforcoffee咖啡烘焙$20/labelinputtypecheckboxidballoonnameballoon/labelforballoon氣球動(dòng)物藝術(shù)$5/label/div/fieldset復(fù)選框和單選按鈕的實(shí)現(xiàn)方式相似它們都可以使用checked屬性在頁面加載時(shí)默認(rèn)被選中。它們的行為也比較類似不同點(diǎn)在于單選按鈕允許你從多個(gè)選項(xiàng)中選擇零個(gè)或一個(gè)而復(fù)選框允許你從多個(gè)選項(xiàng)中選擇零個(gè)或多個(gè)。主要區(qū)別在于每個(gè)復(fù)選框的name屬性值不同且通常沒有設(shè)置value屬性。這意味著每個(gè)復(fù)選框代表不同的數(shù)據(jù)值而單選按鈕只代表一個(gè)值。當(dāng)表單提交時(shí)如果復(fù)選框被選中則提交的值為on例如yogaon等。可以通過為復(fù)選框添加value屬性來自定義提交的值。比如input type“checkbox” id“yoga” name“yoga” value“yes” /被選中時(shí)會(huì)提交yogayes。5.3 下拉菜單下拉菜單是使用select和option元素來實(shí)現(xiàn)的。下拉菜單部分labelfortransport出行方式/labelselectnametransportidtransportoptionvalue--請選擇一項(xiàng)--/optionoptionvalueplane乘坐飛機(jī)/optionoptionvaluebike騎自行車/optionoptionvaluewalk徒步/optionoptionvaluebus乘坐公交/optionoptionvaluetrain搭乘火車/optionoptionvaluejetPack使用噴氣背包/option/selectselect元素包括了所有不同的選項(xiàng)。需要在這里設(shè)置id屬性將控件與其標(biāo)簽關(guān)聯(lián)起來同時(shí)設(shè)置name屬性指定提交時(shí)數(shù)據(jù)項(xiàng)的名稱。數(shù)據(jù)項(xiàng)的每個(gè)可能值由嵌套在select內(nèi)的option元素表示。每個(gè)option元素可以帶有value屬性指定如果該選項(xiàng)被選中時(shí)提交的值。如果未指定value則使用option/option標(biāo)簽內(nèi)的文本內(nèi)容作為提交值。3.4 多行文本輸入框多行文本輸入框使用textarea元素創(chuàng)建labelforcomments其他備注/labeltextareaidcommentsnamecommentsrows5cols33/textarea它們的行為與input type“text”元素類似不同之處在于它們允許輸入多行文本。rows屬性指定文本區(qū)域默認(rèn)顯示的行數(shù)而cols屬性指定文本區(qū)域默認(rèn)顯示的列數(shù)。如果未指定這兩個(gè)屬性瀏覽器默認(rèn)使用cols20和rows“20”。大多數(shù)瀏覽器會(huì)在文本區(qū)域的一個(gè)角落顯示一個(gè)拖拽手柄可以用來調(diào)整文本區(qū)域的大小。6. 表單驗(yàn)證meps;前面提到了required屬性用于指定某個(gè)字段必須填寫才能提交表單它還會(huì)檢查某些特定類型的字段是否輸入了正確的值。表單驗(yàn)證之所以重要主要有兩個(gè)原因確保提交的數(shù)據(jù)格式正確從而避免在應(yīng)用程序中引發(fā)錯(cuò)誤。防止數(shù)據(jù)引發(fā)安全問題。惡意用戶可能會(huì)提交特意構(gòu)造的數(shù)據(jù)在不安全的應(yīng)用中這些數(shù)據(jù)可能會(huì)執(zhí)行刪除數(shù)據(jù)庫或控制系統(tǒng)等命令。表單驗(yàn)證主要有兩種類型客戶端驗(yàn)證在瀏覽器端進(jìn)行通常進(jìn)行表單驗(yàn)證屬性和JavaScript結(jié)合實(shí)現(xiàn)?？蛻舳蓑?yàn)證可以即時(shí)提示用戶輸入有誤但它并不可靠不能有效阻止惡意數(shù)據(jù)。因?yàn)橛脩艨梢躁P(guān)閉JavaScript或修改客戶端代碼從而繞過驗(yàn)證。服務(wù)器端驗(yàn)證在服務(wù)器上進(jìn)行使用服務(wù)器端所采用的任意語言實(shí)現(xiàn)。錯(cuò)誤格式的數(shù)據(jù)可以是意外發(fā)送的也可以是有意而為之。經(jīng)驗(yàn)法則是服務(wù)器永遠(yuǎn)不要信任客戶端發(fā)送的任何數(shù)據(jù)以避免由于格式錯(cuò)誤的消息而引發(fā)漏洞或安全問題。服務(wù)器端驗(yàn)證更適合阻止惡意消息因?yàn)榉?wù)器端代碼更難被纂改。但它無法像客戶端驗(yàn)證那樣及時(shí)給用戶反饋因?yàn)閿?shù)據(jù)必須先發(fā)送到服務(wù)器驗(yàn)證服務(wù)器再把結(jié)果返回給用戶。不要只選擇客戶端驗(yàn)證或服務(wù)器端驗(yàn)證——你需要兩者結(jié)合。你需要客戶端驗(yàn)證來為用戶的輸入提供即時(shí)反饋同時(shí)也需要服務(wù)器端驗(yàn)證來確保發(fā)送到服務(wù)器的消息格式是安全、可處理的。參考1、HTML中的表單和按鈕