HTML <search> Tag
Last Updated :
19 Jan, 2024
HTML <search> Tag indicates a grouping of elements related to the search. The elements inside a <search> tag include form elements designed for conducting searches. However, Default styling is provided by the browser to the <search> element and we can also provide custom CSS styling.
Syntax
<search>
Content to be searched...
</search>
Note:Â The <search> element doesn’t have a specific visual representation in browsers. Yet, you can utilize CSS to style both the <search> element and its contents as desired.
Supported Attributes
HTML <search> Tag supports the Global Attributes and Event Attributes in HTML.
Supported Elements
The serach tag uses the <form> Tag & the <input> Tag.
Example 1: Illustration of the HTML <search> tag with default browser’s CSS styling.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title> HTML search Tag</title>
<style>
search {
display: block;
}
</style>
</head>
<body>
<h1>GeeksforGeeeks</h1>
<h3>HTML <search> Element</h3>
<search>
<form>
<input type="text"
placeholder="enter name">
</form>
</search>
</body>
</html>
|
Output:
Example 2: Ilustration of the HTML <search> tag with custom CSS styling.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title> HTML search Tag</title>
<style>
search {
background-color: rgb(141, 200, 141);
padding: 10px;
border: 2px solid black;
}
h1, h3 {
color: rgb(15, 87, 15);
}
</style>
</head>
<body>
<h1>GeeksforGeeeks</h1>
<h3>HTML <search> Element
with Custom CSS Style
</h3>
<search>
<form>
<input type="text"
placeholder="Enter name">
</form>
</search>
</body>
</html>
|
Output:
HTML DOM Property
HTML DOM Input Search form Property can be used with the HTML <search> Tag
Browser Support
- Chrome 118
- Edge 118
- Firefox 118
- Opera 104
- Safari 17
Share your thoughts in the comments
Please Login to comment...