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