make submit button in line with the search fields - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input submit

Description

make submit button in line with the search fields

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.input-style{
   background-color:white;
   border: solid 1px #6E6E6E;
   height: 30px;
   font-size:18px;
   vertical-align:9px;<!-- w w  w.java 2 s  .c om-->
   color:#bbb;
   float: left;
   display: inline;
   width: 300px;
   margin-right: 5px;
}
.submit-button{
   float: left;
   display: inline;
}


      </style> 
 </head> 
 <body> 
  <form action="weezyresults.php" method="post"> 
   <input type="text" name="search" size="35" class="input-style" value="Job Title e.g. Assistant Manager" onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value ='';this.style.color='#000'}"> 
   <input type="text" name="searchterm" size="35" value="Location e.g. Manchester" class="input-style" onfocus="if(this.value == 'Location e.g. Manchester'){this.value ='';this.style.color='#000'}"> 
   <input type="image" src="but.tiff" alt="Submit" height="30" width="60" class="submit-button"> 
  </form>  
 </body>
</html>

Related Tutorials