<input type="url">

在提交表單之前，會自動驗證輸入值以確保其為空或格式正確的 URL。根據情況自動應用:valid和:invalid CSS 偽類，以直觀地指示欄位的當前值是否為有效的 URL。

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

1. 空字串("")表示使用者未輸入值或已刪除值。
2. 一個格式正確的絕對 URL。這並不一定意味著 URL 地址存在，但至少格式正確。即使輸入的urlscheme不存在，匹配urlscheme://restofurl的條目也可能是有效的。

有關如何驗證 URL 以確保其格式正確的詳細資訊，請參閱驗證。

除了適用於所有<input>元素（無論其型別如何）的屬性外，url輸入還支援以下屬性。

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

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

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

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

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

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

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

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

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

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

readonly 布林屬性（如果存在）表示使用者無法編輯此欄位。但是，其 value 仍然可以透過 JavaScript 程式碼直接設定 HTMLInputElement 的 value 屬性來更改。

size 屬性是一個數值，指示輸入欄位的寬度應為多少個字元。該值必須大於零，預設值為 20。由於字元寬度各不相同，因此這可能不完全準確，並且不應依賴於此；根據字元和字型（使用中的 font 設定），生成的輸入可能比指定的字元數窄或寬。

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

spellcheck 全域性屬性用於指示是否為元素啟用拼寫檢查。它可以用於任何可編輯內容，但在這裡我們考慮與在 <input> 元素上使用 spellcheck 相關的細節。spellcheck 的允許值為

false

停用此元素的拼寫檢查。

true

啟用此元素的拼寫檢查。

""（空字串）或無值

遵循元素的拼寫檢查預設行為。這可能基於父元素的 spellcheck 設定或其他因素。

如果輸入欄位未設定 readonly 屬性且未停用，則可以啟用其拼寫檢查。

如果 使用者代理 的首選項覆蓋了設定，則讀取 spellcheck 返回的值可能無法反映控制元件中拼寫檢查的實際狀態。

某些瀏覽器還提供以下非標準屬性。一般來說，除非迫不得已，否則應避免使用它們。

autocorrect 屬性是 Safari 的擴充套件，它是一個字串，指示在使用者編輯此欄位時是否啟用自動更正。允許的值為

on

啟用自動更正錯別字，以及處理任何已配置的文字替換。

off

停用自動更正和文字替換。

當使用正確的 type 值 url 建立 URL 輸入時，會獲得自動驗證，以確保輸入的文字至少具有正確的格式，才能成為有效的 URL。這有助於避免使用者誤輸網站地址或提供無效地址的情況。

但是，務必注意，這不足以確保指定的文字是實際存在的 URL，與網站使用者相對應，或以任何其他方式可接受。它確保欄位的值格式正確，可以作為 URL。

此元素作為具有基本驗證功能的標準文字輸入欄位實現。在最基本的形式中，URL 輸入可以這樣實現

<input id="myURL" name="myURL" type="url" />

請注意，當為空且輸入單個格式正確的 URL 地址時，它被視為有效，但在其他情況下則不被視為有效。透過新增 required 屬性，僅允許格式正確的 URL；當為空時，輸入不再被視為有效。

這裡沒有發生任何神奇的事情。提交此表單將導致以下資料傳送到伺服器：myURL=http%3A%2F%2Fwww.example.com。請注意，字元是如何根據需要進行轉義的。

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

這裡，我們有一個帶有佔位符 http://www.example.com 的 url 輸入。請注意，當您操作編輯欄位的內容時，佔位符是如何消失和重新出現的。

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

您可以控制輸入框的物理長度以及允許的輸入文字的最小和最大長度。

物理輸入元素大小

可以使用 size 屬性控制輸入框的物理大小。使用它，您可以指定輸入框一次可以顯示多少個字元。例如，在此示例中，url 編輯框的寬度為 30 個字元

<input id="myURL" name="myURL" type="url" size="30" />

元素值長度

size 與輸入 URL 本身的長度限制是分開的。您可以使用 minlength 屬性指定輸入 URL 的最小長度（以字元為單位）；類似地，使用 maxlength 設定輸入 URL 的最大長度。如果 maxLength 超過 size，則輸入框的內容將根據需要滾動以顯示當前選擇或插入點，因為內容正在被操作。

下面的示例建立了一個 30 個字元寬的 URL 地址輸入框，要求內容不少於 10 個字元，不多於 80 個字元。

<input
  id="myURL"
  name="myURL"
  type="url"
  size="30"
  minlength="10"
  maxlength="80" />

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

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

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

提供建議值

更進一步，您可以透過指定 list 屬性提供使用者可以選擇的一系列預設選項。這不會限制使用者只能選擇這些選項，但允許他們更快地選擇常用 URL。這也會為 autocomplete 提供提示。list 屬性指定 <datalist> 的 ID，而 <datalist> 又包含每個建議值的 <option> 元素；每個 option 的 value 是 URL 輸入框對應的建議值。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://mdn.club.tw/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

有了 <datalist> 元素及其 <option>，瀏覽器將提供指定的數值作為 URL 的潛在值；這通常以彈出視窗或包含建議的下拉選單的形式呈現。雖然具體的使用者體驗可能因瀏覽器而異，但通常點選編輯框會顯示一個建議 URL 的下拉選單。然後，當用戶輸入時，列表會調整為僅顯示匹配的值。每個輸入的字元都會縮小列表範圍，直到使用者進行選擇或輸入自定義值。

使用標籤表示建議值

您可以選擇在您的一個或所有 <option> 元素上包含 label 屬性以提供文字標籤。某些瀏覽器可能只顯示標籤，而其他瀏覽器可能同時顯示標籤和 URL。

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://mdn.club.tw/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

url 輸入提供了兩個級別的內容驗證。首先，是提供給所有 <input> 的標準驗證級別，它會自動確保內容滿足成為有效 URL 的要求。但如果需要，您還可以選擇新增其他篩選以確保滿足您自己的特殊需求。

支援 url 輸入型別的瀏覽器會自動提供驗證，以確保僅將與 URL 標準格式匹配的文字輸入到輸入框中。

URL 的語法相當複雜。它由 WHATWG 的 URL 生存標準 定義，並在我們的文章 什麼是 URL？ 中對新手進行了描述。

如前所述，要使 URL 輸入在表單提交前成為必填項（您不能將欄位留空），您只需要在輸入中包含 required 屬性即可。

<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>Submit</button>
</form>

嘗試提交上面表單，不輸入任何值，看看會發生什麼。

如果需要對輸入的 URL 進行比“任何看起來像 URL 的字串”更嚴格的限制，則可以使用 pattern 屬性指定值必須匹配的 正則表示式，才能使該值有效。

例如，假設您正在為 Myco, Inc. 的員工構建一個支援頁面，如果其中一個頁面出現問題，該頁面將允許他們聯絡其 IT 部門尋求幫助。在我們簡化的表單中，使用者需要輸入出現問題的頁面的 URL 和描述錯誤內容的訊息。但我們希望 URL 只有在輸入的 URL 位於 Myco 域中時才能成功驗證。

由於 url 型別的輸入會根據標準 URL 驗證和指定的 pattern 進行驗證，因此您可以使用正則表示式來實現此功能。讓我們看看如何實現

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.myco\..*"
      title="The URL must be in a Myco domain" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">What is the problem?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

首先，指定了 required 屬性，這使得必須提供有效的 URL。

其次，在 url 輸入中，我們將 pattern 設定為 ".*\.myco\..*"。此正則表示式請求一個字串，該字串包含任意數量的字元，後跟一個點，後跟“myco”，後跟一個點，後跟任意數量的字元。因為瀏覽器會同時對指定的文字執行標準 URL 過濾器和我們的自定義模式，所以我們最終得到了一個驗證，即“確保這是一個有效的 URL，並且也在 Myco 域中”。

這並不完美，但對於此基本演示的要求來說已經足夠了。

建議將 title 屬性與 pattern 一起使用。如果這樣做，title 必須描述模式；它應該解釋資料應採用什麼格式，而不是任何其他資訊。這是因為 title 可能會顯示或作為驗證錯誤訊息的一部分被朗讀。例如，瀏覽器可能會顯示訊息“輸入的文字與所需模式不匹配。”，後跟您指定的 title。如果您的 title 是“URL”之類的內容，則結果訊息將是“輸入的文字與所需模式不匹配。URL”，這不是良好的使用者體驗。

因此，我們改為指定字串“URL 必須在 myco 域中”。透過這樣做，生成的完整錯誤訊息可能是“輸入的文字與所需模式不匹配。URL 應在 myco 域中”。

關於 url 型別輸入沒有太多其他內容需要說明；請檢視 模式驗證 和 使用 URL 輸入 部分以獲取大量示例。

您還可以找到我們在 GitHub 上的模式驗證示例（請參閱 正在執行的示例）。

• HTML 表單指南
• <input>
• <input type="tel">
• <input type="email">
• CSS 屬性的相容性