HTML <search>用法及代碼示例

HTML <搜索> 標簽表示與搜索相關的一組元素。 <search> 標簽內的元素包括設計用於進行搜索的表單元素。但是，默認樣式是由瀏覽器提供給 <search> 元素的，我們也可以提供自定義樣式CSS造型。

用法

<search>
       Content to be searched...
</search>

注意：<search> 元素在瀏覽器中沒有特定的視覺表示。然而，您可以根據需要利用 CSS 來設置 <search> 元素及其內容的樣式。

支持的屬性

HTML <search> 標簽支持全局屬性和事件屬性在 HTML 中。

支持的元素

搜索標簽使用form& 這<輸入>標簽.

示例 1：具有默認瀏覽器 CSS 樣式的 HTML <search> 標簽的插圖。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> HTML search Tag</title> 
    <style> 
        search { 
            display: block; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeeks</h1> 
    <h3>HTML <search> Element</h3> 
    <search> 
        <form> 
            <input type="text"
                   placeholder="enter name"> 
        </form> 
    </search> 
</body> 
  
</html>

輸出：

defaultsearch

示例 2：具有自定義 CSS 樣式的 HTML <search> 標簽的插圖。

HTML


<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> HTML search Tag</title> 
    <style> 
        search { 
            background-color: rgb(141, 200, 141); 
            padding: 10px; 
            border: 2px solid black; 
        } 
  
        h1, h3 { 
            color: rgb(15, 87, 15); 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeeks</h1> 
    <h3>HTML <search> Element 
        with Custom CSS Style 
    </h3> 
    <search> 
        <form> 
            <input type="text" 
                   placeholder="Enter name"> 
        </form> 
    </search> 
</body> 
  
</html>

輸出：

sest

HTML DOM 屬性

Input Search form可以與 HTML <search> 標簽一起使用

瀏覽器支持

chrome 118
邊 118
火狐118
Opera 104
狩獵17

相關用法

注：本文由純淨天空篩選整理自shivanigupta18rk大神的英文原創作品 HTML <search> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。