HTML | DOM 输入搜索对象

Input Search 对象用于表示type=”search”的 HTML 元素。
输入搜索对象是 HTML5 中的一个新对象。

句法：

• 创建一个类型为 =”search”的 元素：

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

• 语法 访问类型为 =”search” 的 元素：

  var s = document.getElementById("search_object");

属性值：

Value	Description
autocomplete	It is used for setting or returning the value of the autocomplete attribute of a search field.
autofocus	It is used for setting or returning whether a search field should automatically get focus when the page loads.
defaultValue	It is used for setting or returning the default value of a search field.
disabled	It is used for setting or returning whether a search field is disabled, or not.
form	It is used for returning a reference to the form that contains the search field.
list	It is used for returning a reference to the datalist that contains the search field.
max	It is used for setting or returning the value of the max attribute of the search field.
min	Sets or returns the value of the min attribute of the search field.
name	It is used for setting or returning the value of the name attribute of a search field.
readOnly	It is used for setting or returning whether the search field is read-only, or not.
required	It is used for setting or returning whether the search field must be filled out before submitting a form.
step	It is used for setting or returning the value of the step attribute of the search field.
type	It is used for returning which type of form element the search field is.
value	It is used for setting or returning the value of the value attribute of a search field.

下面的程序说明了搜索对象：
示例 1：创建一个类型为 =”search” 的 元素。

  

    Input Search Object
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    Input Search Object
  
    Double Click the "Create" 
      button to create a search field.
  
    Create
  
  
    
        function Create() {
            
            // Create input element with type search.
            var s = document.createElement("INPUT");
            s.setAttribute("type", "search");
            document.body.appendChild(s);
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

示例 2：访问类型为 =”datetime-local” 的 元素。

  

    Input Search Object
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

  
    GeeksforGeeks
    Input Search Object
  
    
  
    Double Click the "Access" button to 
      access a search field.
  
    Access
  
  
    
  
    
        function Access() {
            
            // Accessing value of input element
            // type="search" 
            var s = document.getElementById(
              "test").value;
            document.getElementById(
              "check").innerHTML = s;
        }
    
  

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器：

• 歌剧
• IE浏览器
• 火狐
• 谷歌浏览器
• 苹果Safari