​x
 
1
<!doctype html>
2
<title>Form template with CSS grid auto placement</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
    grid-column: controls;
26
    grid-row: auto;
27
    padding: .4em;
28
    border: 0;
29
  }
30
  .myForm > fieldset,
31
  .myForm > button {
32
    grid-column: span 2;
33
  }  
34
  .myForm > button {
35
    padding: 1em;
36
    background: darkkhaki;
37
    border: 0;
38
    color: white;
39
    }
40
  .myForm > textarea {
41
    min-height: 3em;
42
    }
43
</style>
44
<form class="myForm">
45
  <label for="customer_name">Name </label>
46
  <input type="text" name="customer_name" id="customer_name" required>
47
​
48
  <label for="phone_number">Phone </label>
49
  <input type="tel" name="phone_number" id="phone_number">
50
​
51
  <label for="email_address">Email </label>
52
  <input type="email" name="email_address" id="email_address">
53
​
54
  <fieldset>
55
    <legend>Which taxi do you require?</legend>
56
    <label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
57
    <label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
58
    <label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
59
  </fieldset>
60
​
61
  <fieldset>
62
    <legend>Extras</legend>
63
    <label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
64
    <label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
65
    <label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
66
  </fieldset>
67
​
68
  <label for="pickup_time">Pickup Date/Time</label>
69
  <input type="datetime-local" name="pickup_time" id="pickup_time" required>
70
​
71
  <label for="pickup_place">Pickup Place</label>
72
  <select name="pickup_place" id="pickup_place">
73
    <option value="" selected="selected">Select One</option>
74
    <option value="office" >Taxi Office</option>
75
    <option value="town_hall" >Town Hall</option>
76
    <option value="telepathy" >We'll Guess!</option>
77
  </select>
78
​
79
  <label for="dropoff_place">Dropoff Place</label>
80
  <input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">
81
​
82
  <datalist id="destinations">
83
    <option value="Airport">
84
    <option value="Beach">
85
    <option value="Fred Flinstone's House">
86
  </datalist>
87
​
88
  <label for="comments">Special Instructions</label>
89
  <textarea name="comments" id="comments" maxlength="500"></textarea>
90
​
91
  <button>Submit Booking</button>
92
​
93
</form>