HTML DOM Input Search用法及代碼示例

Input Search對象用於表示類型為“ search”的HTML <input>元素。輸入搜索對象是HTML5中的新對象。

用法:

要創建類型為“ search”的<input>元素：

var gfg = document.createElement("input");
gfg.setAttribute("type", "search");

語法要訪問類型為“ search”的<input>元素：
```
var s = document.getElementById("search_object");
```

屬性值：

值	描述
autocomplete	它用於設置或返回搜索字段的自動完成屬性的值。
autofocus	它用於設置或返回在頁麵加載時搜索字段是否應自動獲得焦點。
defaultValue	它用於設置或返回搜索字段的默認值。
disabled	它用於設置或返回是否禁用搜索字段。
form	它用於返回對包含搜索字段的表單的引用。
list	它用於返回對包含搜索字段的數據列表的引用。
max	它用於設置或返回搜索字段的max屬性的值。
min	設置或返回搜索字段的min屬性的值。
name	它用於設置或返回搜索字段的name屬性的值。
readOnly	它用於設置或返回搜索字段是否為隻讀。
required	它用於設置或返回在提交表單之前是否必須填寫搜索字段。
step	它用於設置或返回搜索字段的step屬性的值。
type	它用於返回搜索字段是哪種類型的表單元素。
value	它用於設置或返回搜索字段的value屬性的值。

以下示例程序旨在說明搜索對象：
示例1：創建一個類型為“ search”的<input>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Input Search Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Input Search Object</h2> 
  
    <p>Double Click the "Create"  
      button to create a search field.</p> 
  
    <button ondblclick="Create()">Create 
  </button> 
  
    <script> 
        function Create() { 
            
            // Create input element with type search. 
            var s = document.createElement("INPUT"); 
            s.setAttribute("type", "search"); 
            document.body.appendChild(s); 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

示例2：訪問類型為“ datetime-local”的<input>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Input Search Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Input Search Object</h2> 
  
    <input type="Search" 
           id="test"
           placeholder="Type to search.."> 
  
    <p>Double Click the "Access" button to  
      access a search field.</p> 
  
    <button ondblclick="Access()">Access 
  </button> 
  
    <p id="check"></p> 
  
    <script> 
        function Access() { 
            
            // Accessing value of input element 
            // type="search"  
            var s = document.getElementById( 
              "test").value; 
            document.getElementById( 
              "check").innerHTML = s; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

支持的瀏覽器：

Opera
IE瀏覽器
Firefox
穀歌瀏覽器
蘋果Safari

相關用法

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