?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
"search"類型的<input>元素是為用戶輸入搜索查詢而設(shè)計的文本字段。
<input type="search">
值 | 表示搜索字段中包含的值的DOMString。 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 自動完成，列表，最大長度，最小長度，模式，占位符，所需，大小。 |
IDL屬性 | 值 |
方法 | select（），setRangeText（），setSelectionRange（）。 |
值
該value屬性包含DOMString,表示搜索框中包含的值。您可以使用JavaScript中的屬性HTMLInputElement.value來檢索它。
mySearch.value;
如果輸入沒有驗證約束，該值可以是任何文本字符串或空字符串（""）。
使用搜索的 inputs
search類型的<input>元素與text類型非常相似，只不過它們是專門用來處理搜索詞的。它們在行為上基本相同，但風(fēng)格不同。
基本示例
<form> <div> <input type="search" id="mySearch" name="q"> <button>Search</button> </div></form>
呈現(xiàn)如下：
q是name搜索輸入的標(biāo)準(zhǔn)。提交時，發(fā)送到服務(wù)器的數(shù)據(jù) 鍵/值對將會是q=searchterm。你必須記得為你的輸入設(shè)置一個名字，否則什么都不會被提交。
search 和 text 類型之間的差異
主要的基本差異來自瀏覽器處理它們的方式。首先要注意的是，有些瀏覽器會顯示一個叉圖標(biāo)，如果需要，可以立即刪除搜索字詞。以下屏幕截圖來自Chrome：
另外，現(xiàn)代瀏覽器也傾向于自動存儲先前在域中輸入的搜索項，然后當(dāng)在該域的搜索輸入中，執(zhí)行后續(xù)搜索時，之前的搜索項作為自動完成的選項出現(xiàn)。這個截圖來自Firefox：
在這一點上，讓我們看看一些有用的技巧，你可以應(yīng)用到你的搜索表單。
設(shè)置占位符
你可以在你的搜索輸入中提供一個有用的占位符，它可以給出一個關(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)簽和輔助功能
搜索表單的一個問題是其可訪問性 —— 一般的模式是，您不提供標(biāo)簽（盡管您可能會提供一個放大鏡圖標(biāo)或類似的圖標(biāo)），因為搜索表單放置后，它的目的通常對于有視覺的用戶來說相當(dāng)明顯的。
但是，這可能會導(dǎo)致屏幕閱讀器用戶感到困惑，因為他們不會有任何關(guān)于搜索輸入的口頭指示。不影響你的視覺設(shè)計而解決這個問題的一個方法是，那就是使用WAI-ARIA功能：
<form>元素內(nèi) search值的role屬性，將導(dǎo)致屏幕閱讀器將表單作為搜索表單進行通知。
如果這還不夠，可以在input上使用一個 aria-label 屬性。該標(biāo)簽的目的是包含一個將由屏幕閱讀器讀出的描述性文字標(biāo)簽 - 基本上，這是一個非視覺等效的
<label>。
我們來看一個例子：
<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)如下：
與前面的例子沒有區(qū)別，但是屏幕閱讀器用戶可以獲得更多的信息。
注意：有關(guān)這些輔助功能的更多信息，請參閱路標(biāo)/標(biāo)志。
物理輸入元素大小
輸入框的物理尺寸可以使用size屬性進行控制。有了它，您可以指定輸入框一次可以顯示的字符數(shù)。在這個例子中，例如，搜索框的寬度為30個字符：
<form> <div> <input type="search" id="mySearch" name="q" placeholder="Search the site..." size="30"> <button>Search</button> </div></form>
驗證
search 類型的<input>元素具有text類型元素相同的驗證特征。 搜索框一般不太可能使用驗證功能。在許多情況下，用戶應(yīng)該被允許搜索任何東西，但是有幾種情況需要考慮，比如搜索已知格式的數(shù)據(jù)。
注：HTML表單驗證不是 確保正確格式數(shù)據(jù)輸入的驗證腳本替代品。有人很容易調(diào)整HTML，使他們繞過驗證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯誤等等）輸入到您的數(shù)據(jù)庫時，可能會導(dǎo)致災(zāi)難。
關(guān)于造型的說明
偽類可用于有效/無效的表單元素 - :valid和:invalid。在本節(jié)中，我們將使用下面的CSS，它將在包含有效值的輸入旁邊進行檢查（打勾），并在包含無效值的輸入旁邊放置一個十字叉。
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)的持有者。這是必要的，因為某些瀏覽器上的某些輸入類型不能很好地顯示直接放在它們后面的圖標(biāo)。
要求輸入
您可以使用該required屬性，簡單地在表單提交通過之前，保證輸入一個所需值：
<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)如下：
此外，如果您嘗試提交沒有輸入搜索詞的表單，瀏覽器將顯示一條消息。下面的例子來自Firefox：
當(dāng)您嘗試使用不同類型的無效數(shù)據(jù)提交表單時，會顯示不同的消息; 看下面的例子。
輸入值長度
您可以使用minlength屬性為輸入的值指定最小字符長度; 同樣，maxlength用來設(shè)置輸入值的最大長度。
以下示例要求輸入的值為4-8個字符。
<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個字符的表單，則會給出相應(yīng)的錯誤消息（這在瀏覽器中會有所不同）。如果您嘗試超過8個字符的長度，瀏覽器不會讓你成功。
指定一個模式
我們來看一個例子。假設(shè)我們想要提供一個產(chǎn)品ID搜索表單，這些ID是否都是兩個字母后跟四個數(shù)字的代碼？下面的例子涵蓋了這種情況：
以下示例要求輸入的值為4-8個字符。
<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) | 評論 |
|---|---|---|
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 |