?
This document uses PHP Chinese website manual Release
"search"類型的<input>元素是為用戶輸入搜索查詢而設(shè)計(jì)的文本字段。
<input type="search">
值 | 表示搜索字段中包含的值的DOMString。 |
|---|---|
活動(dòng) | 改變和輸入 |
支持的通用屬性 | 自動(dòng)完成，列表，最大長(zhǎng)度，最小長(zhǎng)度，模式，占位符，所需，大小。 |
IDL屬性 | 值 |
方法 | select（），setRangeText（），setSelectionRange（）。 |
值
該value屬性包含DOMString,表示搜索框中包含的值。您可以使用JavaScript中的屬性HTMLInputElement.value來(lái)檢索它。
mySearch.value;
如果輸入沒(méi)有驗(yàn)證約束，該值可以是任何文本字符串或空字符串（""）。
使用搜索的 inputs
search類型的<input>元素與text類型非常相似，只不過(guò)它們是專門(mén)用來(lái)處理搜索詞的。它們?cè)谛袨樯匣鞠嗤?，但風(fēng)格不同。
基本示例
<form> <div> <input type="search" id="mySearch" name="q"> <button>Search</button> </div></form>
呈現(xiàn)如下：
q是name搜索輸入的標(biāo)準(zhǔn)。提交時(shí)，發(fā)送到服務(wù)器的數(shù)據(jù) 鍵/值對(duì)將會(huì)是q=searchterm。你必須記得為你的輸入設(shè)置一個(gè)名字，否則什么都不會(huì)被提交。
search 和 text 類型之間的差異
主要的基本差異來(lái)自瀏覽器處理它們的方式。首先要注意的是，有些瀏覽器會(huì)顯示一個(gè)叉圖標(biāo)，如果需要，可以立即刪除搜索字詞。以下屏幕截圖來(lái)自Chrome：
另外，現(xiàn)代瀏覽器也傾向于自動(dòng)存儲(chǔ)先前在域中輸入的搜索項(xiàng)，然后當(dāng)在該域的搜索輸入中，執(zhí)行后續(xù)搜索時(shí)，之前的搜索項(xiàng)作為自動(dòng)完成的選項(xiàng)出現(xiàn)。這個(gè)截圖來(lái)自Firefox：
在這一點(diǎn)上，讓我們看看一些有用的技巧，你可以應(yīng)用到你的搜索表單。
設(shè)置占位符
你可以在你的搜索輸入中提供一個(gè)有用的占位符，它可以給出一個(gè)關(guān)于如何使用該placeholder屬性的提示?？聪旅娴睦樱?/p>
<form> <div> <input type="search" id="mySearch" name="q" placeholder="Search the site..."> <button>Search</button> </div></form>
你可以看到呈現(xiàn)的占位符如下：
搜索表單標(biāo)簽和輔助功能
搜索表單的一個(gè)問(wèn)題是其可訪問(wèn)性 —— 一般的模式是，您不提供標(biāo)簽（盡管您可能會(huì)提供一個(gè)放大鏡圖標(biāo)或類似的圖標(biāo)），因?yàn)樗阉鞅韱畏胖煤螅哪康耐ǔ?duì)于有視覺(jué)的用戶來(lái)說(shuō)相當(dāng)明顯的。
但是，這可能會(huì)導(dǎo)致屏幕閱讀器用戶感到困惑，因?yàn)樗麄儾粫?huì)有任何關(guān)于搜索輸入的口頭指示。不影響你的視覺(jué)設(shè)計(jì)而解決這個(gè)問(wèn)題的一個(gè)方法是，那就是使用WAI-ARIA功能：
<form>元素內(nèi) search值的role屬性，將導(dǎo)致屏幕閱讀器將表單作為搜索表單進(jìn)行通知。
如果這還不夠，可以在input上使用一個(gè) aria-label 屬性。該標(biāo)簽的目的是包含一個(gè)將由屏幕閱讀器讀出的描述性文字標(biāo)簽 - 基本上，這是一個(gè)非視覺(jué)等效的
<label>。
我們來(lái)看一個(gè)例子：
<form role="search"> <div> <input type="search" id="mySearch" name="q" placeholder="Search the site..." aria-label="Search through site content"> <button>Search</button> </div></form>
呈現(xiàn)如下：
與前面的例子沒(méi)有區(qū)別，但是屏幕閱讀器用戶可以獲得更多的信息。
注意：有關(guān)這些輔助功能的更多信息，請(qǐng)參閱路標(biāo)/標(biāo)志。
物理輸入元素大小
輸入框的物理尺寸可以使用size屬性進(jìn)行控制。有了它，您可以指定輸入框一次可以顯示的字符數(shù)。在這個(gè)例子中，例如，搜索框的寬度為30個(gè)字符：
<form> <div> <input type="search" id="mySearch" name="q" placeholder="Search the site..." size="30"> <button>Search</button> </div></form>
驗(yàn)證
search 類型的<input>元素具有text類型元素相同的驗(yàn)證特征。 搜索框一般不太可能使用驗(yàn)證功能。在許多情況下，用戶應(yīng)該被允許搜索任何東西，但是有幾種情況需要考慮，比如搜索已知格式的數(shù)據(jù)。
注：HTML表單驗(yàn)證不是 確保正確格式數(shù)據(jù)輸入的驗(yàn)證腳本替代品。有人很容易調(diào)整HTML，使他們繞過(guò)驗(yàn)證，或完全刪除它。也有人可能完全繞過(guò)你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無(wú)法驗(yàn)證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯(cuò)誤等等）輸入到您的數(shù)據(jù)庫(kù)時(shí)，可能會(huì)導(dǎo)致災(zāi)難。
關(guān)于造型的說(shuō)明
偽類可用于有效/無(wú)效的表單元素 - :valid和:invalid。在本節(jié)中，我們將使用下面的CSS，它將在包含有效值的輸入旁邊進(jìn)行檢查（打勾），并在包含無(wú)效值的輸入旁邊放置一個(gè)十字叉。
input:invalid ~ span:after {
content: '?';
padding-left: 5px;
position: absolute:}input:valid ~ span:after {
content: '?';
padding-left: 5px;
position: absolute:}該技術(shù)還需要在表單元素之后放置<span>元素，該元素充當(dāng)圖標(biāo)的持有者。這是必要的，因?yàn)槟承g覽器上的某些輸入類型不能很好地顯示直接放在它們后面的圖標(biāo)。
要求輸入
您可以使用該required屬性，簡(jiǎn)單地在表單提交通過(guò)之前，保證輸入一個(gè)所需值：
<form> <div> <input type="search" id="mySearch" name="q" placeholder="Search the site..." required> <button>Search</button> <span class="validity"></span> </div></form>
這呈現(xiàn)如下：
此外，如果您嘗試提交沒(méi)有輸入搜索詞的表單，瀏覽器將顯示一條消息。下面的例子來(lái)自Firefox：
當(dāng)您嘗試使用不同類型的無(wú)效數(shù)據(jù)提交表單時(shí)，會(huì)顯示不同的消息; 看下面的例子。
輸入值長(zhǎng)度
您可以使用minlength屬性為輸入的值指定最小字符長(zhǎng)度; 同樣，maxlength用來(lái)設(shè)置輸入值的最大長(zhǎng)度。
以下示例要求輸入的值為4-8個(gè)字符。
<form> <div> <label for="mySearch">Search for user</label> <input type="search" id="mySearch" name="q" placeholder="User IDs are 4–8 characters in length" required size="30" minlength="4" maxlength="8"> <button>Search</button> <span class="validity"></span> </div></form>
這呈現(xiàn)如下：
如果您嘗試提交少于4個(gè)字符的表單，則會(huì)給出相應(yīng)的錯(cuò)誤消息（這在瀏覽器中會(huì)有所不同）。如果您嘗試超過(guò)8個(gè)字符的長(zhǎng)度，瀏覽器不會(huì)讓你成功。
指定一個(gè)模式
我們來(lái)看一個(gè)例子。假設(shè)我們想要提供一個(gè)產(chǎn)品ID搜索表單，這些ID是否都是兩個(gè)字母后跟四個(gè)數(shù)字的代碼？下面的例子涵蓋了這種情況：
以下示例要求輸入的值為4-8個(gè)字符。
<form> <div> <label for="mySearch">Search for product by ID:</label> <input type="search" id="mySearch" name="q"
placeholder="two letters followed by four numbers" required
size="30" pattern="[A-z]{2}[0-9]{4}"> <button>Search</button> <span class="validity"></span> </div></form>規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
HTML生活標(biāo)準(zhǔn)在該規(guī)范中，'<input type ='search'>'的定義。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中'<input type ='search'>'的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 5.0 | ? | Unknown (4.0) | 10 | 10.62 | ? |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
|---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 4.0 (4.0) | ? | (Yes) | 3.1 |