Skip to content

From and to dates, in three parts

What it sounds like

Event date group, From day, 1, combo box

In this case, the from and to dates form one logical group, and should all be in one fieldset.

What it looks like

Event date From To 
<fieldset>
  <legend class="visuallyhidden">Event date</legend>

  <span>From</span>

  <select
    aria-label="From day"
    id="event-date-from-day"
    name="event-date-from-day"
  >
    <option>1</option>
    <option>etc</option>
  </select>

  <select
    aria-label="From month"
    id="event-date-from-month"
    name="event-date-from-month"
  >
    <option>January</option>
    <option>etc</option>
  </select>

  <select
    aria-label="From year"
    id="event-date-from-year"
    name="event-date-from-year"
  >
    <option>2020</option>
    <option>etc</option>
  </select>

  <span>To</span>

  <select aria-label="To day" id="event-date-to-day" name="event-date-to-day">
    <option>1</option>
    <option>etc</option>
  </select>

  <select
    aria-label="To month"
    id="event-date-to-month"
    name="event-date-to-month"
  >
    <option>January</option>
    <option>etc</option>
  </select>

  <select
    aria-label="To year"
    id="event-date-to-year"
    name="event-date-to-year"
  >
    <option>2020</option>
    <option>etc</option>
  </select>
</fieldset>