Q:

How to build a flexible HTML form layout?

I want to build a flexible html form with the following features:

Label should stay right above his component (see image below);
Components should fill (width dimension) all the space available on the screen, with a minimum width configuration;
If the screen width doesn't fit all form components, they should be stacked;

HTML Form with components filling all screen width

Same HTML Form with reduced screen width 
What is the more elegant solution to achieve this result, without using html table and only HTML + CSS?

A:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 
  <title></title>
  
</head>
<body>
  <form class="container-fluid">
<div class="row">
  <div class="col-md-4 col-xs-6">
    <label>field 1</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text1">
  </div>
  <div class="col-md-4 col-xs-6">
    <label>field 2</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="text2">
  </div>
  <div class="col-md-4 col-xs-6">
    <label>field 3</label>
    <select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
  </div>
</div>
  
  <div class="row">
    <div class="col-md-6 col-xs-8">
    <label>field 4</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text3">
    </div>
   <div class="col-md-6 col-xs-8">
    <label>field 6</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text4">
  </div> 
  </div>
  
  <div class="row">
    <div class="col-md-12 col-xs-12"
    <label>field5</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
  </div>
<br>
<button type="button" class="btn btn-primary">OK</button>
<button type="button" class="btn btn-info">CANCEL</button>
  </form>
</body>
</html>

This is all what you want, done by using the best way, use bootstrap,you will need to practice bootstrap, for reference here u can go Bootstrap forms. Happy coding!

