資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次瀏覽
