html提供：

• 用於多行文本框
• 用於選項(xiàng)的下拉列表
• for…buttons

，但您將最常使用：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

類型屬性設(shè)置了控制類型，並且有很大的選擇：

其他有用的屬性包括：

以及輸入類型，HTML5提供僅讀取輸出：

• >輸出：計(jì)算或用戶操作的文本結(jié)果
• 進(jìn)度：具有值和最大屬性的進(jìn)度欄
• 米：可以根據(jù)設(shè)定的值，最小，最大，低，高和最佳屬性在綠色，琥珀和紅色之間變化的比例

>輸入標(biāo)籤

>字段應(yīng)具有關(guān)聯(lián)的，您可以將其包裹在元素上：>

或使用for for屬性將字段的ID鏈接到標(biāo)籤：>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

標(biāo)籤對於可訪問性很重要。您可能已經(jīng)遇到了使用佔(zhàn)位符來節(jié)省屏幕空間的表格：

一旦用戶鍵入某些內(nèi)容，

佔(zhàn)位符文本即使是一個(gè)空間也會消失。顯示標(biāo)籤比強(qiáng)迫用戶記住該領(lǐng)域想要的更好！

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>輸入行為

>字段類型和約束屬性會更改瀏覽器的輸入行為。例如，一個(gè)數(shù)字輸入顯示移動(dòng)設(shè)備上的數(shù)字鍵盤。該字段可能會顯示旋轉(zhuǎn)器和鍵盤上/向下光標(biāo)按下將增加並減小值。 >

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

大多數(shù)字段類型都是顯而易見的，但是有例外。例如，信用卡是數(shù)字的，但是輸入16位數(shù)字時(shí)的增量/減少旋轉(zhuǎn)器是沒有用的，而且很容易上下。最好使用標(biāo)準(zhǔn)文本類型，但將InputMode屬性設(shè)置為數(shù)字，該屬性顯示了適當(dāng)?shù)逆I盤。設(shè)置自動(dòng)完整=“ cc-number”還建議任何預(yù)先配置或先前輸入的卡號。

使用正確的字段類型和自動(dòng)更正提供的好處，在JavaScript中很難實(shí)現(xiàn)。例如，某些移動(dòng)瀏覽器可以：

>通過使用攝像頭掃描卡來導(dǎo)入信用卡詳細(xì)信息

>導(dǎo)入SMS

發(fā)送的一次性編碼

>自動(dòng)驗(yàn)證

瀏覽器確保輸入值遵守由類型，最小，最大步驟，最小值，最大長度，模式和所需屬性定義的約束。例如：
• >試圖提交空價(jià)值會阻止表單提交，並在Chrome中顯示以下消息：>

啟發(fā)者將不允許在1到100範(fàn)圍之外的值。如果您鍵入不是數(shù)字的字符串，則會出現(xiàn)類似的驗(yàn)證消息。

所有，沒有一行JavaScript。

您可以通過以下方式停止瀏覽器驗(yàn)證

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

>將Novalidate屬性添加到元素

>將formnaloalication屬性添加到提交按鈕或圖像>

創(chuàng)建自定義JavaScript輸入 >如果您正在編寫新的基於JavaScript的日期條目組件，請停下來遠(yuǎn)離鍵盤！

>

>編寫自定義輸入控件很困難。您必須考慮鼠標(biāo)，鍵盤，觸摸，語音，可訪問性，屏幕尺寸以及JavaScript失敗時(shí)會發(fā)生什麼。您還可以創(chuàng)建不同的用戶體驗(yàn)。也許您的控件優(yōu)於臺式機(jī)，iOS和Android上的標(biāo)準(zhǔn)日期選擇器，但是陌生的UI會使某些用戶感到困惑。

開發(fā)人員選擇創(chuàng)建基於JavaScript的輸入的主要原因有三個(gè)主要原因。

>

1。標(biāo)準(zhǔn)控件很難樣式

> CSS樣式是有限的，通常需要黑客攻擊，例如在偽元素之後用標(biāo)籤的::覆蓋輸入。情況正在改善，但質(zhì)疑任何優(yōu)先級的設(shè)計(jì)優(yōu)先於功能的設(shè)計(jì)。 >

2。現(xiàn)代類型不支持舊瀏覽器

本質(zhì)上，您正在編碼Internet Explorer。 IE用戶不會獲得約會選擇器，但仍然可以以yyyy-mm-dd格式輸入日期。如果您的客戶堅(jiān)持使用，請僅在IE中加載polyfill。不需要負(fù)擔(dān)現(xiàn)代瀏覽器。

>

3。您需要一種新的輸入類型，該類型從未在

之前實(shí)施過

這些情況很少見，但始終從適當(dāng)?shù)腍TML5字段開始。它們很快，甚至在腳本加載之前就可以工作。您可以根據(jù)需要逐步增強(qiáng)字段。例如，灑水的JavaScript可以確保日曆事件的結(jié)束日期發(fā)生在開始日期之後。

>

摘要：

>避免重新發(fā)明HTML控件！

> CSS驗(yàn)證樣式

>您可以將以下偽級應(yīng)用於輸入字段，以根據(jù)當(dāng)前狀態(tài)進(jìn)行樣式：

selector 描述 ：重點(diǎn) 焦點(diǎn)的領(lǐng)域 ：焦點(diǎn) 一個(gè)元素包含一個(gè)帶有焦點(diǎn)的字段（是的，它是家長選擇器?。? ：焦點(diǎn)可見 由於鍵盤導(dǎo)航，元素具有重點(diǎn)，因此需要使用焦點(diǎn)戒指或更明顯 ：必需的 具有所需屬性的字段 ：選修的 沒有必需屬性的字段 ：有效的 已通過驗(yàn)證的字段 ：無效的 尚未通過驗(yàn)證的字段 ：用戶錄音 用戶與它進(jìn)行交互後已通過驗(yàn)證的字段（僅Firefox） ：用戶活躍 用戶與它進(jìn)行交互後尚未通過驗(yàn)證的字段（僅Firefox） ：內(nèi)部 該值在數(shù)字或範(fàn)圍輸入的範(fàn)圍內(nèi) ：Outrange 該值超出數(shù)字或範(fàn)圍輸入的範(fàn)圍 ：禁用 具有禁用屬性的字段 ：啟用 沒有禁用屬性的字段 ：只讀 具有隻讀屬性的字段 ：read-write： 沒有隻讀屬性的字段 ：檢查 檢查的複選框或廣播按鈕 ：不定 不確定的複選框或無線電狀態(tài)，例如所有無線電按鈕未選中 :預(yù)設(shè) 默認(rèn)提交按鈕或圖像 >您可以使用::佔(zhàn)位符式元素為輸入的佔(zhàn)位符文字設(shè)計(jì)：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

上面的選擇器具有相同的特異性，因此順序可能很重要?？紤]此示例：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>無效的輸入具有紅色文本，但僅應(yīng)用於具有禁用屬性的輸入 - >，因此所有啟用的輸入均為黑色。 >瀏覽器在頁面加載上應(yīng)用驗(yàn)證樣式。例如，在以下代碼中，每個(gè)無效字段都會有一個(gè)紅色邊框：>

用戶在與表單交互之前，用戶面對一組艱鉅的紅色框。在第一次提交或更改值之後顯示驗(yàn)證錯(cuò)誤將提供更好的體驗(yàn)。那就是javaScript介入…

>

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

> JavaScript和約束驗(yàn)證API

約束驗(yàn)證API提供表單自定義選項(xiàng)，可以增強(qiáng)標(biāo)準(zhǔn)HTML字段檢查。您可以：

>停止驗(yàn)證，直到用戶與字段進(jìn)行交互或提交表單

>

顯示帶有自定義樣式的錯(cuò)誤消息
提供僅在HTML中不可能的自定義驗(yàn)證。當(dāng)您需要比較兩個(gè)輸入時(shí)，通常需要這是必要的，例如，當(dāng)您輸入電子郵件地址或電話號碼時(shí)，檢查“新”和“確認(rèn)”密碼字段具有相同的值，或確保一個(gè)日期是另一個(gè)日期。 >
形式驗(yàn)證
>在使用API??之前，您的代碼應(yīng)通過將表單的Novalidate屬性設(shè)置為true（與添加NovAlidate屬性相同）來禁用默認(rèn)驗(yàn)證和錯(cuò)誤消息： 然後，您可以添加事件處理程序，例如表單提交時(shí)：>
>處理程序可以使用checkVality（）或reportVality（）方法檢查整個(gè)表單是有效的，當(dāng)所有表單的輸入都是有效時(shí)，它們返回true。 （區(qū)別在於checkVality（）檢查是否有任何輸入是否受到約束驗(yàn)證。）

>

Mozilla Docs解釋：

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

在每個(gè)無效的字段上也觸發(fā)了無效的事件。這不會冒出氣泡：必須將處理程序添加到使用它的每個(gè)控件中。

>

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

>現(xiàn)在有效的表格可以產(chǎn)生進(jìn)一步的驗(yàn)證檢查。同樣，一個(gè)無效的形式可能會突出顯示無效的字段。

>

>字段驗(yàn)證

單個(gè)字段具有以下約束驗(yàn)證屬性：

>

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

willvalidate：如果元素是約束驗(yàn)證的候選者，則返回tru

>驗(yàn)證信息：驗(yàn)證消息。如果字段有效，這將是一個(gè)空字符串。

vality：一個(gè)有效性的對象。當(dāng)字段有效時(shí)，這具有有效的屬性集為TRUE。如果是錯(cuò)誤的，則以下一個(gè)或多個(gè)屬性將是正確的：
• > >有效性狀態(tài) 描述 .badinput 瀏覽器無法理解輸入 .customerror 設(shè)置了自定義有效性消息 .patternmismatch 該值與指定的模式屬性不匹配 .rangeoverflow 該值大於最大屬性 .rangeunderflow 該值小於最小屬性 .Stepmismatch 該值不符合步驟屬性規(guī)則 .toolong 字符串長度大於最大屬性 。過短 字符串長度小於最小屬性 .typemismatch 該值不是有效的電子郵件或URL .valueMissing 所需的值是空的

單個(gè)字段具有以下約束驗(yàn)證方法：

>
• > setCustomVality（消息）：為無效字段設(shè)置錯(cuò)誤消息。當(dāng)字段有效或字段將永遠(yuǎn)無效時(shí)，必須傳遞一個(gè)空字符串。 >
> checkVality（）：當(dāng)輸入有效時(shí)，返回true。 valid.valid屬性執(zhí)行同樣的事情，但是checkVality（）也觸發(fā)了現(xiàn)場無效的事件，這可能很有用。
validateForm（）處理程序函數(shù)可以在每個(gè)字段中循環(huán)循環(huán)，並在必要時(shí)將無效類應(yīng)用於其父元素：>

假設(shè)您的HTML定義了一個(gè)電子郵件字段：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

當(dāng)未指定電子郵件或無效時(shí)，該腳本將無效類應(yīng)用於
。提交表單時(shí)，CSS可以顯示或隱藏驗(yàn)證消息：
創(chuàng)建自定義表單驗(yàn)證器
<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>
>以下演示顯示了需要用戶名以及電子郵件地址，電話號碼或兩者兼而有之的示例聯(lián)繫表
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
看到筆 約束驗(yàn)證API示例by sitepoint（@sitepoint） 在Codepen上。
>使用名為FormValidate的通用表單驗(yàn)證類實(shí)現(xiàn)。實(shí)例化對象時(shí)會傳遞表單元素。可以設(shè)置可選的第二個(gè)參數(shù)：
當(dāng)用戶與之交互時(shí)， tay驗(yàn)證每個(gè)字段
false（默認(rèn)值）在第一個(gè)提交之後驗(yàn)證所有字段（此後發(fā)生字段級驗(yàn)證）
>
>
formvalidate對象監(jiān)視以下兩個(gè)：
• >
  • focusOut事件，然後檢查單個(gè)字段
  • 表格提交事件，然後檢查每個(gè)字段

  >均調(diào)用.ValidateField（field）方法，該方法檢查字段是否通過標(biāo)準(zhǔn)約束驗(yàn)證。當(dāng)它這樣做時(shí)，分配給該字段的任何自定義驗(yàn)證功能依次執(zhí)行。所有人都必須返回正確才能有效。

  >

  >無效的字段將無效的類應(yīng)用於該字段的父元素，該類別使用CSS顯示紅色幫助消息。

  >最後，當(dāng)整個(gè)表單有效時(shí)，對象調(diào)用自定義提交功能：>

  或者，您可以使用標(biāo)準(zhǔn)AddeventListener來處理表單提交事件，因?yàn)镕ormValidate會在表單無效時(shí)防止進(jìn)一步的處理程序運(yùn)行。

  形成技巧

  <span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
  </span>

  表格是所有Web應(yīng)用程序的基礎(chǔ)，開發(fā)人員花費(fèi)大量時(shí)間來操縱用戶輸入。約束驗(yàn)證得到很好的支持：瀏覽器可以處理大多數(shù)檢查並顯示適當(dāng)?shù)妮斎脒x項(xiàng)。

  >建議：
  在可能的情況下，請使用標(biāo)準(zhǔn)HTML輸入類型。設(shè)置最小，最大，步驟，最小值，最大值，模式，必需，輸入模式和自動(dòng)完成屬性。

  >

  如有必要，請使用一些JavaScript啟用自定義驗(yàn)證和消息。

  對於更複雜的字段，逐漸增強(qiáng)了標(biāo)準(zhǔn)輸入。

  最後：
  • >忘記Internet Explorer！
  • >
  >除非您的客戶主要是用戶，否則無需實(shí)施您自己的後備驗(yàn)證功能。所有HTML5輸入字段都在IE中工作，但可能需要更多的用戶工作。 （例如，IE不會檢測到您何時(shí)輸入無效的電子郵件地址。）您仍然必須驗(yàn)證服務(wù)器上的數(shù)據(jù)，因此請考慮使用該數(shù)據(jù)作為IE錯(cuò)誤檢查的基礎(chǔ)。
  • > HTML表格和約束驗(yàn)證的常見問題（FAQ）
  >
  html形式驗(yàn)證的重要性是什麼？它確保用戶輸入表單的數(shù)據(jù)在發(fā)送到服務(wù)器之前符合某些標(biāo)準(zhǔn)。這不僅可以維持?jǐn)?shù)據(jù)的完整性，還通過提供有關(guān)輸入數(shù)據(jù)的正確性的立即反饋來增強(qiáng)用戶體驗(yàn)。沒有表單驗(yàn)證，就有可能會收到不正確，不完整甚至惡意數(shù)據(jù)的風(fēng)險(xiǎn)，這些數(shù)據(jù)可能導(dǎo)致各種問題，包括數(shù)據(jù)損壞，安全漏洞和系統(tǒng)崩潰。

  > HTML5如何改進(jìn)形式驗(yàn)證？

  html5引入了幾個(gè)新的形式元素和屬性，這些元素和屬性使形式驗(yàn)證變得更加容易，更有效。例如，它提供了新的輸入類型，例如電子郵件，URL和數(shù)字，它們會根據(jù)類型自動(dòng)驗(yàn)證輸入數(shù)據(jù)。它還介紹了所需的新屬性，模式和最小/最大屬性，使您可以在輸入數(shù)據(jù)上指定各種約束。此外，HTML5提供了一個(gè)內(nèi)置驗(yàn)證API，使您能夠使用JavaScript執(zhí)行自定義驗(yàn)證。

  我可以在沒有JavaScript的情況下執(zhí)行表單驗(yàn)證嗎？

  是的，您可以使用HTML5執(zhí)行基本表單驗(yàn)證獨(dú)自的。 HTML5提供了幾種新的輸入類型和屬性，使您可以在輸入數(shù)據(jù)上指定各種約束。例如，您可以使用所需的屬性來強(qiáng)制執(zhí)行字段，以執(zhí)行特定格式的模式屬性以及為數(shù)值輸入設(shè)置範(fàn)圍的最小/最大屬性。但是，對於更複雜的驗(yàn)證，您仍然需要使用JavaScript。錯(cuò)誤消息。您可以使用有效狀態(tài)對象的setCustomVality方法為字段設(shè)置自定義錯(cuò)誤消息。此方法採用一個(gè)字符串參數(shù)，當(dāng)字段無效時(shí)，該參數(shù)將成為字段的驗(yàn)證消息。您可以響應(yīng)無效事件調(diào)用此方法，該事件是在字段失敗驗(yàn)證時(shí)觸發(fā)的。

  >

  >如何禁用html5 form驗(yàn)證？

  >您可以通過添加添加html5表單驗(yàn)證來禁用html5 form驗(yàn)證Novalidate屬性屬於表單元素。當(dāng)存在此屬性時(shí)，瀏覽器將在提交時(shí)對錶格進(jìn)行任何驗(yàn)證。如果您要在服務(wù)器端或使用自定義JavaScript上處理驗(yàn)證，這可能很有用。
  如何在html5？
  中驗(yàn)證多個(gè)字段，不提供構(gòu)建 - 在一起驗(yàn)證多個(gè)字段的方法中。但是，您可以使用JavaScript實(shí)現(xiàn)此目標(biāo)。您可以編寫自定義驗(yàn)證功能，該功能檢查多個(gè)字段的值，並在不符合所需標(biāo)準(zhǔn)的情況下設(shè)置自定義有效性消息。您可以根據(jù)表單的提交事件或字段的輸入/更改事件來調(diào)用此功能。
  >如何根據(jù)html5？ >

  >如何在html5？

  html5中執(zhí)行異步驗(yàn)證。但是，您可以使用JavaScript實(shí)現(xiàn)此目標(biāo)。您可以編寫執(zhí)行異步操作（例如AJAX請求）的自定義驗(yàn)證功能，並根據(jù)結(jié)果設(shè)置自定義有效性消息。您可以根據(jù)字段的輸入/更改事件或表單的提交事件來調(diào)用此功能。

  >

  >如何在HTML5表單驗(yàn)證中樣式？ HTML5形式驗(yàn)證中的消息由瀏覽器確定，不能使用CSS直接設(shè)計(jì)。但是，您可以使用JavaScript創(chuàng)建自定義錯(cuò)誤消息，並根據(jù)需要進(jìn)行樣式。您可以使用驗(yàn)證API來確定字段何時(shí)無效並相應(yīng)地顯示自定義錯(cuò)誤消息。

  >如何測試HTML表單的驗(yàn)證？

  >您可以測試驗(yàn)證的驗(yàn)證通過將各種類型的數(shù)據(jù)輸入到字段中並試圖提交表格，一種HTML表單。您應(yīng)該使用有效數(shù)據(jù)和無效數(shù)據(jù)進(jìn)行測試，以確保在所有情況下驗(yàn)證都能正常工作。您也可以使用自動(dòng)測試工具或庫來執(zhí)行更全面的測試。