A A A A A

Date Picker with Consecutive Form Controls Labelled by TITLE

Accessibility Features of Example

Example

HTML Code



<form method="post" action="form-example-dp-title.php">

  <!--
      Text box input controls with LABEL markup using the FOR and ID attributes
   -->
  <p class="text" ><label for="event_title">Event Title</label><input type="text" name="event_title" id="event_title" size="40" value=""/></p>
  <p class="text" ><label for="event_loc">Event Location</label><input type="text" name="event_loc" id="event_loc" size="70" value=""/></p>
  <p class="date_picker">
    <label>Event Start </label>
    <select id="event_start_month" name="event_start_month" title="Event Start  month">
       <option value="January">January</option>
       <option value="February">February</option>
       <option value="March">March</option>
       <option value="April">April</option>
       <option value="May">May</option>
       <option value="June">June</option>
       <option value="July">July</option>
       <option value="August">August</option>
       <option value="September">September</option>
       <option value="October">October</option>
       <option value="November">November</option>
       <option value="December">December</option>
    </select>
    <select id="event_start_day" name="event_start_day" title="Event Start  day">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option>
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
    </select>
    <select id="event_start_year" name="event_start_year" title="Event Start  year">
       <option value="2008">2008</option>
       <option value="2009">2009</option>
       <option value="2010">2010</option>
       <option value="2011">2011</option>
       <option value="2012">2012</option>
    </select>
  </p>
  <p class="date_picker">
    <label>Event End </label>
    <select id="event_end_month" name="event_end_month" title="Event End  month">
       <option value="January">January</option>
       <option value="February">February</option>
       <option value="March">March</option>
       <option value="April">April</option>
       <option value="May">May</option>
       <option value="June">June</option>
       <option value="July">July</option>
       <option value="August">August</option>
       <option value="September">September</option>
       <option value="October">October</option>
       <option value="November">November</option>
       <option value="December">December</option>
    </select>
    <select id="event_end_day" name="event_end_day" title="Event End  day">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option>
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
    </select>
    <select id="event_end_year" name="event_end_year" title="Event End  year">
       <option value="2008">2008</option>
       <option value="2009">2009</option>
       <option value="2010">2010</option>
       <option value="2011">2011</option>
       <option value="2012">2012</option>
    </select>
  </p>
  <p class="submit"><input type="submit" value="Submit Event Request"/></p>
</form>

CSS Code

/* CSS Document */

.hidden {
  position: absolute;
  left: -200em;
  top: -20em;
}


form input:active,
form input:focus,
form select:active,
form select:focus,
form textarea:active,
form textarea:focus
{
  background-color: #F0F0A0;
}

form p {
  display: block;
  padding: 0;
  margin: 0;
  margin-top: .25em;
  margin-bottom: .25em;
  clear: left;
}


form p.date_picker label,
form p.text label,
form p.select label,
form p.radio {
  padding: 0;
  margin: 0;
  display: block;
  text-align: right;
  float: left;
  padding-right: .5em;
  width: 10em;
}


form p.check input,
form p.select input {
  padding: 0;
  margin: 0;
  margin-left: 10em;
  margin-right: .5em;
  text-align: right;
  float: left;
}

form p.check label {
  padding: 0;
  margin: 0;
  padding-left: 1em;
}


form ul.radio {
  padding: 0;
  margin: 0;
  margin-left: 11em;
}

form ul.radio li  {
  padding: 0;
  margin: 0;
  list-style: none;
}

form p.submit input,
form p.button input,
form p.image input {
  padding-left: 0em;
  margin-left: 11em;
}

form fieldset.radio,
form fieldset.checkbox {
  margin: 0;
  padding: .5em;
  margin-left: 10em;
  width: 20em;
}

form fieldset.radio {
  border: none;
}

form fieldset.radio ul,
form fieldset.checkbox ul {
  margin: 0;
  padding: 0;
}

form fieldset.radio ul li,
form fieldset.checkbox ul li {
  list-style: none;
}

form div.invalid {
  margin: 2em;
  padding: 1em;
  border: red 2px solid;
}


#content form div.invalid h2 {
  margin: 0;
  padding: 0;
  margin-bottom: .5em;
  text-decoration: none;
  border: none;
  color: black;
}

#content form div.invalid li a:link,
#content form div.invalid li a:visited {
  color: black;
  text-decoration: none;
  font-wieght: bold;
}

#content form div.invalid li a:hover,
#content form div.invalid li a:focus,
#content form div.invalid li a:active {
  color: red;
  text-decoration: underline;
}


Navigation

Other HTML Best Practices

Working Group