html提供：

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

，但您將最常使用：

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

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

其他有用的屬性包括：

以及輸入類(lèi)型，HTML5提供僅讀取輸出：

• >輸出：計(jì)算或用戶(hù)操作的文本結(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)籤對(duì)於可訪問(wèn)性很重要。您可能已經(jīng)遇到了使用佔(zhàn)位符來(lái)節(jié)省屏幕空間的表格：

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

佔(zhàn)位符文本即使是一個(gè)空間也會(huì)消失。顯示標(biāo)籤比強(qiáng)迫用戶(hù)記住該領(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>

>輸入行為

>字段類(lèi)型和約束屬性會(huì)更改瀏覽器的輸入行為。例如，一個(gè)數(shù)字輸入顯示移動(dòng)設(shè)備上的數(shù)字鍵盤(pán)。該字段可能會(huì)顯示旋轉(zhuǎn)器和鍵盤(pá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ù)字段類(lèi)型都是顯而易見(jiàn)的，但是有例外。例如，信用卡是數(shù)字的，但是輸入16位數(shù)字時(shí)的增量/減少旋轉(zhuǎn)器是沒(méi)有用的，而且很容易上下。最好使用標(biāo)準(zhǔn)文本類(lèi)型，但將InputMode屬性設(shè)置為數(shù)字，該屬性顯示了適當(dāng)?shù)逆I盤(pán)。設(shè)置自動(dòng)完整=“ cc-number”還建議任何預(yù)先配置或先前輸入的卡號(hào)。

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

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

>導(dǎo)入SMS

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

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

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

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

所有，沒(méi)有一行JavaScript。

您可以通過(guò)以下方式停止瀏覽器驗(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輸入 >如果您正在編寫(xiě)新的基於JavaScript的日期條目組件，請(qǐng)停下來(lái)遠(yuǎn)離鍵盤(pán)！

>

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

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

>

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

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

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

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

>

3。您需要一種新的輸入類(lèi)型，該類(lèi)型從未在

之前實(shí)施過(guò)

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

>

摘要：

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

> CSS驗(yàn)證樣式

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

selector 描述 ：重點(diǎn) 焦點(diǎn)的領(lǐng)域 ：焦點(diǎn) 一個(gè)元素包含一個(gè)帶有焦點(diǎn)的字段（是的，它是家長(zhǎng)選擇器！） ：焦點(diǎn)可見(jiàn) 由於鍵盤(pán)導(dǎo)航，元素具有重點(diǎn)，因此需要使用焦點(diǎn)戒指或更明顯 ：必需的 具有所需屬性的字段 ：選修的 沒(méi)有必需屬性的字段 ：有效的 已通過(guò)驗(yàn)證的字段 ：無(wú)效的 尚未通過(guò)驗(yàn)證的字段 ：用戶(hù)錄音 用戶(hù)與它進(jìn)行交互後已通過(guò)驗(yàn)證的字段（僅Firefox） ：用戶(hù)活躍 用戶(hù)與它進(jìn)行交互後尚未通過(guò)驗(yàn)證的字段（僅Firefox） ：內(nèi)部 該值在數(shù)字或範(fàn)圍輸入的範(fàn)圍內(nèi) ：Outrange 該值超出數(shù)字或範(fàn)圍輸入的範(fàn)圍 ：禁用 具有禁用屬性的字段 ：?jiǎn)⒂?沒(méi)有禁用屬性的字段 ：只讀 具有隻讀屬性的字段 ：read-write： 沒(méi)有隻讀屬性的字段 ：檢查 檢查的複選框或廣播按鈕 ：不定 不確定的複選框或無(wú)線(xiàn)電狀態(tài)，例如所有無(wú)線(xiàn)電按鈕未選中 :預(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>

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

用戶(hù)在與表單交互之前，用戶(hù)面對(duì)一組艱鉅的紅色框。在第一次提交或更改值之後顯示驗(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)證，直到用戶(hù)與字段進(jìn)行交互或提交表單

>

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

>

Mozilla Docs解釋?zhuān)?pre class="brush:php;toolbar:false"><span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span> </span>

在每個(gè)無(wú)效的字段上也觸發(fā)了無(wú)效的事件。這不會(huì)冒出氣泡：必須將處理程序添加到使用它的每個(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è)無(wú)效的形式可能會(huì)突出顯示無(wú)效的字段。

>

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

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

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

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

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

當(dāng)未指定電子郵件或無(wú)效時(shí)，該腳本將無(wú)效類(lèi)應(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>
>以下演示顯示了需要用戶(hù)名以及電子郵件地址，電話(huà)號(hào)碼或兩者兼而有之的示例聯(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)證類(lèi)實(shí)現(xiàn)。實(shí)例化對(duì)象時(shí)會(huì)傳遞表單元素?？梢栽O(shè)置可選的第二個(gè)參數(shù)：
當(dāng)用戶(hù)與之交互時(shí)， tay驗(yàn)證每個(gè)字段
false（默認(rèn)值）在第一個(gè)提交之後驗(yàn)證所有字段（此後發(fā)生字段級(jí)驗(yàn)證）
>
>
formvalidate對(duì)象監(jiān)視以下兩個(gè)：
• >
  • focusOut事件，然後檢查單個(gè)字段
  • 表格提交事件，然後檢查每個(gè)字段

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

  >

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

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

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

  形成技巧

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

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

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

  >

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

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

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

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

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

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

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

  >

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

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

  >如何在html5？

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

  >

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

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

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