Layout personal information form - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

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

Description

Layout personal information 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">
body {<!--from   w  w w  .  java  2  s  .  c om-->
   font:91%/2 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

form {
   width:41em;
}

legend {
   font-weight:bold;
}

fieldset {
   margin:2em 0;
   padding:2em;
   border:2px solid Chartreuse;
   background:yellow;
}

label {
   width:11em;
   float:left;
   clear:left;
}

div {
   margin:2em 0;
}

.short {
   width:4em;
}

.hide {
   width:0;
   text-indent:-10000em;
}

#favcolor {
   margin:2em 0 0 0;
   padding:0;
   border:none;
}

h2 {
   margin:0;
   padding:0;
   width:11em;
   float:left;
   font-weight:normal;
   font-size:2em;
}

.col {
   margin:0;
   width:9em;
   float:left;
}

.col div {
   margin:0;
   padding-bottom:0.5em;
}

.col label {
   float:none;
}
</style> 
 </head> 
 <body> 
  <form action="#" method="get"> 
   <fieldset> 
    <legend>Lorem ipsum dolor si</legend> 
    <div> 
     <label>Lorem ipsum do</label> 
     <select> <option value="america">Lorem i</option> <option value="philippines">Lorem ipsum</option> <option value="japan">Lorem</option> </select> 
    </div> 
    <div> 
     <label>Lorem ipsum d</label> 
     <label class="hide">Lorem ipsum do</label> 
     <label class="hide">Lorem ipsum d</label> 
     <input type="text" class="short"> 
     <select> <option>Lorem i</option> <option>Lorem ip</option> <option>Lorem</option> </select> 
     <input type="text" class="short"> 
    </div> 
    <fieldset id="favcolor"> 
     <h2>Lorem ipsum do</h2> 
     <div class="col"> 
      <div> 
       <label> <input type="checkbox" name="red" value="red">Lorem</label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="orange" value="orang">Lorem ip</label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="yellow" value="yellow">Lorem ip</label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="green" value="green">Lorem i</label> 
      </div> 
     </div> 
     <div class="col"> 
      <div> 
       <label> <input type="checkbox" name="blue" value="blue">Lorem </label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="indigo" value="indigo">Lorem ip</label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="violet" value="violet">Lorem ip</label> 
      </div> 
      <div> 
       <label> <input type="checkbox" name="pink" value="pink">Lorem </label> 
      </div> 
     </div> 
    </fieldset> 
   </fieldset> 
  </form>  
 </body>
</html>

Related Tutorials