如何在HTML中使用搜尋輸入類型？

互聯網為我們提供了許多服務，我們可以透過相應的網站存取這些服務。很多時候，我們需要搜尋特定主題的資訊。要在網路上進行搜索，我們可以使用Google、Yahoo、Ask、Bing等搜尋引擎。您必須觀察可用於輸入搜尋關鍵字的文字方塊。我們輸入關鍵字，它會將我們帶到下一頁，其中顯示從伺服器取得的配對結果。當我們設計 HTML 表單來捕獲使用者資料時，我們使用多個控制項。我們還可以在 HTML 表單中建立一個文字框，其行為類似於搜尋字段，我們可以執行 Google 搜尋。

為了製作這樣的控件，我們使用表單內 HTML 中的標記。它看起來像一個普通的文字框，但它能夠執行網站搜尋。

讓我們看一個基本的搜尋控制項程式。

範例

# 雷雷

這個程式將使用JavaScript程式碼在下一頁上顯示搜尋到的文字。

您可能在使用Google時注意到，預設搜尋箱子會出現一些文本，如下所示：

範例

做到這一點，我們可以在標籤中使用PLACEHOLDER屬性。讓我們來看一個例子。

雷雷

VALUE ATTRIBUTE

的中文翻譯為：

VALUE屬性

要設定搜尋框中的預設值，可以在中使用VALUE屬性標籤。＃＃＃

這是一個非常有趣的屬性，可以在標籤中使用，那就是

SPELLCHECK屬性。此屬性可以開啟或關閉拼字檢查功能。如果是ON ，將會在紅色河流線下顯示拼寫錯誤的單詞，但如果是OFF，會簡單地忽略拼寫錯誤。預設情況下，拼字檢查屬性設定為false。

那麼，讓我們看看如何使用這個屬性。

範例 雷雷 ＃＃＃＃＃＃或者＃＃＃＃＃ 雷雷

在這兩種情況下，拼字檢查屬性都是關閉的，即 false。在這種情況下，它將忽略錯誤。

假設我們在搜尋框中輸入“Heaith”，而正確的拼字是“Health”。但它在單字下面沒有顯示任何波浪線。

現在讓我們實現它並查看結果。

範例

雷雷

我們也可以藉助

MINLENGTH

和

MAXLENGTH

屬性來限制搜尋欄位中的最小和最大字元數。假設在一個範例中，使用者必須鍵入/搜尋特定機構的准考證號碼，它可以接受最少 4 個字元和最多 6 個字元。但如果您不施加限制，使用者可以鍵入任意長度的資料。

範例 雷雷 由於使用者未輸入最小資料長度，因此頁面上顯示錯誤。如果您嘗試超過其最大限制，它將不允許輸入。

我們也可以透過使用SIZE屬性來控製文字方塊的寬度。而且，我們也可以透過使用REQUIRED屬性將其設定為必填欄位。

範例

雷雷

觀察到盒子的大小現在縮小了，如果您將其留空，將會顯示錯誤。

以上是如何在HTML中使用搜尋輸入類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！