HTML DOM Input Search object

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input Search object is associated with the <input> element with type “search”. We can create and access an input element with type search using the createElement() and getElementById() method respectively.

Properties

Following are the properties for the Input Search object −

PropertyDescription
autocompleteTo set or return if the search field should get focus automatically when the page loads or not.
autofocusTo set or return if the search field should get focus automatically when the page loads or not.
defaultValueTo set or return the search field default value.
disabledTo set or return if the reset button has been disabled, or not.
formTo return the reference of the form containing the search field
listTo return the reference to the datalist containing the search field.
maxLengthTo set or return the maxlength attribute value of a search field.
nameTo set or return the name attribute value of a search field
patternTo set or return pattern attribute value of a search field.
placeholderTo set or return the placeholder attribute value of a search field
readOnlyTo set or return if the search field is read-only, or not
requiredTo set or return if it is mandatory to fill the search field before submitting the form or not.
sizeTo set or return size attribute value of the search field.
typeIt is a read only property returning the type of form element the search field is.
valueTo set or returns the value attribute value of the search field.

Syntax

Following is the syntax for −

Creating an input search object −

var P = document.createElement("INPUT");
P.setAttribute("type", "search");

Example

Let us look at an example for the Input Search object −

<!DOCTYPE html>
<html>
<head>
<script>
   function createSearch() {
      var S= document.createElement("INPUT");
      S.setAttribute("type", "search");
      document.body.appendChild(S);
   }
</script>
</head>
<body>
<p>Create an input field with type search by clicking the below button</p>
<button onclick="createSearch()">CREATE</button>
<br><br>
FRUITS:
</body>
</html>

Output

This will produce the following output −

On clicking the CREATE button −

raja
Published on 19-Aug-2019 13:30:53
Advertisements