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