​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  * {
5
    box-sizing: border-box;
6
  }
7
  .myForm {
8
    display: grid;
9
    grid-template-areas:
10
      "customer taxi"
11
      "customer extras"
12
      "pickup dropoff"
13
      "instructions instructions"
14
      "submit submit";
15
    grid-template-columns: auto auto;  
16
    grid-template-rows: auto auto auto auto;
17
    grid-gap: .8em .5em;
18
    background: #eee;
19
    padding: 1.2em;
20
  }
21
  .myForm textarea {
22
    height: calc(100% - 1.5em);
23
    }
24
  .myForm button {
25
    background: gray;
26
    color: white;
27
    padding: 1em;
28
    }
29
  .myForm input:not([type=radio]):not([type=checkbox]),
30
  .myForm textarea,
31
  .myForm select {
32
    width: 100%;
33
    border: 0;
34
    padding: 1em;
35
    margin: .5em 0;
36
  }
37
  .myForm label {
38
   display: block;
39
  }
40
  fieldset {
41
    border: 0;
42
  }
43
  #customer {
44
    grid-area: customer;
45
  }
46
  #taxi {
47
    grid-area: taxi;
48
  }
49
  #extras {
50
    grid-area: extras;
51
  }
52
  #pickup {
53
    grid-area: pickup;
54
  }
55
  #dropoff {
56
    grid-area: dropoff;
57
  }
58
  #instructions {
59
    grid-area: instructions;
60
  }
61
  #submit {
62
    grid-area: submit;
63
  }
64
</style>
65
<form class="myForm">
66
  <fieldset id="customer">
67
    <label for="customer_name">Name </label>
68
    <input type="text" name="customer_name" id="customer_name" required>
69
​
70
    <label for="phone_number">Phone </label>
71
    <input type="tel" name="phone_number" id="phone_number">
72
​
73
    <label for="email_address">Email </label>
74
    <input type="email" name="email_address" id="email_address">
75
  </fieldset>
76
  <fieldset id="taxi">
77
    <legend>Which taxi do you require?</legend>
78
    <label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
79
    <label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
80
    <label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
81
  </fieldset>
82
​
83
  <fieldset id="extras">
84
    <legend>Extras</legend>
85
    <label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
86
    <label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
87
    <label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
88
  </fieldset>
89
  
90
  <fieldset id="pickup">
91
    <label for="pickup_time">Pickup Date/Time</label>
92
    <input type="datetime-local" name="pickup_time" id="pickup_time" required>
93
​
94
    <label for="pickup_place">Pickup Place</label>
95
    <select name="pickup_place" id="pickup_place">
96
      <option value="" selected="selected">Select One</option>
97
      <option value="office" >Taxi Office</option>
98
      <option value="town_hall" >Town Hall</option>
99
      <option value="telepathy" >We'll Guess!</option>
100
    </select>
101
  </fieldset>
102
​
103
  <fieldset id="dropoff">
104
  <label for="dropoff_place">Dropoff Place</label>
105
    <input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">
106
​
107
    <datalist id="destinations">
108
      <option value="Airport">
109
      <option value="Beach">
110
      <option value="Fred Flinstone's House">
111
    </datalist>
112
  </fieldset>
113
  
114
  <fieldset id="instructions">
115
    <label for="comments">Special Instructions</label>
116
    <textarea name="comments" id="comments" maxlength="500"></textarea>
117
  </fieldset>
118
​
119
  <button id="submit">Submit Booking</button>
120
​
121
</form>