Skip to content

Four part date control with visible names

What it sounds like

Event date group, Day, 1, combo box

This is great because the user knows the name of each control and the name of the group.

What it looks like

Event date 
<fieldset>
  <legend>Event date</legend>

  <label for="event-date-day">Day</label>
  <select id="event-date-day" name="event-date-day">
    <option>1</option>
    <option>etc</option>
  </select>

  <label for="event-date-month">Month</label>
  <select id="event-date-month" name="event-date-month">
    <option>January</option>
    <option>etc</option>
  </select>

  <label for="event-date-year">Year</label>
  <select id="event-date-year" name="event-date-year">
    <option>2020</option>
    <option>etc</option>
  </select>

  <label for="event-date-timezone">Timezone</label>
  <select id="event-date-timezone" name="event-date-timezone">
    <option value="12.0">(GMT +12:00) Wellington</option>
    <option>etc</option>
  </select>
</fieldset>