<input type="email">

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

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

1. 空字串 ("")，表示使用者未輸入值或已刪除該值。
2. 一個格式正確的電子郵件地址。這並不一定意味著電子郵件地址存在，但至少格式正確。簡單來說，這意味著 username@domain 或 username@domain.tld。當然，還有更多內容；有關匹配電子郵件地址驗證演算法的正則表示式，請參閱驗證。
3. 僅當指定了multiple 屬性時，該值才能為格式正確的逗號分隔的電子郵件地址列表。列表中每個地址的前導和尾隨空格將被刪除。

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

除了在所有<input> 元素上（無論其型別如何）都可使用的屬性之外，email 輸入還支援以下屬性。

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

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

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

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

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

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

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

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

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

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

如果控制元件的內容具有一個方向性（LTR 或 RTL），但需要以相反的方向顯示佔位符，則可以使用 Unicode 雙向演算法格式化字元來覆蓋佔位符中的方向性；有關更多資訊，請參閱 如何使用 Unicode 控制字元進行雙向文字處理。

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

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

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

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

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

提供建議值

更進一步，您可以透過指定 list 屬性，提供一個使用者可以選擇的使用者列表。這不會限制使用者只能選擇這些選項，但確實允許他們更快地選擇常用的電子郵件地址。這也為 autocomplete 提供了提示。list 屬性指定 <datalist> 的 ID，而 <datalist> 又包含每個建議值的 <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 電子郵件地址的標準格式匹配的文字才能輸入到輸入框中。瀏覽器使用等效於以下正則表示式的演算法

/^[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])?)*$/;

要了解有關表單驗證如何工作以及如何利用 :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> 用於使用者的電子郵件地址，一個 <textarea> 用於輸入他們發給 IT 的訊息，以及一個型別為 "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
• CSS 屬性的相容性