CSS for labels and input fields of a form - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

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

Description

CSS for labels and input fields of a form

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 {<!--  w  w  w  . j  av  a  2 s . co  m-->
   position:absolute;
   right:51%;
   left:201px;
}
</style> 
 </head> 
 <body> 
  <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> 
   <p> <label> <span class="client-info">Lorem </span> <input type="text" name="FirstName" required> </label> </p> 
   <p> <label> <span class="client-info">Lorem i</span> <input type="text" name="Adres" required> </label> </p> 
   <p> <label> <span class="client-info">Lorem ipsu</span> <input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required> </label> </p> 
   <p> <label> <span class="client-info">Lorem ipsum </span> <input type="text" name="Woonplaats" required> </label> </p> 
   <p> <label> <span class="client-info">Lorem i</span> <input type="text" name="Email"> </label> </p> 
   <p> <label> <span class="client-info">Lorem ipsum dolor sit </span> <input id="date" type="date" name="Leverdatum"> </label> </p> 
   <p> <label> <span class="client-info">Lorem ips</span> <input type="file" name="Bestand"> </label> </p> 
   <input type="submit" value="Bestellen"> 
  </form>  
 </body>
</html>

Related Tutorials