<input>"email"用于輸入和編輯電子郵件地址的類型元素，或者如果multiple指定了屬性，則使用電子郵件地址列表。在提交表單之前，輸入值會(huì)被自動(dòng)驗(yàn)證，以確保它是空的或正確格式的電子郵件地址（或地址列表）。在:valid與:invalidCSS偽類為適當(dāng)?shù)淖詣?dòng)應(yīng)用。

不支持類型的瀏覽器會(huì)"email"回退為標(biāo)準(zhǔn)"text"輸入。

<input id="emailAddress" type="email">

值

該<input>元素的value屬性值包含一個(gè)DOMString自動(dòng)驗(yàn)證符合電子郵件語法。更具體地說，有三種可能的值格式將通過驗(yàn)證：

1. 一個(gè)空字符串（“”），表示用戶沒有輸入值或者該值已被刪除。

1. 一個(gè)正確的電子郵件地址。這并不一定意味著電子郵件地址存在，但它至少格式正確。簡而言之，這意味著"username@subdomain.domain"。當(dāng)然，還有更多呢？請(qǐng)參閱regexp與電子郵件地址驗(yàn)證算法相匹配的驗(yàn)證。

1. 當(dāng)且僅當(dāng)multiple指定屬性時(shí)，該值可以是由逗號(hào)分隔的正確形成的電子郵件地址的列表。從列表中的每個(gè)地址中刪除任何結(jié)尾和前導(dǎo)空格。

有關(guān)如何驗(yàn)證電子郵件地址以確保格式正確的詳細(xì)信息，請(qǐng)參閱驗(yàn)證。

使用電子郵件輸入

電子郵件地址是網(wǎng)絡(luò)上輸入最頻繁的文本數(shù)據(jù)形式之一; 它們?cè)诘卿浘W(wǎng)站，請(qǐng)求信息時(shí)，允許訂單確認(rèn)，網(wǎng)絡(luò)郵件等等時(shí)使用。因此，"email"輸入類型可以使您作為Web開發(fā)人員的工作更簡單，因?yàn)樗梢詭椭跇?gòu)建電子郵件地址的用戶界面和邏輯時(shí)簡化工作。當(dāng)您創(chuàng)建具有適當(dāng)type值的電子郵件輸入時(shí)"email"，您將自動(dòng)驗(yàn)證輸入的文本是否至少以正確的格式顯示，可能是合法的電子郵件地址。這可以幫助避免用戶錯(cuò)誤輸入地址或提供無效地址的情況。

但是，重要的是要注意，這不足以確保指定的文本是實(shí)際存在的電子郵件地址，與網(wǎng)站的用戶相對(duì)應(yīng)，或者以其他方式可以接受。它只是確保該字段的值被正確格式化為電子郵件地址。

記住用戶可以在幕后修改你的HTML也是至關(guān)重要的，所以你的網(wǎng)站不能為了任何安全的目的而使用這個(gè)驗(yàn)證。您必須在提供的文本可能有任何安全含義的任何交易的服務(wù)器端驗(yàn)證電子郵件地址。

簡單的電子郵件輸入

目前，所有實(shí)現(xiàn)此元素的瀏覽器都將其作為具有基本驗(yàn)證功能的標(biāo)準(zhǔn)文本輸入字段來實(shí)現(xiàn)。然而，規(guī)范確實(shí)允許瀏覽器在這個(gè)緯度。例如，該元素可以與用戶設(shè)備的內(nèi)置地址簿集成，以允許從該列表中選擇電子郵件地址。因此，在其最基本的形式中，電子郵件輸入可以這樣實(shí)現(xiàn)：

<input id="emailAddress" type="email">

請(qǐng)注意，如果輸入一個(gè)有效格式的電子郵件地址并且沒有被視為有效，則認(rèn)為它是有效的。通過添加required屬性，只允許有效形成的電子郵件地址; 輸入在空時(shí)不再被認(rèn)為是有效的。

允許多個(gè)電子郵件地址

通過添加multiple布爾屬性，可以將輸入配置為接受多個(gè)電子郵件地址。

<input id="emailAddress" type="email" multiple>

現(xiàn)在，當(dāng)輸入單個(gè)電子郵件地址時(shí)，或者以逗號(hào)分隔的任意數(shù)量的電子郵件地址以及可選的一些空白字符數(shù)時(shí)，該輸入被認(rèn)為是有效的。

何時(shí)"multiple"使用，該值被允許為空。

"multiple"指定有效字符串時(shí)的一些示例：

• ""

• "me@example"

• "me@example.org"

• "me@example.org,you@example.org"

• "me@example.org, you@example.org"

• "me@example.org,you@example.org,    us@example.org"

這些是無效字符串的一些例子：

• ","

• "me"

• "me@example.org you@example.org"

占位符

有時(shí)，提供關(guān)于輸入數(shù)據(jù)應(yīng)該采取何種形式的上下文提示是有幫助的。如果頁面設(shè)計(jì)沒有為每個(gè)頁面提供描述性標(biāo)簽，這可能尤其重要<input>。這是占位符進(jìn)來。占位符是演示的形式的值value應(yīng)采取通過呈現(xiàn)一個(gè)有效的值，這被顯示在編輯框內(nèi)部時(shí)，該元件的一個(gè)例子value是""。一旦數(shù)據(jù)輸入框中，占位符消失; 如果該框被清空，占位符重新出現(xiàn)。

在這里，我們有"email"占位符的輸入"sophie@example.com"。請(qǐng)注意占位符在編輯字段的內(nèi)容時(shí)如何消失并重新出現(xiàn)。

<input type="email" placeholder="sophie@example.com">

控制輸入大小

您不僅可以控制輸入框的物理長度，還可以控制輸入文本自身允許的最小和最大長度。

輸入元素大小

輸入框的物理尺寸可以使用size屬性進(jìn)行控制。有了它，您可以指定輸入框一次可以顯示的字符數(shù)。在本例中，例如，電子郵件編輯框的寬度為15個(gè)字符：

<input type="email" size="15">

元素值的長度

該size是從輸入電子郵件地址本身長度不限分開，這樣就可以有場(chǎng)適合在狹小的空間，同時(shí)仍允許輸入較長的電子郵件地址字符串。您可以使用minlength屬性為輸入的電子郵件地址指定最小字符長度; 同樣，用于maxlength設(shè)置輸入的電子郵件地址的最大長度。

以下示例創(chuàng)建一個(gè)32個(gè)字符的電子郵件地址輸入框，要求內(nèi)容不少于3個(gè)字符且不超過64個(gè)字符。

<input type="email" size="32" minlength="3" maxlength="64">

提供默認(rèn)選項(xiàng)

與往常一樣，您可以"email"通過設(shè)置其value屬性來為輸入框提供默認(rèn)值：

<input type="email" value="default@example.com"

提供建議值

更進(jìn)一步，可以提供一個(gè)默認(rèn)選項(xiàng)列表，用戶可以通過指定該list屬性來選擇。這不會(huì)限制用戶使用這些選項(xiàng)，但可以讓他們更快地選擇常用電子郵件地址。這也提供了一些提示autocomplete。該list屬性指定a的ID <datalist>，而<option>每個(gè)建議值又包含一個(gè)元素; 每個(gè)option的value是email輸入框?qū)?yīng)的建議值。

<input type="email" size="40" list="defaultEmails"><datalist id="defaultEmails">  <option value="jbond007@mi6.defence.gov.uk">  <option value="jbourne@unknown.net">  <option value="nfury@shield.org">  <option value="tony@starkindustries.com">  <option value="hulk@grrrrrrrr.arg"></datalist>

使用<datalist>元素及其<option>位置，瀏覽器將提供指定的值作為電子郵件地址的潛在值; 這通常以包含建議的彈出菜單或下拉菜單的形式呈現(xiàn)。雖然具體的用戶體驗(yàn)可能因?yàn)g覽器而異，但通常在編輯框中單擊可顯示建議電子郵件地址的下拉列表。然后，當(dāng)用戶鍵入時(shí)，列表被調(diào)整為僅顯示匹配的值。每個(gè)輸入的字符都會(huì)縮小列表直到用戶進(jìn)行選擇或輸入自定義值。

Validation

有兩個(gè)級(jí)別的內(nèi)容驗(yàn)證可用于"email"輸入。首先，提供給所有人<input>的標(biāo)準(zhǔn)驗(yàn)證級(jí)別，自動(dòng)確保內(nèi)容符合要求是一個(gè)有效的電子郵件地址。但也可以選擇添加額外的過濾功能，以確保您的專業(yè)需求得到滿足（如果有的話）。

HTML表單驗(yàn)證是不為腳本，確保輸入的數(shù)據(jù)是正確的格式的替代品。有人很容易調(diào)整HTML，使他們繞過驗(yàn)證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗(yàn)證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯(cuò)誤等等）輸入到您的數(shù)據(jù)庫時(shí)，可能會(huì)導(dǎo)致災(zāi)難。

基本驗(yàn)證

支持"email"輸入類型的瀏覽器會(huì)自動(dòng)提供驗(yàn)證，以確保只有與Internet電子郵件地址的標(biāo)準(zhǔn)格式匹配的文本才會(huì)輸入到輸入框中。實(shí)現(xiàn)規(guī)范的瀏覽器應(yīng)該使用與下面的正則表達(dá)式等價(jià)的算法：

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

要詳細(xì)了解表單驗(yàn)證如何工作，以及如何利用:valid和:invalidCSS屬性來根據(jù)當(dāng)前值是否有效來設(shè)置輸入的樣式。

已知的與國際域名有關(guān)的規(guī)范問題以及HTML中的電子郵件地址的驗(yàn)證。有關(guān)詳細(xì)信息，請(qǐng)參閱W3C錯(cuò)誤15489。

模式驗(yàn)證

如果您需要輸入的電子郵件地址不僅限于“任何類似于電子郵件地址的字符串”，還可以使用該pattern屬性指定值必須匹配才能使值有效的正則表達(dá)式。如果multiple指定了屬性，則逗號(hào)分隔的值列表中的每個(gè)單獨(dú)項(xiàng)目都必須匹配regexp。

例如，假設(shè)您正在為Best Startup Ever，Inc.的員工建立一個(gè)頁面，讓他們聯(lián)系他們的IT部門尋求幫助。在我們的簡化形式中，用戶需要輸入他們的電子郵件地址和描述他們需要幫助的問題的消息。我們希望確保用戶不僅提供有效的電子郵件地址，而且為了安全起見，我們要求地址是公司內(nèi)部的電子郵件地址。

由于類型輸入"email"驗(yàn)證標(biāo)準(zhǔn)電子郵件地址驗(yàn)證和指定pattern，您可以輕松實(shí)現(xiàn)這一點(diǎn)。讓我們看看如何：

<form> <div class="emailBox">   <label for="emailAddress">Your email address</label><br>   <input id="emailAddress" type="email" size="64" maxLength="64" required
          placeholder="username@beststartupever.com" pattern=".+@beststartupever.com"
          title="Please provide only a Best Startup Ever corporate email address"> </div> <div class="messageBox">   <label for="message">Request</label><br>   <textarea id="message" cols="80" rows="8" required
             placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea> </div>  <input type="submit" value="Send Request"></form>

我們<form>包含了一個(gè)<input>類型的"email"用戶的電子郵件地址，<textarea>輸入自己的消息將IT和<input>類型"submit"，它創(chuàng)建了一個(gè)按鈕，提交表單。每個(gè)文本輸入框都有一個(gè)<label>關(guān)聯(lián)的，讓用戶知道他們的期望。

讓我們仔細(xì)看看電子郵件地址輸入框。其屬性size和maxlength屬性都設(shè)置為64，以顯示64個(gè)字符的電子郵件地址的空間，并將實(shí)際輸入的字符數(shù)限制為最多64個(gè)。required指定該屬性，使得強(qiáng)制使用有效的電子郵件地址提供。

placeholder提供了一個(gè)適當(dāng)?shù)膬?nèi)容"username@beststartupever.com"- 來說明什么是有效的條目。該字符串表明應(yīng)該輸入電子郵件地址，并建議它應(yīng)該是企業(yè)beststartpepever.com帳戶。這是除了使用類型"email"將驗(yàn)證文本，以確保它的格式如電子郵件地址。如果輸入框中的文本不是電子郵件地址，則會(huì)顯示如下所示的錯(cuò)誤消息：

如果我們放棄這些，我們至少會(huì)在合法的電子郵件地址上進(jìn)行驗(yàn)證。但是我們想要更進(jìn)一步：我們要確保電子郵件地址實(shí)際上是以“ 用戶名 @ beststartupever.com” 的形式。這是我們將使用的地方pattern。我們?cè)O(shè)置pattern來".+@beststartupever.com"。這個(gè)簡單的正則表達(dá)式請(qǐng)求一個(gè)至少包含一個(gè)字符的字符串，然后是一個(gè)“@”，后跟一個(gè)域名“beststartpepever.com”。

請(qǐng)注意，這對(duì)于有效的電子郵件地址來說還不夠接近足夠的過濾器。它會(huì)允許諸如“@ beststartupever.com”（注意領(lǐng)先空間）或“@@ beststartupever.com”，這兩者都不是有效的。但是，瀏覽器會(huì)根據(jù)指定的文本運(yùn)行標(biāo)準(zhǔn)電子郵件地址過濾器和我們的自定義模式。結(jié)果，我們結(jié)束了一個(gè)驗(yàn)證，說：“確保這是一個(gè)有效的電子郵件地址，如果是，請(qǐng)確保它也是一個(gè)beststartpepever.com地址。

建議使用該title屬性pattern。如果你這樣做，title 必須描述模式。也就是說，它應(yīng)該解釋數(shù)據(jù)的格式，而不是其他信息。這是因?yàn)?code>title可能會(huì)顯示或說出作為驗(yàn)證錯(cuò)誤消息的一部分。例如，瀏覽器可能會(huì)顯示消息“輸入的文本與所需的模式不匹配”。其次是你指定的title。如果您的title電子郵件地址類似于“電子郵件地址”，則會(huì)顯示“輸入的文本不符合所需的模式，電子郵件地址”的信息，這并不是很好。

這就是為什么我們需要指定字符串“請(qǐng)只提供最好的企業(yè)電子郵件地址啟動(dòng)”這樣做會(huì)導(dǎo)致完整的錯(cuò)誤信息，例如“輸入的文本不符合要求的模式，請(qǐng)只提供最好的企業(yè)郵箱地址“。

如果在編寫驗(yàn)證正則表達(dá)式時(shí)遇到麻煩，并且工作不正常，請(qǐng)檢查瀏覽器的控制臺(tái); 那里可能有幫助的錯(cuò)誤消息來幫助你解決這個(gè)問題。

例子

這里我們有一個(gè)電子郵件輸入，ID "emailAddress"最多可以有256個(gè)字符。輸入框本身在物理上是64個(gè)字符，并且"user@example.gov"在字段為空時(shí)將該文本顯示為占位符。另外，通過使用該multiple屬性，該框被配置為允許用戶輸入零個(gè)或多個(gè)電子郵件地址，以逗號(hào)分隔，如允許多個(gè)電子郵件地址中所述。作為最后的觸摸，則list屬性用來指定的所述ID <datalist>，其<option>s指定的一組建議值的用戶可以從中選擇的。

As an added touch, the <label> element is used to establish a label for the email entry box, with its for attribute referencing the "emailAddress" ID of the <input> element. By associating the two elements in this way, clicking on the label will focus the input element.

<label for="emailAddress">Email</label><br/><input id="emailAddress" type="email" placeholder="user@example.gov"
       list="defaultEmails" size="64" maxlength="256" multiple><datalist id="defaultEmails">  <option value="jbond007@mi6.defence.gov.uk">  <option value="jbourne@unknown.net">  <option value="nfury@shield.org">  <option value="tony@starkindustries.com">  <option value="hulk@grrrrrrrr.arg"></datalist>

規(guī)范

瀏覽器兼容性