​x
 
1
<!doctype html>
2
<title>Example</title>
3
<link href="https://fonts.googleapis.com/css?family=Unkempt" rel="stylesheet">
4
<style>
5
  .myForm > * {
6
   font: 1.4em 'Unkempt', sans-serif;
7
  }
8
  .myForm {
9
    display: grid;
10
    grid-template-columns: [labels] auto [controls] 1fr;
11
    grid-auto-flow: row;
12
    grid-gap: .8em .5em;
13
    background: beige;
14
    padding: 1.2em;
15
    width: 36em;
16
  }
17
  .myForm > label,
18
  .myForm > fieldset  {
19
    grid-column: labels;
20
    grid-row: auto;
21
  }
22
  .myForm > input,
23
  .myForm > select,
24
  .myForm > textarea,
25
  .myForm > button {
26
    grid-column: controls;
27
    grid-row: auto;
28
    padding: .4em;
29
    border: 0;
30
  }
31
  .myForm > fieldset {
32
    grid-column: span 2;
33
  }  
34
  .myForm > button {
35
    background: darkkhaki;
36
    color: white;
37
    }
38
  .myForm > textarea {
39
    min-height: 3em;
40
    }
41
</style>
42
<form class="myForm">
43
  <label for="customer_name">Name </label>
44
  <input type="text" name="customer_name" id="customer_name" required>
45
​
46
  <label for="phone_number">Phone </label>
47
  <input type="tel" name="phone_number" id="phone_number">
48
​
49
  <label for="email_address">Email </label>
50
  <input type="email" name="email_address" id="email_address">
51
​
52
  <fieldset>
53
    <legend>Which taxi do you require?</legend>
54
    <label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
55
    <label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
56
    <label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
57
  </fieldset>
58
​
59
  <fieldset>
60
    <legend>Extras</legend>
61
    <label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
62
    <label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
63
    <label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
64
  </fieldset>
65
​
66
  <label for="pickup_time">Pickup Date/Time</label>
67
  <input type="datetime-local" name="pickup_time" id="pickup_time" required>
68
​
69
  <label for="pickup_place">Pickup Place</label>
70
  <select name="pickup_place" id="pickup_place">
71
    <option value="" selected="selected">Select One</option>
72
    <option value="office" >Taxi Office</option>
73
    <option value="town_hall" >Town Hall</option>
74
    <option value="telepathy" >We'll Guess!</option>
75
  </select>
76
​
77
  <label for="dropoff_place">Dropoff Place</label>
78
  <input type="text" name="dropoff_place" id="dropoff_place" required 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
​
86
  <label for="comments">Special Instructions</label>
87
  <textarea name="comments" id="comments" maxlength="500"></textarea>
88
​
89
  <button>Submit Booking</button>
90
​
91
</form>