<input type="email">

試一試

<label for="email">Enter your example.com email:</label>

<input type="email" id="email" pattern=".+@example\.com" size="30" required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

在表單提交之前，輸入值會自動驗證以確保它要麼為空，要麼是一個格式正確的電子郵件地址（或地址列表）。:valid 和 :invalid CSS 偽類會自動應用，以直觀地表示欄位的當前值是否是有效的電子郵件地址。

值

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

1. 空字串 ("")，表示使用者沒有輸入值或值已刪除。
2. 單個格式正確的電子郵件地址。這不一定意味著電子郵件地址存在，但它至少格式正確。這意味著 username@domain 或 username@domain.tld。當然，還有更多內容；請參閱驗證，瞭解與電子郵件地址驗證演算法匹配的正則表示式。
3. 當且僅當指定了 multiple 屬性時，該值可以是逗號分隔的格式正確的電子郵件地址列表。列表中每個地址的末尾和開頭空格都會被刪除。

有關如何驗證電子郵件地址以確保其格式正確的詳細資訊，請參閱驗證。

附加屬性

除了全域性屬性以及無論型別如何都適用於所有 <input> 元素的屬性之外，email 輸入還支援以下屬性。

list

列表屬性的值是位於同一文件中的 <datalist> 元素的 id。<datalist> 為此輸入提供了一個預定義值列表，以供使用者建議。列表中與 type 不相容的任何值都不會包含在建議選項中。提供的值是建議，而不是要求：使用者可以從這個預定義列表中選擇，也可以提供不同的值。

maxlength

使用者可以輸入到 email 輸入框中的最大字串長度（以 UTF-16 程式碼單元衡量）。這必須是一個 0 或更高的整數值。如果沒有指定 maxlength，或指定了無效值，則 email 輸入沒有最大長度。此值還必須大於或等於 minlength 的值。

如果欄位的文字值長度大於 maxlength UTF-16 程式碼單元長，則輸入將無法透過約束驗證。約束驗證僅在使用者更改值時應用。

minlength

使用者可以輸入到 email 輸入框中的最小字串長度（以 UTF-16 程式碼單元衡量）。這必須是一個非負整數值，小於或等於 maxlength 指定的值。如果沒有指定 minlength，或指定了無效值，則 email 輸入沒有最小長度。

如果欄位中輸入的文字長度少於 minlength UTF-16 程式碼單元長，則輸入將無法透過約束驗證。約束驗證僅在使用者更改值時應用。

multiple

一個布林屬性，如果存在，則表示使用者可以輸入一個由逗號和（可選的）空格字元分隔的多個電子郵件地址列表。有關示例，請參閱允許多個電子郵件地址，或有關更多詳細資訊，請參閱HTML 屬性：multiple。

pattern

當指定 pattern 屬性時，它是一個正則表示式，輸入框的 value 必須與該正則表示式匹配才能透過 約束驗證。它必須是有效的 JavaScript 正則表示式，如 RegExp 型別所使用，並記錄在我們的正則表示式指南中；在編譯正則表示式時指定 'u' 標誌，以便將模式視為 Unicode 碼點序列，而不是 ASCII。模式文本週圍不應指定正斜槓。

如果未指定或指定的模式無效，則不應用正則表示式，並且此屬性將完全被忽略。

有關詳細資訊和示例，請參閱模式驗證部分。

placeholder

placeholder 屬性是一個字串，它向用戶提供一個簡短的提示，說明欄位中預期哪種資訊。它應該是一個詞或短語，演示預期的資料型別，而不是解釋性訊息。文字不能包含回車或換行符。

如果控制元件的內容具有單一方向性（從左到右或從右到左），但需要以相反的方向性呈現佔位符，您可以使用 Unicode 雙向演算法格式字元來覆蓋佔位符內的方向性；有關更多資訊，請參閱如何使用 Unicode 控制元件處理雙向文字。

readonly

一個布林屬性，如果存在，則表示該欄位不能由使用者編輯。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement value 屬性來更改。

size

size 屬性是一個數字值，表示輸入欄位應該有多寬（以字元為單位）。該值必須是一個大於零的數字，預設值為 20。由於字元寬度不同，這可能不完全精確，不應依賴於此；最終的輸入可能比指定的字元數更窄或更寬，具體取決於字元和正在使用的字型（font 設定）。

這不限制使用者可以在欄位中輸入的字元數。它只指定一次大約可以看到多少個字元。要對輸入資料的長度設定上限，請使用maxlength 屬性。

使用電子郵件輸入框

電子郵件地址是網路上最常輸入的文字資料形式之一；它們用於登入網站、請求資訊、允許訂單確認、網路郵件等。因此，email 輸入型別可以大大簡化您作為 Web 開發人員的工作，因為它可以幫助您在構建電子郵件地址的使用者介面和邏輯時簡化工作。當您使用正確的 type 值 email 建立電子郵件輸入時，您將獲得自動驗證功能，確保輸入的文字至少格式正確，以便可能成為合法的電子郵件地址。這有助於避免使用者輸入錯誤地址或提供無效地址的情況。

然而，重要的是要注意，這不足以確保指定的文字是實際存在的、與網站使用者相符或以任何其他方式可接受的電子郵件地址。它確保欄位的值格式正確，可以作為電子郵件地址。

基本電子郵件輸入

目前，所有實現此元素的瀏覽器都將其實現為具有基本驗證功能的標準文字輸入欄位。然而，規範允許瀏覽器在此方面有很大的自由度。例如，該元素可以與使用者裝置的內建地址簿整合，以允許從該列表中選擇電子郵件地址。在其最基本的形式中，email 輸入可以像這樣實現

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

請注意，當為空或輸入單個格式正確的電子郵件地址時，它被認為是有效的，否則不被認為是有效的。透過新增 required 屬性，只允許格式正確的電子郵件地址；當輸入為空時，不再被認為是有效的。

允許多個電子郵件地址

透過新增 multiple 布林屬性，可以將輸入配置為接受多個電子郵件地址。

<input id="emailAddress" type="email" 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"

佔位符

有時，提供一個上下文提示來指示輸入資料應該採用什麼形式會很有幫助。如果頁面設計沒有為每個 <input> 提供描述性標籤，這可能尤其重要。這就是佔位符的作用。佔位符是一個值，它透過提供一個有效值的示例來演示 value 應該採取的形式，當元素的 value 為 "" 時，該示例顯示在編輯框內。一旦資料輸入到框中，佔位符就會消失；如果框被清空，佔位符會重新出現。

在這裡，我們有一個帶有佔位符 sophie@example.com 的 email 輸入框。請注意，當您操作編輯欄位的內容時，佔位符如何消失和重新出現。

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

控制輸入大小

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

物理輸入元素大小

輸入框的物理大小可以使用 size 屬性控制。透過它，您可以指定輸入框一次可以顯示的字元數。在此示例中，email 編輯框的寬度為 15 個字元

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

元素值長度

size 與輸入的電子郵件地址本身的長度限制是分開的，因此您可以使欄位適應小空間，同時仍然允許輸入更長的電子郵件地址字串。您可以使用 minlength 屬性為輸入的電子郵件地址指定最小長度（以字元為單位）；同樣，使用 maxlength 設定輸入的電子郵件地址的最大長度。

下面的示例建立了一個 32 個字元寬的電子郵件地址輸入框，要求內容不短於 3 個字元且不長於 64 個字元。

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

提供預設選項

使用值屬性提供單個預設值

與往常一樣，您可以透過設定 email 輸入框的 value 屬性來提供預設值

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

提供建議值

更進一步，您可以透過指定 list 屬性來提供使用者可以選擇的預設選項列表。這不會將使用者限制在這些選項中，但確實允許他們更快地選擇常用電子郵件地址。這還會為 autocomplete 提供提示。list 屬性指定 <datalist> 的 ID，該元素反過來包含每個建議值的一個 <option> 元素；每個 option 的 value 都是電子郵件輸入框的相應建議值。

<input type="email" size="40" list="defaultEmails" />

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

有了 <datalist> 元素及其 <option>，瀏覽器將提供指定的作為電子郵件地址的潛在值；這通常以彈出視窗或下拉選單的形式呈現，其中包含建議。雖然特定的使用者體驗可能因瀏覽器而異，但通常單擊編輯框會顯示建議電子郵件地址的下拉列表。然後，隨著使用者輸入，列表會進行過濾，以僅顯示匹配的值。每個輸入的字元都會縮小列表，直到使用者進行選擇或輸入自定義值。

驗證

email 輸入有兩種級別的內容驗證。首先，所有 <input> 都提供了標準級別的驗證，它會自動確保內容符合作為有效電子郵件地址的要求。但也有選項可以新增額外的過濾，以確保滿足您自己的特殊需求（如果有的話）。

基本驗證

瀏覽器自動提供驗證，以確保只有符合 Internet 電子郵件地址標準格式的文字才能輸入到輸入框中。瀏覽器使用與以下正則表示式等效的演算法

/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?)*$/i;

要了解有關表單驗證如何工作以及如何利用 :valid 和 :invalid CSS 屬性根據當前值是否有效來設定輸入樣式，請參閱 表單資料驗證。

模式驗證

如果您需要對輸入的電子郵件地址進行比“任何看起來像電子郵件地址的字串”更嚴格的限制，您可以使用 pattern 屬性來指定一個 正則表示式，該值必須匹配該正則表示式才能有效。如果指定了 multiple 屬性，則逗號分隔值列表中的每個單獨項都必須與 正則表示式匹配。

例如，假設您正在為 Best Startup Ever, Inc. 的員工構建一個頁面，讓他們可以聯絡 IT 部門尋求幫助。在我們的簡化表單中，使用者需要輸入他們的電子郵件地址和描述他們需要幫助的問題的訊息。我們希望確保使用者不僅提供有效的電子郵件地址，而且出於安全目的，我們要求該地址是內部公司電子郵件地址。

由於 email 型別的輸入會根據標準電子郵件地址驗證和指定的 pattern 進行驗證，因此您可以輕鬆實現這一點。讓我們看看如何做到這一點

body {
  font: 16px sans-serif;
}

.emailBox {
  padding-bottom: 20px;
}

.messageBox {
  padding-bottom: 20px;
}

label {
  line-height: 22px;
}

label::after {
  content: ":";
}

<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> 包含一個用於使用者電子郵件地址的 email 型別的 <input>，一個用於輸入 IT 訊息的 <textarea>，以及一個型別為 "submit" 的 <input>，用於建立提交表單的按鈕。每個文字輸入框都關聯著一個 <label>，以告知使用者需要輸入什麼。

讓我們仔細看看電子郵件地址輸入框。它的 size 和 maxlength 屬性都設定為 64，以顯示 64 個字元的電子郵件地址空間，並將實際輸入的字元數限制為最大 64 個。指定了 required 屬性，使其強制提供有效的電子郵件地址。

提供了一個適當的 placeholder——username@beststartupever.com——以演示什麼是有效條目。此字串既演示了應輸入電子郵件地址，又建議它應該是一個公司 beststartupever.com 帳戶。這除了使用 email 型別將驗證文字以確保其格式像電子郵件地址這一事實之外。如果輸入框中的文字不是電子郵件地址，您將收到一條錯誤訊息，如下所示

如果我們到此為止，我們至少會驗證合法的電子郵件地址。但我們希望更進一步：我們希望確保電子郵件地址實際上採用 [username]@beststartupever.com 的形式。這就是我們將使用 pattern 的地方。我們將 pattern 設定為 .+@beststartupever.com。這個正則表示式要求一個字串，該字串由至少一個任何型別的字元組成，然後是一個“@”，後面是域名“beststartupever.com”。

請注意，這甚至還不足以過濾有效的電子郵件地址；它允許諸如“ @beststartupever.com”（注意前面的空格）或“@@beststartupever.com”之類的東西，這兩者都是無效的。但是，瀏覽器會同時執行標準的電子郵件地址過濾器和我們的自定義模式來針對指定的文字。因此，我們最終得到一個驗證，它表示“確保這類似於一個有效的電子郵件地址，如果是，請確保它也是一個 beststartupever.com 地址。”

建議將 title 屬性與 pattern 一起使用。如果這樣做，title 必須描述模式。也就是說，它應該解釋資料應採用的格式，而不是任何其他資訊。這是因為 title 可能會作為驗證錯誤訊息的一部分顯示或朗讀。例如，瀏覽器可能會顯示訊息“輸入的文字與所需模式不匹配。”，然後是您指定的 title。如果您的 title 是“電子郵件地址”之類的，結果將是訊息“輸入的文字與所需模式不匹配。電子郵件地址”，這不太好。

這就是為什麼，我們指定字串“請只提供 Best Startup Ever 公司電子郵件地址”。這樣做，最終的完整錯誤訊息可能類似於“輸入的文字與所需模式不匹配。請只提供 Best Startup Ever 公司電子郵件地址。”

示例

這裡我們有一個 ID 為 emailAddress 的電子郵件輸入，它最多允許輸入 256 個字元。輸入框本身物理寬度為 64 個字元，並且在欄位為空時顯示文字 user@example.gov 作為佔位符。此外，透過使用 multiple 屬性，該框被配置為允許使用者輸入零個或多個由逗號分隔的電子郵件地址，如 允許多個電子郵件地址 中所述。最後，list 屬性包含 <datalist> 的 ID，其 <option> 元素指定了一組使用者可以選擇的建議值。

作為額外的補充，<label> 元素用於為電子郵件輸入框建立標籤，其 for 屬性引用了 <input> 元素的 emailAddress ID。透過以這種方式關聯這兩個元素，單擊標籤將使輸入元素獲得焦點。

<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>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

技術摘要

規範

瀏覽器相容性

另見

• HTML 表單指南
• <input>
• <input type="tel">
• <input type="url">
• 屬性
  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size