HTML input search搜尋域

admin發表於2019-01-15
HTML

將input元素的type屬性值設定為"search"可以建立一個搜尋域。

搜尋域是HTML5新增，IE9+和其他標準瀏覽器支援。

從表面上看與普通文字框非常類似，且沒有搜尋域不影響實現搜尋功能。

由此很多朋友認為它可有可無，其實並非如此，任何一種元素的出現肯定有其現實的考量。

搜尋域的出現主要有如下兩點意義：

（1）.更加語義化。

（2）.搜尋域自身的一些特點給搜尋帶來了便利。

由於搜尋域與普通文字框非常類似，下面首先介紹一下搜尋域與文字框相比具有的特點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" name="search"/>
  <br/><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092119l3w4owfzowlcu6jf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

預設狀態下，從表面上看確實和普通文字框一模一樣。

於是就有不少朋友會說搜尋域完全是多次一舉，唯一的作用就是更加語義化。

其實並不是這樣，搜尋域具有一些自身的特點，提高了搜尋的便利性。

搜尋域與普通文字框相比有如下幾個特點：

（1）.右側可以出現叉號：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092142o931cb9rmzm891br.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

搜尋域輸入內容，且獲取焦點後，右側出現叉號，點選此叉號可以刪除搜尋域內容。

（2）.移動端回車按鈕程式設計搜尋按鈕：

在移動端，如果搜尋域獲取焦點，那麼回車按鈕會自動變為搜尋按鈕。

點選此按鈕即可提交表單，也就是進行搜尋動作，移動端截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092208sk8yaq9q9aux8n89.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述現象很明顯在PC端是無效的，必須在移動端才能觀察到。

如果是普通文字框，獲取焦點之後，顯示一個回車按鈕，感興趣的朋友可以自行測試。

（3）.預設顯示搜尋歷史記錄：

搜尋域預設會儲存搜尋歷史記錄，看如下圖示：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092231j1z4kx6505zlllxx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面介紹了搜尋域與普通文字域的不同點，下面再介紹一下它具有的常見屬性。

（1）.value：此屬性可以規定搜尋域的預設值。

（2）.size：不推薦使用此屬性，建議用CSS的width屬性替代。

（3）.maxlength：規定搜尋域可以輸入的最大字元數量。

（4）.placeholder（HTML5）：規定一段字串內容，用於提示期望輸入的內容。

（5）.required（HTML5）：規定搜尋域必填。

（6）.pattern（HTML5）：通過正規表示式驗證搜尋域輸入內容的格式。

（7）.list（HTML5）：規定輸入域的datalist，具體參閱HTML datalist選項列表一章節。

（8）.form（HTML5）:規定搜尋域所屬的一個或多個表單。

（9）.autofocus（HTML5）：規定搜尋域在頁面載入後自動獲取焦點。

（10）.autocomplete（HTML5）：規定搜尋域具有自動完成功能。

（11）.readonly：規定搜尋域只讀。

（12）.disabled：規定搜尋域不可用。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" value="螞蟻部落" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092334uu2pwfhuuy625f25.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過value屬性設定搜尋域的預設值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" maxlength="10" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上述程式碼通過maxlength屬性規定最多隻能輸入10個字元。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" placeholder="輸入關鍵字" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過placeholder可以規定一段字串，此字串不會被提交。

當在搜尋域輸入內容的時候會被自動清除，目的是為了告知使用者期望輸入的資訊。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" required name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過required屬性設定搜尋域是必填的，否則會報錯。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092426ghsmlcq77qmgqsu7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" autofocus autocomplete="on" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

autofocus屬性規定搜尋域在頁面載入後自動獲取焦點，不用填寫屬性值。

autocomplete具有兩個屬性值on和off，on規定搜尋域列出之前已經填寫過的內容，off的功能與之相反。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" readonly value="螞蟻部落" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

readonly規定搜尋域為只讀，不用寫屬性值，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092502c5ctaq4vcrrzvd0a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

被設定為只讀之後，搜尋域的內容不能被更改，但是可以被提交。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="search" disabled value="螞蟻部落" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

disabled 規定搜尋域為不可用，不用寫屬性值，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092532e97hku88857um05z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此時搜尋域變為灰色不可用狀態，值不能被提交。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="tel" pattern="^[a-z]{2,10}" name="search"/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

pattern屬性值是一個正規表示式，用於規定搜尋域值的格式。

上述程式碼規定，搜尋域的值只能是以2-10位小寫字母起始的字串，否則會報錯。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/15/092610zkjk5ezg05jfzjl5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
<input type="tel" form="ant" name="search"/>
</body>
</html>

form屬性引用所屬表單的id，於是，儘管搜尋域在<form>之外，但依然是該表單的一部分。

相關文章