HTML | DOM Input Search value Property
The DOM Input Search value Property in HTML DOM is used to set or return the value of a value attribute of the search field. The value attribute specifies the initial value of the input search Field. It contains the default value or user types.
Syntax:
- It returns the value property.
searchObject.value
- It is used to Set the value property.
searchObject.value = text
Property Value: It contains single value text which defines the value of the input search field.
Return Value: It returns the string value which represents the value of the search Field.
Example-1: This example illustrates how to return Input search value property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Input Search value Property
</ title >
< style >
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Input Search value Property</ h2 >
< input type="Search"
id="test"
placeholder="Type to search.."
value="GeeksForGeeks">
< br >
< br >
< br >
< button ondblclick="Access()">click here
</ button >
< p id="check"
style="font-size:24px;
color:green;">
</ p >
< script >
function Access() {
// Get the value of Input search field
var s = document.getElementById(
"test").value;
document.getElementById(
"check").innerHTML = s;
}
</ script >
</ body >
</ html >
|
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example that illustrate how to set the Input search value Property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Input Search value Property</ title >
< style >
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Input Search value Property</ h2 >
< input type="Search"
id="test"
placeholder="Type to search.."
value="GeeksForGeeks">
< br >
< br >
< br >
< button ondblclick="Access()">
click here
</ button >
< p id="check"
style="font-size:22px;color:green;">
</ p >
< script >
function Access() {
// change the value of Input search field
var s = document.getElementById(
"test").value = "Hello Geeks";
document.getElementById(
"check").innerHTML =
"The value was changed to " + s;
}
</ script >
</ body >
</ html >
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM input search value Property are listed below:
- Google Chrome 5
- Edge 12
- Firefox 4
- Opera 10.6
- Safari 5
Last Updated :
01 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...