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

  1. The External CSS style sheet file search-style.css will be linked to apply styles for the Search Form.
  2. 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

  1. CSS styles to design text box.
  2. CSS styles to design in case the textbox gets focused.
  3. The glowing animation for the search textbox.

Output for Html5 Search Form

Output for Html5 Search Form

  1. Search Form is created and displayed with Animation. Click it now
Output for Html5 Search Form

  1. The User can give input and submit the Search Form by hitting Enter
Output for Html5 Search Form

  1. When user hit enter button then the search form has been submitted

Browser Support for Html5 Search Form

Yes Yes Yes Yes Yes

Related Searches to Html5 Search Form