RWD | Responsive HTML5 form elements with CSS Flexbox

index.html

 <header>
    <h1>Forms</h1> 
    <h2>Responsive HTML5 form elements with CSS Flexbox</h2>
 </header>
 <form action="#">  
 <!--///////////////// TEXT FIELDS ///////////////////-->        
   <div class="field-group">
     <label for="text1" class="label">Full Name:</label>
     <div class="field">
       <input name="text1" id="text1"  type="text"  value="" required>
     </div>
   </div>

   <div class="field-group">
     <label for="email1" class="label">Email:</label>
     <div class="field">
       <input name="email1" id="email1" type="email" spellcheck="false"  value="" required> 
     </div>
   </div>

   <div class="field-group">
     <label for="number1" class="label">Age:</label>
     <div class="field">
       <input name="number1" id="number1" type="number" value=""> 
     </div>
   </div>

   <div class="field-group">
     <label for="url1" class="label">Website URL:</label>
     <div class="field">
       <input name="url1" id="url1" type="url" value=""> 
     </div>
   </div>

   <div class="field-group">
     <label for="tel1" class="label">Phone:</label>         
     <div class="field">
       <input name="tel1" id="tel1" type="tel" value="">
     </div>
   </div>

   <div class="field-group">
     <label for="date1" class="label">Birthday:</label>         
     <div class="field">
       <input name="date1" id="date1" type="datetime-local" value="">
     </div>
   </div>

   <!--///////////////// TEXTAREA ///////////////////-->
   <div class="field-group">
     <label for="textarea1" class="label">Description:</label>         
     <div class="field">
       <textarea id="textarea1" name="textarea1" spellcheck="true" rows="10" cols="50"></textarea>
     </div>
   </div>

   <!--///////////////// SELECT MENU ///////////////////-->
   <div class="field-group">
     <div class="label">Multiple choice:</div>
     <div class="field">        
       <select id="select1" name="select1"> 
         <option value="First Choice">First Choice</option>
         <option value="Second Choice">Second Choice</option>
         <option value="Third Choice">Third Choice</option>
       </select>
     </div> 
   </div>

   <!--///////////////// RADIO GROUP ///////////////////-->
   <div class="field-group">
     <div class="label">Single choice:</div>

     <div class="field">
       <div>
         <input id="radio1" name="radio" type="radio" value="First Choice" checked="checked">
         <label for="radio1">First Choice</label>
       </div>
       <div>     
         <input id="radio2" name="radio" type="radio" value="Second Choice">
         <label for="radio2">Second Choice</label>
       </div>

       <div>
         <input id="radio3" name="radio" type="radio" value="Third Choice">
         <label for="radio3">Third Choice</label>
       </div>
     </div>

   </div>
   <!--///////////////// CHECKBOX GROUP ///////////////////-->
   <div class="field-group">
     <div class="label">Multiple choice:</div>

       <div class="field">
         <div>
           <input id="check1" name="check1" type="checkbox" value="First Choice">
           <label class="check" for="check1">First Choice</label>
         </div>
         <div>
           <input id="check2" name="check2" type="checkbox" value="Second Choice">
           <label class="check" for="check2">Second Choice</label>
         </div>
         <div>
           <input id="check3" name="check3" type="checkbox" value="Third Choice">
           <label class="check" for="check3">Third Choice</label>
       </div>
     </div>
   </div>

   <!--///////////////// SUBMIT BUTTON ///////////////////-->
   <div class="field-group">
     <div class="field">
       <input id="saveForm" name="saveForm" type="submit" value="Submit">
     </div>
   </div>

 </form>

RWD-|-Responsive-HTML5-form-elements-with-CSS-Flexbox.markdown

RWD | Responsive HTML5 form elements with CSS Flexbox

HTML form with responsive web design. Furthermore it's done with CSS Flexbox, so no floats are used at all. This form layout was inspired by another pen made by Chris Coyier: http://codepen.io/chriscoyier/pen/DmnlJ

A Pen by Torben Colding on CodePen.

License.

style.scss

/*
  Responsive form elements
  Flexbox layout
*/
/*/////////////// GLOBAL STYLES ////////////////////*/
body{padding: 30px; background: #eee;}
header{margin-bottom: 5rem;}
/*/////////////// FONT STYLES ////////////////////*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html{font-size: 62.5%;}
body{font-family: 'Open Sans', sans-serif;}
h1{font-size: 3rem;}
h2{font-size: 1.6rem;}
form{font-size: 1.4rem;}

/*/////////////// FORM STYLES ////////////////////*/
form .field-group{
  display: flex; 
  margin: 0 0 12px 0;
}
form .field-group .label{
  flex: 1; 
  text-align: right; 
  margin: 0 8px 0 0;
  padding: 2px 0;
}
form .field-group .field{
  flex: 3;
}
form .field-group:last-child{
  display: flex;
  justify-content: flex-end;
}
form .field-group:last-child .field{
  max-width: 75%;
}
input, select, textarea{
  padding: .4rem 1rem; 
  font-size: 1.8rem; 
  border: solid 1px #eee;
  background: #fff; 
  box-sizing: border-box;
}
textarea {
  width: 100%;  
}
input, select{
  width: 50%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"]{
  width: auto;
}

/*/////////////// RWD STYLES ////////////////////*/
@media (max-width: 720px) {
  form .field-group .label{
     text-align: left; 
     margin: 0;
  }
  input, select{
    width: 60%;
  }
}
@media (max-width: 480px) {
  input,
  select{width: 100%;}
  input[type="radio"],
  input[type="checkbox"],
  input[type="submit"]{
  width: auto;
  }
  form .field-group{
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 0;
  }
  form .field-group .label{
  padding: 0 0 5px 0;
  margin: 10px 0 0 0;
  }
}