Is there a semantic way of using 3 select boxes to choose 'Date of Birth'?
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>
Solution
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.
- Getting checkbox values on submit
- How can I detect/watch "dirty-status" of an angular2-form in the right way?
- Using setCustomValidity stops input from validating
- Adding * to required form labels
- Why isn't my form data inserted into the database?
- How to submit a form to a differnt target using React's useActionState hook?
- Submit button doesn't refresh page and send POST request
- Date Field Not Outputting Correct Format on URL
- save page as html along with contents
- Send forms to separate pages for handling, or back to the same page?
- Regex to match one of two words
- How can I prevent my Excel VBA forms from distorting when the user scrolls down using the vertical scroll bar?
- How can I send data from form vue 3 to server laravel
- how do i add a link so that when i select an element in my dropdown menu i get redirected to thee page
- Radio buttons with react-hook-form
- How to add a special character to A Password Validation Form
- How to filter an objects's properties for data
- Can't upload file via HTML form using Calcite Input component ("Failed to set the 'value' property on 'HTMLInputElement'")
- Set the default value of an input field
- Html form input field - pattern attribute - allow integers and increments of 0.5
- How do I make an HTML radio button form change the value in another box?
- How to use FormData in node.js without Browser?
- PHP form send email to multiple recipients
- Cannot edit form inputs using Nextjs 14 (app router) and Supabase
- How can I disable Hotwire / Turbo (the Turbolinks replacement) for all forms in a Rails application?
- How to validate a text field on value changed?
- Python Input Sanitization
- How to get around the FormSpree redirect?
- Proper way to handle multiple forms on one page in Django
- How to prevent the <p> tag from wrapping around my input with tinymce in Rails?