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

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

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

值

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

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

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

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

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

使用電子郵件輸入

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

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

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

簡單的電子郵件輸入

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

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

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

允許多個電子郵件地址

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

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

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

何時"multiple"使用，該值被允許為空。

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

• ""

• "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"

占位符

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

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

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

控制輸入大小

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

輸入元素大小

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

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

元素值的長度

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

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

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

提供默認(rèn)選項

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

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

提供建議值

更進(jìn)一步，可以提供一個默認(rèn)選項列表，用戶可以通過指定該list屬性來選擇。這不會限制用戶使用這些選項，但可以讓他們更快地選擇常用電子郵件地址。這也提供了一些提示autocomplete。該list屬性指定a的ID <datalist>，而<option>每個建議值又包含一個元素; 每個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)。雖然具體的用戶體驗可能因瀏覽器而異，但通常在編輯框中單擊可顯示建議電子郵件地址的下拉列表。然后，當(dāng)用戶鍵入時，列表被調(diào)整為僅顯示匹配的值。每個輸入的字符都會縮小列表直到用戶進(jìn)行選擇或輸入自定義值。

Validation

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

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

基本驗證

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

/^[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ì)了解表單驗證如何工作，以及如何利用:valid和:invalidCSS屬性來根據(jù)當(dāng)前值是否有效來設(shè)置輸入的樣式。

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

模式驗證

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

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

由于類型輸入"email"驗證標(biāo)準(zhǔn)電子郵件地址驗證和指定pattern，您可以輕松實現(xià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>包含了一個<input>類型的"email"用戶的電子郵件地址，<textarea>輸入自己的消息將IT和<input>類型"submit"，它創(chuàng)建了一個按鈕，提交表單。每個文本輸入框都有一個<label>關(guān)聯(lián)的，讓用戶知道他們的期望。

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

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

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

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

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

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

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

例子

這里我們有一個電子郵件輸入，ID "emailAddress"最多可以有256個字符。輸入框本身在物理上是64個字符，并且"user@example.gov"在字段為空時將該文本顯示為占位符。另外，通過使用該multiple屬性，該框被配置為允許用戶輸入零個或多個電子郵件地址，以逗號分隔，如允許多個電子郵件地址中所述。作為最后的觸摸，則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ī)范

瀏覽器兼容性