Html5 Search Form
- The Search form is used to enable the user to search for a required content. We can see many websites which has its own search forms to search the site content.
- Let’s us see a simple search form with a responsive design.
Sample coding for Html5 Search Form
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy Search Form</title>
<link rel="stylesheet" type="text/css" href="search-style.css">
</head>
<body>
<h2>Html5 Search Form</h2>
<input type="text" name="search" placeholder="Search…">
</body>
</html>
Code Explanation for Html5 Search Form
![code explanation for Html5 Search Form code explanation for Html5 Search Form](img/search-form/search-form-code.png)
- The External CSS style sheet file search-style.css will be linked to apply styles for the Search Form.
- The input box is to provide the searching option for the user.
Sample coding for Html5 Search Form slide.css
Tryit
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
animation: glow 800ms ease-out infinite alternate;
}
@keyframes glow {
0% {
border-color: #f49542;
box-shadow: 0 0 5px rgba(0,0,255,.2), inset 0 0 5px rgba(0,0,255,.1), 0 2px 0 #000;
}
100% {
border-color: #7142f4;
box-shadow: 0 0 20px rgba(0,0,255,.6), inset 0 0 10px rgba(0,0,255,.4), 0 2px 0 #000;
}
}
Code Explanation for Html5 Search Form search-style.css
![code explanation for Html5 Search Form code explanation for Html5 Search Form](img/search-form/search-css.png)
- CSS styles to design text box.
- CSS styles to design in case the textbox gets focused.
- The glowing animation for the search textbox.
Output for Html5 Search Form
![Output for Html5 Search Form Output for Html5 Search Form](img/search-form/output1.png)
- Search Form is created and displayed with Animation. Click it now
![Output for Html5 Search Form Output for Html5 Search Form](img/search-form/output2.png)
- The User can give input and submit the Search Form by hitting Enter
![Output for Html5 Search Form Output for Html5 Search Form](img/search-form/output3.png)
- When user hit enter button then the search form has been submitted
Browser Support for Html5 Search Form
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes |