<title>Form template with CSS grid auto placement</title>
<link href="https://fonts.googleapis.com/css?family=Unkempt" rel="stylesheet">
<style>
.myForm > * {
font: 1.4em 'Unkempt', sans-serif;
}
.myForm {
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
grid-auto-flow: row;
grid-gap: .8em .5em;
background: beige;
padding: 1.2em;
width: 36em;
}
.myForm > label,
.myForm > fieldset {
grid-column: labels;
grid-row: auto;
}
.myForm > input,
.myForm > select,
.myForm > textarea {
grid-column: controls;
grid-row: auto;
padding: .4em;
border: 0;
}
.myForm > fieldset,
.myForm > button {
grid-column: span 2;
}
.myForm > button {
padding: 1em;
background: darkkhaki;
border: 0;
color: white;
}
.myForm > textarea {
min-height: 3em;
}
</style>
<form class="myForm">
<label for="customer_name">Name </label>
<input type="text" name="customer_name" id="customer_name" required>
<label for="phone_number">Phone </label>
<input type="tel" name="phone_number" id="phone_number">
<label for="email_address">Email </label>
<input type="email" name="email_address" id="email_address">
<fieldset>
<legend>Which taxi do you require?</legend>
<label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
<label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
<label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
</fieldset>
<fieldset>
<legend>Extras</legend>
<label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
<label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
<label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
</fieldset>
<label for="pickup_time">Pickup Date/Time</label>
<input type="datetime-local" name="pickup_time" id="pickup_time" required>
<label for="pickup_place">Pickup Place</label>
<select name="pickup_place" 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>
<label for="dropoff_place">Dropoff Place</label>
<input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">
<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
<label for="comments">Special Instructions</label>
<textarea name="comments" id="comments" maxlength="500"></textarea>
<button>Submit Booking</button>
</form>