​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .myForm {
5
    display: flex;
6
    flex-direction: column;
7
    background-color: beige;
8
    border-radius: 3px;
9
    padding: 1em;
10
  }
11
  .row {
12
    display: flex;
13
    justify-content: center;
14
  }
15
  .column {
16
    display: flex;
17
    flex-direction: column;
18
    padding: 1em;
19
  }
20
  .input-group {
21
    display: flex;
22
  }
23
  .input-group > label {
24
    margin-right: 1em;
25
    padding: .5em 0;
26
  }
27
  .myForm input,
28
  .myForm select {
29
    flex: 6;
30
    padding: .5em;
31
    margin-bottom: 1em;
32
  }
33
  .myForm button {
34
   padding: 1em;
35
    background: gray;
36
    color: white;
37
    border: 0;
38
  }
39
  .myForm fieldset {
40
    border: 0;
41
  }
42
  .taxi > label,
43
  .extras > label {
44
    display: block;
45
  }
46
</style>
47
<form class="myForm">
48
​
49
  <div class="row">
50
    <div class="column">
51
      <div class="input-group">
52
        <label for="customer_name">Name </label>
53
        <input id="customer_name">
54
      </div>
55
      <div class="input-group">
56
        <label for="phone_number">Phone </label>
57
        <input type="tel" id="phone_number">
58
      </div>
59
      <div class="input-group">
60
        <label for="email_address">Email </label>
61
        <input type="email" id="email_address">
62
      </div>
63
      <div class="input-group">
64
        <label for="pickup_time">Pickup Date/Time</label>
65
        <input type="datetime-local" id="pickup_time">
66
      </div>
67
      <div class="input-group">
68
        <label for="pickup_place">Pickup Place</label>
69
        <select id="pickup_place">
70
          <option value="" selected="selected">Select One</option>
71
          <option value="office" >Taxi Office</option>
72
          <option value="town_hall" >Town Hall</option>
73
          <option value="telepathy" >We'll Guess!</option>
74
        </select>
75
      </div>
76
      <div class="input-group">
77
        <label for="dropoff_place">Dropoff Place</label>
78
        <input type="text" id="dropoff_place" list="destinations">
79
​
80
        <datalist id="destinations">
81
          <option value="Airport">
82
          <option value="Beach">
83
          <option value="Fred Flinstone's House">
84
        </datalist>
85
      </div>
86
    </div>
87
    <div class="column">
88
      <fieldset class="taxi">
89
        <legend>Which taxi do you require?</legend>
90
        <label> <input type="radio" id="taxi_car" value="car"> Car </label>
91
        <label> <input type="radio" id="taxi_van" value="van"> Van </label>
92
        <label> <input type="radio" id="taxi_tuk" value="tuktuk"> Tuk Tuk </label>
93
      </fieldset>
94
​
95
      <fieldset class="extras">
96
        <legend>Extras</legend>
97
        <label> <input type="checkbox" id="extras_baby" value="baby"> Baby Seat </label>
98
        <label> <input type="checkbox" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
99
        <label> <input type="checkbox" id="extras_tip" value="tip"> Stock Tip </label>
100
      </fieldset>
101
    </div>
102
  </div>
103
  
104
  <div class="row">
105
    
106
    <button id="submit">Submit Booking</button>
107
    
108
  </div>
109
</form>