Using Html and CSS
To create a search bar using HTML and internal CSS, we should adhere to the following procedures. By following these steps, we can effortlessly display the search bar on a webpage in a web browser:
To begin, the initial step involves entering the Html code into a text editor or accessing the Html file in the text editor where we intend to incorporate the CSS and Html code to create a search bar.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Search Bar using Html and CSS
</Title>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to make a search bar . <br>
</Body>
</Html>
Step 2: Next, it is necessary to position the cursor within the body tag at the desired location for the search bar. Subsequently, enter the <form> tag at that specific point.
Step 3: The next step involves utilizing the <input> tag alongside the type parameter. Subsequently, inserting the desired text value within the type parameter. Following that, filling in the placeholder and name parameters within the <input> tag.
<form>
<input type="text" placeholder=" Search...." name="search">
Step 4: Next, it is necessary to incorporate the button element including the type attribute, then specify the value as submit within the type attribute. Subsequently, the opening button tag must be closed. Finally, remember to close the button element.
<form>
<input type="text" placeholder=" Search...." name="search">
<button type="submit">Submit</button>
</form>
Next, we need to incorporate the provided CSS code between the opening and closing tags of the <head> element.
<style>
.searchbox {
float: left;
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.searchbox button {
padding: 8px;
margin-top: 10px;
margin-left: 10px;
background: orange;
font-size: 20px;
border: none;
cursor: pointer;
}
.searchbox button:hover {
background: blue;
}
</style>
Step 6 requires saving the HTML file and subsequently opening it in a web browser for viewing.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Search Bar using Html and CSS
</Title>
<style>
.searchbox {
float: left;
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.searchbox button {
padding: 8px;
margin-top: 10px;
margin-left: 10px;
background: orange;
font-size: 20px;
border: none;
cursor: pointer;
}
.searchbox button:hover {
background: blue;
}
</style>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to make a search bar . <br>
<div class="searchbox">
<form>
<input type="text" placeholder=" Search...." name="search">
<button type="submit">Submit</button>
</form>
</div>
</Body>
</Html>
The result of the HTML code above can be observed in the screenshot displayed below: