?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
"url"類型的<input>元素 用于讓用戶輸入和編輯URL。在提交表單之前，會自動驗證輸入值以確保其為空或正確格式的URL。在:valid與:invalidCSS偽類為適當(dāng)?shù)淖詣討?yīng)用。
不支持類型的瀏覽器會"url"回退為標準"text"輸入。
<input id="myURL" type="url">
值 | 表示URL的DOMString，或者為空 |
|---|---|
活動 | change , input |
支持的通用屬性 | autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size |
IDL屬性 | list, value, selectionEnd, selectionDirection |
方法 | select(), setRangeText(), setSelectionRange() |
值
該<input>元素的value屬性的值中包含DOMString這是自動確認為符合URL語法。更具體地說，有三種可能的值格式將通過驗證：
一個空字符串（“”），表示用戶沒有輸入值或者該值已被刪除。
一個正確的URL。這并不一定意味著URL地址存在，但它至少格式正確。簡而言之，這意味著
"urlscheme://restofurl"。
有關(guān)如何驗證URL以確保格式正確的詳細信息，請參閱驗證。
使用網(wǎng)址輸入
當(dāng)您使用正確的type值創(chuàng)建URL輸入時"url"，您將自動驗證輸入的文本是否至少以正確的格式顯示，以便可能是合法的URL。這有助于避免用戶錯誤輸入網(wǎng)址或提供無效網(wǎng)址的情況。
但是，重要的是要注意，這不足以確保指定的文本是實際存在的URL，與網(wǎng)站的用戶相對應(yīng)，或以任何其他方式可接受。它只是確保該字段的值被正確格式化為一個URL。
注意：記住用戶可以在幕后調(diào)用HTML也是至關(guān)重要的，所以你的站點不能用于任何安全目的的驗證。您必須在提供的文本可能有任何安全含義的任何事務(wù)的服務(wù)器端驗證URL。
一個簡單的URL輸入
目前，所有實現(xiàn)此元素的瀏覽器都將其作為具有基本驗證功能的標準文本輸入字段來實現(xiàn)。在最基本的形式中，電子郵件輸入可以像這樣實現(xiàn)：
<input id="myURL" name="myURL" type="url">
請注意，如果輸入一個有效格式的URL地址，且該地址被認為是有效的，則認為它是有效的。通過添加required屬性，只允許有效格式的URL; 輸入在空時不再被認為是有效的。
這里沒有什么不可思議的事情發(fā)生。提交這個表單會導(dǎo)致以下數(shù)據(jù)被發(fā)送到服務(wù)器 - myURL=http%3A%2F%2Fwww.example.com。注意如何根據(jù)需要轉(zhuǎn)義字符。
Placeholders 占位符
有時，提供關(guān)于輸入數(shù)據(jù)應(yīng)該采取何種形式的上下文提示是有幫助的。如果頁面設(shè)計不為每個頁面提供描述性標簽，這可能尤其重要<input>。因此我們需要占位符 placeholders。占位符是演示的形式的值value應(yīng)采取通過呈現(xiàn)一個有效的值，這被顯示在編輯框內(nèi)部時，該元件的一個例子value是""。一旦數(shù)據(jù)輸入框中，占位符消失; 如果該框被清空，占位符重新出現(xiàn)。
在這里，我們有"url"占位符的輸入"http://www.example.com"。請注意占位符在編輯字段的內(nèi)容時如何消失并重新出現(xiàn)。
<input id="myURL" name="myURL" type="url" placeholder="http://www.example.com">
控制輸入大小
您不僅可以控制輸入框的物理長度，還可以控制輸入文本自身允許的最小和最大長度。
物理輸入元素大小
輸入框的物理尺寸可以使用size屬性進行控制。有了它，您可以指定輸入框一次可以顯示的字符數(shù)。在這個例子中，例如，URL編輯框的寬度是30個字符：
<input id="myURL" name="myURL" type="url" size="30">
元素值的長度
該size是從所輸入的URL本身長度的限制分開。您可以使用minlength屬性為輸入的URL指定最小字符長度; 同樣，用于maxlength設(shè)置輸入的URL的最大長度。
下面的示例創(chuàng)建一個30個字符的URL地址輸入框，要求內(nèi)容不少于10個字符且不超過80個字符。
<input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80">
注：這些屬性也影響驗證 - 比最小/最大長度更短或更長的值將被分類為無效; 另外大多數(shù)瀏覽器不會讓你輸入比指定的最大長度更長的值。
提供默認選項
與往常一樣，您可以"url"通過設(shè)置其value屬性來為輸入框提供默認值：
<input id="myURL" name="myURL" type="url" value="http://www.example.com">
提供建議值
再往前走一步，您可以提供一個默認選項列表，用戶可以通過指定該list屬性來進行選擇。這不會限制用戶使用這些選項，但可以讓他們更快地選擇常用URL。這也提供了一些提示autocomplete。該list屬性指定a的ID <datalist>，而<option>每個建議值又包含一個元素; 每個option的value是網(wǎng)址輸入框相應(yīng)的建議值。
<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的潛在值; 這通常以包含建議的彈出菜單或下拉菜單的形式呈現(xiàn)。雖然特定的用戶體驗可能因瀏覽器而異，但通常在編輯框中單擊可呈現(xiàn)建議URL的下拉列表。然后，當(dāng)用戶鍵入時，列表被調(diào)整為僅顯示匹配的值。每個輸入的字符都會縮小列表直到用戶進行選擇或輸入自定義值。
驗證
有兩個級別的內(nèi)容驗證可用于"url"輸入。首先，向所有人提供標準的驗證級別<input>，從而自動確保內(nèi)容符合要求，成為有效的URL。但也可以選擇添加額外的過濾功能，以確保您的專業(yè)需求得到滿足（如果有的話）。
重要說明：HTML表單驗證 不能 取代服務(wù)器端腳本，以在被允許進入數(shù)據(jù)庫之前確保輸入的數(shù)據(jù)格式正確。有人很容易調(diào)整HTML，使他們繞過驗證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯誤等等）輸入到您的數(shù)據(jù)庫時，可能會導(dǎo)致災(zāi)難。
基本驗證
支持"url"輸入類型的瀏覽器會自動提供驗證，以確保只有與URL的標準格式匹配的文本才會輸入到輸入框中。
已知的與國際域名有關(guān)的規(guī)范問題以及HTML中的電子郵件地址的驗證。
要求輸入URL
正如前面所提到的，在提交表單之前要做一個URL輸入（你不能把這個字段留空），你只需要在輸入中包含 required 屬性
<form> <input id="myURL" name="myURL" type="url" required> <button>Submit</button> </form>
嘗試提交沒有輸入值的上述表單，看看會發(fā)生什么。
格式驗證
如果要進一步限制輸入的數(shù)字以使其必須符合指定的模式才是有效的，則可以使用該pattern屬性，該屬性將必須匹配的正則表達式的輸入值作為其值。
例如，假設(shè)您正在為Myco，Inc.的員工構(gòu)建一個支持頁面，如果其中一個頁面出現(xiàn)問題，他們可以聯(lián)系他們的IT部門尋求幫助。在我們的簡化形式中，用戶需要輸入有問題的頁面的URL和描述錯誤的消息。但是我們希望URL只有在輸入的URL位于myco域時才能成功驗證。
由于類型的輸入"url"同時針對標準URL驗證和指定的驗證，所以pattern可以輕松實現(xiàn)。讓我們看看如何：
<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輸入我們設(shè)置pattern到".*\.myco\..*"。這個簡單的正則表達式請求一個字符串，其中包含任意數(shù)量的字符，后跟一個點，后跟“myco”，后跟一個點，后跟任意數(shù)量的字符。而且，由于瀏覽器中運行這兩個標準的電子郵件地址過濾和我們對指定的文本，我們風(fēng)與它說驗證自定義模式“確保這是一個有效的URL，并在MYCO領(lǐng)域?！?/p>
這并不完美，但對于這個簡單演示的要求來說已經(jīng)足夠了。
建議使用該title屬性pattern。如果你這樣做，title 必須描述模式 - 它應(yīng)該解釋數(shù)據(jù)應(yīng)該采取什么格式，而不是任何其他信息。這是因為title可能會顯示或說出作為驗證錯誤消息的一部分。例如，瀏覽器可能會顯示消息“輸入的文本與所需的模式不匹配”。其次是你指定的title。如果您的title網(wǎng)址類似“網(wǎng)址”，則會顯示“輸入的文本與所需的模式URL不匹配”的消息，這不是很好。
這就是為什么我們需要指定字符串“URL應(yīng)該位于myco域”。通過這樣做，得到的完整的錯誤信息可能類似于“輸入的文本不符合要求的模式。URL應(yīng)該在myco域。
注意：如果在編寫驗證正則表達式時遇到麻煩，并且工作不正常，請檢查瀏覽器的控制臺; 那里可能有幫助的錯誤消息來幫助你解決這個問題。
例子
關(guān)于url類型輸入沒有太多的說法。檢查模式驗證和使用URL輸入部分的許多例子。
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
HTML Living Standard該規(guī)范中的<input type =“url”>“的定義。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中的<input type =“url”>“的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 10 | 10.62 | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? | (Yes) | (Yes) |