HTML 中文開發手冊

input type="url" (Elements) - HTML 中文開發手冊

"url"型別的<input>元素 用於讓使用者輸入和編輯URL。在提交表單之前，會自動驗證輸入值以確保其為空或正確格式的URL。在:valid與:invalidCSS偽類為適當的自動應用。

不支援型別的瀏覽器會"url"回退為標準"text"輸入。

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

值

該<input>元素的value屬性的值中包含DOMString這是自動確認為符合URL語法。更具體地說，有三種可能的值格式將通過驗證：

一個空字串（“”），表示使用者沒有輸入值或者該值已被刪除。一個正確的URL。這並不一定意味著URL地址存在，但它至少格式正確。簡而言之，這意味著"urlscheme://restofurl"。

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

使用網址輸入

當您使用正確的type值建立URL輸入時"url"，您將自動驗證輸入的文字是否至少以正確的格式顯示，以便可能是合法的URL。這有助於避免使用者錯誤輸入網址或提供無效網址的情況。

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

注意：記住使用者可以在幕後呼叫HTML也是至關重要的，所以你的站點不能用於任何安全目的的驗證。您必須在提供的文字可能有任何安全含義的任何事務的伺服器端驗證URL。

一個簡單的URL輸入

目前，所有實現此元素的瀏覽器都將其作為具有基本驗證功能的標準文字輸入欄位來實現。在最基本的形式中，電子郵件輸入可以像這樣實現：

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

請注意，如果輸入一個有效格式的URL地址，且該地址被認為是有效的，則認為它是有效的。通過新增required屬性，只允許有效格式的URL; 輸入在空時不再被認為是有效的。

這裡沒有什麼不可思議的事情發生。提交這個表單會導致以下資料被髮送到伺服器 - myURL=http%3A%2F%2Fwww.example.com。注意如何根據需要轉義字元。

Placeholders 佔位符

有時，提供關於輸入資料應該採取何種形式的上下文提示是有幫助的。如果頁面設計不為每個頁面提供描述性標籤，這可能尤其重要<input>。因此我們需要佔位符 placeholders。佔位符是演示的形式的值value應採取通過呈現一個有效的值，這被顯示在編輯框內部時，該元件的一個例子value是""。一旦資料輸入框中，佔位符消失; 如果該框被清空，佔位符重新出現。

在這裡，我們有"url"佔位符的輸入"http://www.example.com"。請注意佔位符在編輯欄位的內容時如何消失並重新出現。

<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的最大長度。

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

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

注：這些屬性也影響驗證 - 比最小/最大長度更短或更長的值將被分類為無效; 另外大多數瀏覽器不會讓你輸入比指定的最大長度更長的值。

提供預設選項

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

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

提供建議值

再往前走一步，您可以提供一個預設選項列表，使用者可以通過指定該list屬性來進行選擇。這不會限制使用者使用這些選項，但可以讓他們更快地選擇常用URL。這也提供了一些提示autocomplete。該list屬性指定a的ID <datalist>，而<option>每個建議值又包含一個元素; 每個option的value是網址輸入框相應的建議值。

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

<datalist id="defaultURLs">
  <option value="http://www.example.com">
  <option value="https://www.example.com">
  <option value="http://www.example.org">
  <option value="https://www.example.org">
</datalist>

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

驗證

有兩個級別的內容驗證可用於"url"輸入。首先，向所有人提供標準的驗證級別<input>，從而自動確保內容符合要求，成為有效的URL。但也可以選擇新增額外的過濾功能，以確保您的專業需求得到滿足（如果有的話）。

重要說明：HTML表單驗證 不能 取代伺服器端指令碼，以在被允許進入資料庫之前確保輸入的資料格式正確。有人很容易調整HTML，使他們繞過驗證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交資料到你的伺服器。如果您的伺服器端程式碼無法驗證其接收到的資料，那麼當格式不正確的資料（或資料太大，型別錯誤等等）輸入到您的資料庫時，可能會導致災難。

基本驗證

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

已知的與國際域名有關的規範問題以及HTML中的電子郵件地址的驗證。有關詳細資訊，請參閱W3C錯誤15489。

要求輸入URL

正如前面所提到的，在提交表單之前要做一個URL輸入（你不能把這個欄位留空），你只需要在輸入中包含 required 屬性

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

嘗試提交沒有輸入值的上述表單，看看會發生什麼。

格式驗證

如果要進一步限制輸入的數字以使其必須符合指定的模式才是有效的，則可以使用該pattern屬性，該屬性將必須匹配的正則表示式的輸入值作為其值。

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

由於型別的輸入"url"同時針對標準URL驗證和指定的驗證，所以pattern可以輕鬆實現。讓我們看看如何：

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input id="myURL" name="myURL" type="url"
           required pattern=".*\.myco\..*"
           title="URL should 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輸入我們設定pattern到".*\.myco\..*"。這個簡單的正則表示式請求一個字串，其中包含任意數量的字元，後跟一個點，後跟“myco”，後跟一個點，後跟任意數量的字元。而且，由於瀏覽器中執行這兩個標準的電子郵件地址過濾和我們對指定的文字，我們風與它說驗證自定義模式“確保這是一個有效的URL，並在MYCO領域。”

這並不完美，但對於這個簡單演示的要求來說已經足夠了。

建議使用該title屬性pattern。如果你這樣做，title 必須描述模式 - 它應該解釋資料應該採取什麼格式，而不是任何其他資訊。這是因為title可能會顯示或說出作為驗證錯誤訊息的一部分。例如，瀏覽器可能會顯示訊息“輸入的文字與所需的模式不匹配”​​。其次是你指定的title。如果您的title網址類似“網址”，則會顯示“輸入的文字與所需的模式URL不匹配”的訊息，這不是很好。

這就是為什麼我們需要指定字串“URL應該位於myco域”。通過這樣做，得到的完整的錯誤資訊可能類似於“輸入的文字不符合要求的模式。URL應該在myco域。

注意：如果在編寫驗證正則表示式時遇到麻煩，並且工作不正常，請檢查瀏覽器的控制檯; 那裡可能有幫助的錯誤訊息來幫助你解決這個問題。

例子

關於url型別輸入沒有太多的說法。檢查模式驗證和使用URL輸入部分的許多例子。

您也可以在GitHub上找到我們的模式驗證示例（也可以參看它現場執行）。

規範

瀏覽器相容性

  HTML 中文開發手冊