Hello!
Write an HTML coding for making search button.
See the screenshot given below!
In my website, I have to add a search button to search for some specific things.
Answers
HOLA MATE..!!
ANSWER:-
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
HOPE IT HELPS.!!
Answer:
⏩Preview is given in the attachment.
Explanation:
The html code for the searchbar is given below:
⏩All you need is to copy the code & paste it in an html document with "Any name.html"
⏩This code contains all the the webkit animation as mentioned in your screenshot , when you hover on the search bar the background color changes etc.
⏩position & alignment of the searchbox can be changed using CSS.
⏩ Position: middle; , align: centre; etc [according to your need.]
<html>
<head>
<title>Searchbox</title>
</head>
<style>
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
line-height: 1.5;
font-size: 13px;
}
form {
outline: 0;
float: left;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-border-radius: 4px;
border-radius: 4px;
}
form > .textbox {
outline: 0;
height: 42px;
width: 244px;
line-height: 42px;
padding: 0 16px;
background-color: rgba(255, 255, 255, 0.8);
color: #212121;
border: 0;
float: left;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
form > .textbox:focus {
outline: 0;
background-color: #FFF;
}
form > .button {
outline: 0;
background: none;
background-color: rgba(38, 50, 56, 0.8);
float: left;
height: 42px;
width: 42px;
text-align: center;
line-height: 42px;
border: 0;
color: #FFF;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition: background-color .4s ease;
transition: background-color .4s ease;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
form > .button:hover {
background-color: rgba(0, 150, 136, 0.8);
}
</style>
<body>
<form method="post">
<input type="text" class="textbox" placeholder="What is your question?">
<input title="Search" value="REPLACE_WITH_YOUR_WEBSITE_DOMAIN_OR_IN_WHATEVER_FIELD_U_WANT_TO_ADD" type="submit" class="button">
</form>
</body>
</html>
•Languages used: HTML, CSS , CSS3•
