Printer-friendly page
Screen-friendly pageDate Picker with Consecutive Form Controls Labelled by Hidden LABEL
Accessibility Features of Example
- The effective labels for the consecutive
selectelements, thelabelelements, are hidden from visual rendering using CSS technique of absolute positioning (i.e.position: absolute; top: -20em; left: -200em). - The
labelelement content provides effective labels to form controlsinputelements oftype="text"andselectelements.
Example
HTML Code
<form method="post" action="form-example-dp-label.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>
<label for="event_start_month" class="hidden">Event Start Month</label>
<select id="event_start_month" name="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>
<label for="event_start_day" class="hidden">Event Start Day</label>
<select id="event_start_day" name="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>
<label for="event_start_year" class="hidden">Event Start Year</label>
<select id="event_start_year" name="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>
<label for="event_end_month" class="hidden">Event End Month</label>
<select id="event_end_month" name="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>
<label for="event_end_day" class="hidden">Event End Day</label>
<select id="event_end_day" name="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>
<label for="event_end_year" class="hidden">Event End Year</label>
<select id="event_end_year" name="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;
}