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