資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML中使用搜索輸入型別？
網際網路為我們提供了許多可以透過各自網站訪問的服務。很多時候，我們需要搜尋特定主題的資訊。為了在網際網路上進行搜尋，我們可以使用像Google、Yahoo、Ask、Bing等搜尋引擎。你一定觀察到有一個文字框用於輸入搜尋關鍵詞。我們輸入關鍵詞，它會將我們帶到下一頁，在那裡顯示從伺服器獲取的匹配結果。當我們在HTML中設計表單以從使用者那裡捕獲資料時，我們會使用多個控制元件。我們也可以在HTML表單中建立一個文字框，使其像搜尋欄位一樣工作，並且我們可以執行Google搜尋。
要建立這樣的控制元件，我們在表單內的HTML中使用<input type="search">標籤。它看起來像一個普通的文字框，但它能夠執行站點搜尋。
讓我們來看一個SEARCH控制元件的基本程式。
示例
<html> <head><title></title> <script> function show(){ s=searchForm.searchField.value; document.write("You have searched for "+s); } </script> </head> <body> <form id="searchForm"> <label for="sea">Search for : <label> <input type="search" name="searchField"> <br><br> <input type="submit" value="Search" onclick="show()"> </form> </body> </html>
此程式將使用JavaScript程式碼在下一頁顯示搜尋的文字。
你可能有時在使用Google時觀察到，預設情況下，一些文字出現在搜尋框中，如下所示：
示例
為此，我們可以在<input>標籤中使用PLACEHOLDER屬性。讓我們來看一個例子。
<html> <body> <form id="searchForm"> <label for="sea">Search for : </label> <input type="search" name="searchField" placeholder="Type URL"> <br><br> <input type="submit" value="Search" onclick="show()"> </form> </body> </html>
VALUE屬性
要在搜尋框中設定預設值，可以在<input>標籤中使用VALUE屬性。
這是一個非常有趣的屬性，可以在<input>標籤中使用，那就是SPELLCHECK屬性。此屬性可以設定為開啟或關閉以啟用或停用拼寫檢查功能。如果開啟，它會在拼寫錯誤的單詞下顯示紅色波浪線，但如果關閉，它會簡單地忽略拼寫錯誤。預設情況下，spellcheck屬性設定為false。
那麼，讓我們看看如何使用此屬性。
示例
<html> <body> <form id="searchForm"> <label for="sea">Search for : </label> <input type="search" name="searchField"><br><br> <input type="submit" value="Search" onclick="show()"> </form> </body> </html>
或
<html> <body> <form id="searchForm"> <label for="sea">Search for : </label> <input type="search" name="searchField" spellcheck=false><br><br> <input type="submit" value="Search"> </form> </body> </html>
在這兩種情況下，spellcheck屬性都為OFF，即false。在這種情況下，它將忽略錯誤。
假設我們在搜尋框中輸入了“Heaith”，而正確的拼寫是“Health”。但它沒有在單詞下顯示任何波浪線。
現在讓我們將其設定為true並檢視結果。
示例
<html> <body> <form id="searchForm"> <label for="sea">Search for : </label> <input type="search" name="searchField" spellcheck=true><br><br> <input type="submit" value="Search"> </form> </body> </html>
我們還可以使用MINLENGTH和MAXLENGTH屬性來限制搜尋欄位中的最小和最大字元數。例如，在一個使用者必須為特定機構鍵入/搜尋准考證號的示例中，它可以接受最少4個字元，最多6個字元。但是，如果你不設定限制，使用者可以輸入任意長度的資料。
示例
<html> <body> <form id="searchForm"> <label for="reg">Type Admission Number : </label> <input type="search" name="adm" minlength="4" maxlength="6"><br><br> <input type="submit" value="Search"> </form> </body> </html>
它在頁面上顯示錯誤，因為使用者沒有輸入最小長度的資料。如果你試圖超過其最大限制，它將不允許輸入。
我們還可以使用SIZE屬性控制文字框的寬度。我們還可以使用REQUIRED屬性將其設定為必填欄位。
示例
<html> <body> <form id="searchForm"> <label for="reg">Type Admission Number : </label> <input type="search" name="adm" minlength="4" maxlength="6" size="6" required><br><br> <input type="submit" value="Search"> </form> </body> </html>
觀察一下，框的大小現在減小了，如果你將其留空，它會顯示錯誤。
6K+ 次瀏覽
