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

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;
     }
}