build a flexible HTML form layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

build a flexible HTML form layout

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">

.form-group {<!--from w  ww .  j a  v  a 2 s  .c  o  m-->
   float: left;
   width: 100%;
}
.form-control {
   padding: 3px;
   box-sizing: border-box;
   float: left;
}
.form-control input,
.form-control select,
.form-control textarea {
   box-sizing: border-box;
   width: 100%;
}
.form-control textarea {
   resize: vertical;
}
#form-group-1 .form-control {
   width: 33.333%;
}
#form-group-2 .form-control {
   width: 50%;
}
#form-group-3 .form-control {
   width: 100%;
}
#form-group-4 .form-control {
   width: 6em;
}
@media (max-width: 500px) {
   #form-group-1 .form-control {
      width: 50%;
   }
   #form-group-2 .form-control {
      width: 66.6666%;
   }
}


      </style> 
 </head> 
 <body> 
  <form> 
   <div class="form-group" id="form-group-1"> 
    <div class="form-control"> 
     <label for="field1">Field 1</label> 
     <input name="field1" id="field1" placeholder="text1"> 
    </div> 
    <div class="form-control"> 
     <label for="field2">Field 2</label> 
     <input name="field2" id="field2" placeholder="text2"> 
    </div> 
    <div class="form-control"> 
     <label for="field3">Field 3</label> 
     <select name="field3" id="field3"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> 
    </div> 
   </div> 
   <div class="form-group" id="form-group-2"> 
    <div class="form-control"> 
     <label for="field4">Field 4</label> 
     <input name="field4" id="field4" placeholder="text4"> 
    </div> 
    <div class="form-control"> 
     <label for="field5">Field 5</label> 
     <input name="field5" id="field5" placeholder="text5"> 
    </div> 
   </div> 
   <div class="form-group" id="form-group-3"> 
    <div class="form-control"> 
     <label for="field6">Field 6</label> 
     <textarea name="field6" id="field6"></textarea> 
    </div> 
   </div> 
   <div class="form-group" id="form-group-4"> 
    <div class="form-control"> 
     <input type="submit" value="OK"> 
    </div> 
    <div class="form-control"> 
     <input type="button" value="CANCEL"> 
    </div> 
   </div> 
  </form>  
 </body>
</html>

Related Tutorials