The Input Search object represents an HTML <input> element with type="search".
We can access an <input> element with type="search" by using getElementById().
<!DOCTYPE html>
<html>
<body>
<input type="search" id="mySearch" placeholder="Search for something..">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from w w w . ja v a2s.c o m-->
var x = document.getElementById("mySearch").placeholder;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create an <input> element with type="search" by using the document.createElement() method.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from w w w . j a v a 2 s . co m-->
var x = document.createElement("INPUT");
x.setAttribute("type", "search");
document.body.appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows:
Property | Description |
---|---|
autocomplete | Sets or gets the autocomplete attribute of a search field |
autofocus | Sets or gets whether a search field can auto focus when the page loads |
defaultValue | Sets or gets the default value of a search field |
disabled | Disable or enable a search field |
form | Get the form that contains the search field |
list | Get the datalist that contains the search field |
maxLength | Sets or gets the maxlength attribute of a search field |
name | Sets or gets the name attribute of a search field |
pattern | Sets or gets the pattern attribute of a search field |
placeholder | Sets or gets the placeholder attribute of a search field |
readOnly | Sets or gets whether the search field is read-only |
required | Sets or gets whether the search field must be filled before submitting a form |
size | Sets or gets the size attribute of the search field |
type | Get the type of the search field |
value | Sets or gets the value attribute of a search field |
The Input Search object supports the standard properties and events.