Question

I’m currently building a web form and I need users to enter their DOB.

I have used 3 select boxes at the moment. One for the Day, one for the Month and one for the Year.

I have wrapped them within a ‘Date of Birth’ label and styled things up with CSS.

Everything looks ok, but when I go to validate things, I get the following error:

” The label element may contain at most one input, button, select, textarea, or keygen descendant “

It would be good to hear if there is a better way of doing this or any semantic alternatives?

Thanks in advance :o)

ps – I had to include a br within the label too, this is to get the select boxes to clear the label text. I’ve wrapped the select boxes within my label tag for positioning purposes, as my form is made up of a two column layout. There doesn’t seem to be a validation issue with the br where it is. So hoping it’s ok…

Here’s what things look like atm:

and here’s my code atm:

<label id="date_of_birth">Date of Birth:<br />
                    <select class="first" name="date_of_birth:day" tabindex="7">
                        <option value="">
                        <!-- -->
                        </option>
                        <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 name="date_of_birth:mon" tabindex="8">
                        <option value="">
                        <!-- -->
                        </option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <option value="4">Apr</option>
                        <option value="5">May</option>
                        <option value="6">Jun</option>
                        <option value="7">Jul</option>
                        <option value="8">Aug</option>
                        <option value="9">Sep</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>
                    <select name="date_of_birth:year" tabindex="9">
                        <option value="">
                        <!-- -->
                        </option>
                        <option value="1920">1920</option>
                        <option value="1921">1921</option>
                        <option value="1922">1922</option>
                        <option value="1923">1923</option>
                        <option value="1924">1924</option>
                        <option value="1925">1925</option>
                        <option value="1926">1926</option>
                        <option value="1927">1927</option>
                        <option value="1928">1928</option>
                        <option value="1929">1929</option>
                        <option value="1930">1930</option>
                        <option value="1931">1931</option>
                        <option value="1932">1932</option>
                        <option value="1933">1933</option>
                        <option value="1934">1934</option>
                        <option value="1935">1935</option>
                        <option value="1936">1936</option>
                        <option value="1937">1937</option>
                        <option value="1938">1938</option>
                        <option value="1939">1939</option>
                        <option value="1940">1940</option>
                        <option value="1941">1941</option>
                        <option value="1942">1942</option>
                        <option value="1943">1943</option>
                        <option value="1944">1944</option>
                        <option value="1945">1945</option>
                        <option value="1946">1946</option>
                        <option value="1947">1947</option>
                        <option value="1948">1948</option>
                        <option value="1949">1949</option>
                        <option value="1950">1950</option>
                        <option value="1951">1951</option>
                        <option value="1952">1952</option>
                        <option value="1953">1953</option>
                        <option value="1954">1954</option>
                        <option value="1955">1955</option>
                        <option value="1956">1956</option>
                        <option value="1957">1957</option>
                        <option value="1958">1958</option>
                        <option value="1959">1959</option>
                        <option value="1960">1960</option>
                        <option value="1961">1961</option>
                        <option value="1962">1962</option>
                        <option value="1963">1963</option>
                        <option value="1964">1964</option>
                        <option value="1965">1965</option>
                        <option value="1966">1966</option>
                        <option value="1967">1967</option>
                        <option value="1968">1968</option>
                        <option value="1969">1969</option>
                        <option value="1970">1970</option>
                        <option value="1971">1971</option>
                        <option value="1972">1972</option>
                        <option value="1973">1973</option>
                        <option value="1974">1974</option>
                        <option value="1975">1975</option>
                        <option value="1976">1976</option>
                        <option value="1977">1977</option>
                        <option value="1978">1978</option>
                        <option value="1979">1979</option>
                        <option value="1980">1980</option>
                        <option value="1981">1981</option>
                        <option value="1982">1982</option>
                        <option value="1983">1983</option>
                        <option value="1984">1984</option>
                        <option value="1985">1985</option>
                        <option value="1986">1986</option>
                        <option value="1987">1987</option>
                        <option value="1988">1988</option>
                        <option value="1989">1989</option>
                        <option value="1990">1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                        <option value="1996">1996</option>
                        <option value="1997">1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                        <option value="2000">2000</option>
                    </select>
                </label>

Answer 1

There is a suggestion here that structures a DOB appropriately for assistive technology that might help answer your question (in your case the <input>‘s would be replaced with <select>‘s:

This is how I’d tend to do it (I’m not saying it’s necessarily the
best way, mind you): I have visible text for sighted users, and have
css-positioned text offscreen for screen reader users where it will be
picked up and correctly associated with the appropriate controls.

Birthdate:            
<fieldset id="birthdate">
  <label for="birthday_day" class="offset">Birthday Day</label>
  <input type="text" name="birthday_day" id="birthday_day" size="2" maxlength="2" value="" />

  <label for="birthday_month" class="offset">Birthday Month</label>
  <input type="text" name="birthday_month" id="birthday_month" size="2" maxlength="2" value="" />

  <label for="birthday_year" class="offset">Birthday Year</label>
  <input type="text" name="birthday_year" id="birthday_year" size="4" maxlength="4" value="" />
</fieldset>

…you need a label for each control, otherwise assistive technology
will struggle with it – it will just say “edit:” and someone won’t
necessarily know what they are supposed to put in each field. This
method tells the assistive technology without taking up screen real
estate.