CSS Example: Flexbox Form Example 5

<!doctype html>
<title>Example</title>
<style>
  .myForm {
    display: flex;
    flex-direction: column;
    background-color: beige;
    border-radius: 3px;
    padding: 1em;
  }
  .row {
    display: flex;
    justify-content: center;
  }
  .column {
    display: flex;
    flex-direction: column;
    padding: 1em;
  }
  .input-group {
   	display: flex;
  }
  .input-group > label {
    margin-right: 1em; 
    padding: .5em 0;
  }
  .myForm input,
  .myForm select {
    flex: 6; 
    padding: .5em;
    margin-bottom: 1em;
  }
  .myForm button {
   padding: 1em; 
    background: gray;
    color: white;
    border: 0;
  }
  .myForm fieldset {
   	border: 0; 
  }
  .taxi > label,
  .extras > label {
    display: block;
  }
</style>
<form class="myForm">

  <div class="row">
    <div class="column">
      <div class="input-group">
        <label for="customer_name">Name </label>
        <input id="customer_name">
      </div>
      <div class="input-group">
        <label for="phone_number">Phone </label>
        <input type="tel" id="phone_number">
      </div>
      <div class="input-group">
        <label for="email_address">Email </label>
        <input type="email" id="email_address">
      </div>
      <div class="input-group">
        <label for="pickup_time">Pickup Date/Time</label>
        <input type="datetime-local" id="pickup_time">
      </div>
      <div class="input-group">
        <label for="pickup_place">Pickup Place</label>
        <select id="pickup_place">
          <option value="" selected="selected">Select One</option>
          <option value="office" >Taxi Office</option>
          <option value="town_hall" >Town Hall</option>
          <option value="telepathy" >We'll Guess!</option>
        </select>
      </div>
      <div class="input-group">
        <label for="dropoff_place">Dropoff Place</label>
        <input type="text" id="dropoff_place" list="destinations">

        <datalist id="destinations">
          <option value="Airport">
          <option value="Beach">
          <option value="Fred Flinstone's House">
        </datalist>
      </div>
    </div>
    <div class="column">
      <fieldset class="taxi">
        <legend>Which taxi do you require?</legend>
        <label> <input type="radio" id="taxi_car" value="car"> Car </label>
        <label> <input type="radio" id="taxi_van" value="van"> Van </label>
        <label> <input type="radio" id="taxi_tuk" value="tuktuk"> Tuk Tuk </label>
      </fieldset>

      <fieldset class="extras">
        <legend>Extras</legend>
        <label> <input type="checkbox" id="extras_baby" value="baby"> Baby Seat </label>
        <label> <input type="checkbox" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
        <label> <input type="checkbox" id="extras_tip" value="tip"> Stock Tip </label>
      </fieldset>
    </div>
  </div>
  
  <div class="row">
    
    <button id="submit">Submit Booking</button>
    
  </div>
</form>

​x
 
<!doctype html>
<title>Example</title>
<style>
  .myForm {
    display: flex;
    flex-direction: column;
    background-color: beige;
    border-radius: 3px;
    padding: 1em;
  }
  .row {
    display: flex;
    justify-content: center;
  }
  .column {
    display: flex;
    flex-direction: column;
    padding: 1em;
  }
  .input-group {
    display: flex;
  }
  .input-group > label {
    margin-right: 1em; 
    padding: .5em 0;
  }
  .myForm input,
  .myForm select {
    flex: 6; 
    padding: .5em;
    margin-bottom: 1em;
  }
  .myForm button {
   padding: 1em; 
    background: gray;
    color: white;
    border: 0;
  }
  .myForm fieldset {
    border: 0; 
  }
  .taxi > label,
  .extras > label {
    display: block;
  }
</style>
<form class="myForm">
​
  <div class="row">
    <div class="column">
      <div class="input-group">
        <label for="customer_name">Name </label>
        <input id="customer_name">
      </div>
      <div class="input-group">
        <label for="phone_number">Phone </label>
        <input type="tel" id="phone_number">
      </div>
      <div class="input-group">
        <label for="email_address">Email </label>
        <input type="email" id="email_address">
      </div>
      <div class="input-group">
        <label for="pickup_time">Pickup Date/Time</label>
        <input type="datetime-local" id="pickup_time">
      </div>
      <div class="input-group">
        <label for="pickup_place">Pickup Place</label>
        <select id="pickup_place">
          <option value="" selected="selected">Select One</option>
          <option value="office" >Taxi Office</option>
          <option value="town_hall" >Town Hall</option>
          <option value="telepathy" >We'll Guess!</option>
        </select>
      </div>
      <div class="input-group">
        <label for="dropoff_place">Dropoff Place</label>
        <input type="text" id="dropoff_place" list="destinations">
​
        <datalist id="destinations">
          <option value="Airport">
          <option value="Beach">
          <option value="Fred Flinstone's House">
        </datalist>
      </div>
    </div>
    <div class="column">
      <fieldset class="taxi">
        <legend>Which taxi do you require?</legend>
        <label> <input type="radio" id="taxi_car" value="car"> Car </label>
        <label> <input type="radio" id="taxi_van" value="van"> Van </label>
        <label> <input type="radio" id="taxi_tuk" value="tuktuk"> Tuk Tuk </label>
      </fieldset>
​
      <fieldset class="extras">
        <legend>Extras</legend>
        <label> <input type="checkbox" id="extras_baby" value="baby"> Baby Seat </label>
        <label> <input type="checkbox" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
        <label> <input type="checkbox" id="extras_tip" value="tip"> Stock Tip </label>
      </fieldset>
    </div>
  </div>
  
  <div class="row">
    
    <button id="submit">Submit Booking</button>
    
  </div>
</form>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

About CSS

CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link> tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style> HTML tag, or by using the style attribute within an individual HTML tag.