<input type="url">

試一試

<form>
  <label for="url">Enter an https:// URL:</label>
  <input
    type="url"
    name="url"
    id="url"
    placeholder="https://example.com"
    pattern="https://.*"
    size="30"
    required />
</form>

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

input,
label {
  margin: 0.4rem 0;
}

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

值

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

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

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

附加屬性

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

list

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

maxlength

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

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

minlength

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

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

pattern

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

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

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

placeholder

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

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

readonly

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

size

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

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

spellcheck

spellcheck 全域性屬性用於指示是否為元素啟用拼寫檢查。它可以用於任何可編輯的內容，但在此我們重點討論 spellcheck 在 <input> 元素上的具體用法。spellcheck 的允許值包括：

false

停用此元素的拼寫檢查。

true

啟用此元素的拼寫檢查。

"" (空字串) 或無值

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

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

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

使用 URL 輸入

當您使用正確的 type 值 url 建立 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 輸入框提供預設值。

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

提供建議值

更進一步，您可以提供一個預設選項列表供使用者選擇，方法是指定 list 屬性。這不會將使用者限制在這些選項中，但確實允許他們更快地選擇常用的 URL。這也會為 autocomplete 提供提示。list 屬性指定了 <datalist> 的 ID，該 ID 包含一個 <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 成為必填項

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

模式驗證

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

示例

URL 驗證

在此示例中，我們使用 required 屬性確保填寫了 URL，並使用 pattern 屬性將 URL 限制為 mozilla.org，以作說明。

HTML

在 url 輸入中，我們將 pattern 設定為 ".*\.mozilla\.org.*"。這個正則表示式驗證一個字串，該字串包含任意數量的字元，後跟 ".mozilla.org"，再後跟任意數量的字元。由於瀏覽器同時對指定文字執行標準的 URL 過濾器和我們的自定義模式，因此我們得到了一個驗證，即“確保這是一個有效的 URL，並且還包含 .mozilla.org。”

請注意，像 https://developer\.mozilla\.org.* 這樣的嚴格模式會更健壯，但在這種情況下，它會使 type="url" 屬性變得多餘。

title 屬性還為使用輔助技術的使用者描述了 pattern。

<form>
  <label for="myURL">
    Enter a url from this site:
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.mozilla\.org.*"
      title="URL should include mozilla.org" />
    <span class="validity"></span>
  </label>
  <button>Submit</button>
</form>

CSS

CSS 透過新增適當的 content 屬性提供視覺線索，向用戶顯示內容是 :valid 還是 :invalid，幷包含備用文字供有輔助技術的使用者使用。

input:focus:invalid {
  outline: 2px solid red;
}

input:focus:valid {
  outline: 2px solid green;
}

input + span {
  padding: 0 0.3rem;
}

input:invalid + span::after {
  content: "✖" / "Content is not valid";
  color: red;
}

input:valid + span::after {
  content: "✓" / "Content is valid";
  color: green;
}

結果

複製此頁面的 URL 並將其貼上到輸入欄位中，您將看到一個綠色邊框和綠色對勾。輸入任何不包含 mozilla.org 的其他 URL 或無效 URL，您將看到一個紅色邊框和紅色叉。

有關其他示例，請檢視 模式驗證 和 使用 URL 輸入 部分。

技術摘要

規範

瀏覽器相容性

另見

• HTML 表單指南
• <input>
• <input type="tel">
• <input type="email">