75 views
How to make a Search bar in Html
To create a search bar in HTML, you can use the <input> element with the type="text" attribute. Here’s an example of how you can create a basic search bar:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS styles for the search bar */
.search-bar {
display: flex;
align-items: center;
width: 300px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-bar input {
flex: 1;
border: none;
outline: none;
}
.search-bar button {
background-color: #f2f2f2;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Your HTML content goes here -->
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</body>
</html>In the example above, we create a search bar using a <div> element with the class “search-bar”. Inside the <div>, we include an <input> element with the type="text" attribute to capture the search input from the user. We also add a <button> element to submit the search.
The CSS styles defined within the <style> tag customize the appearance of the search bar. You can adjust the width, padding, border, and other properties to match your design requirements.
Feel free to modify the styles or add additional functionality to the search bar as needed.