是否有使用 3 个选择框来选择“出生日期”的语义方式？

Question

我目前正在构建一个网络表单，我需要用户输入他们的出生日期。

我目前使用了 3 个选择框。一种用于日，一种用于月，一种用于年。

我将它们包裹在“出生日期”标签中，并使用 CSS 设置样式。

一切看起来都正常，但是当我去验证事情时，我收到以下错误：

" 标签元素可能最多包含一个输入、按钮、选择、文本区域或 keygen 后代 "< /strong>

很高兴听到是否有更好的方法或任何语义替代方案？

提前致谢 :o)

ps - 我也必须在标签中包含 br，这是为了让选择框清除标签文本。为了定位目的，我将选择框包裹在标签标记中，因为我的表单由两列布局组成。 br 所在位置似乎不存在验证问题。所以希望一切顺利...

这是 atm 的样子：

和这是我的 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

这里有一个构建 DOB 的建议适合可能有助于回答您的问题的辅助技术（在您的情况下，将替换为：

这就是我倾向于这样做的方式（我并不是说这一定是
最好的方法，请注意）：我为视力正常的用户提供了可见的文本，并且有
屏幕阅读器用户的 css 定位文本离屏位置
拾取并与适当的控件正确关联。

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>

...每个控件都需要一个标签，否则辅助技术
会挣扎 - 它只会说“编辑：”而有人不会
必须知道他们应该在每个领域投入什么。这
方法告诉辅助技术不占用屏幕真实
房地产。

Answer 2

我的代码，非常简单，使用jquery： codepen

HTML :

<form class = "container">
    <label >birthday<span>*</span></label>
    <SELECT id ="year" name = "yyyy" onchange="change_year(this)">
    </SELECT>
    <SELECT  id ="month" name = "mm" onchange="change_month(this)">
    </SELECT>
    <SELECT id ="day" name = "dd" >
    </SELECT>
</form>

JS:

var Days = [31,28,31,30,31,30,31,31,30,31,30,31];// index => month [0-11]
$(document).ready(function(){
    var option = '<option value="day">day</option>';
    var selectedDay="day";
    for (var i=1;i <= Days[0];i++){ //add option days
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#day').append(option);
    $('#day').val(selectedDay);

    var option = '<option value="month">month</option>';
    var selectedMon ="month";
    for (var i=1;i <= 12;i++){
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#month').append(option);
    $('#month').val(selectedMon);

    var d = new Date();
    var option = '<option value="year">year</option>';
    selectedYear ="year";
    for (var i=1930;i <= d.getFullYear();i++){// years start i
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $('#year').append(option);
    $('#year').val(selectedYear);
});
function isLeapYear(year) {
    year = parseInt(year);
    if (year % 4 != 0) {
          return false;
      } else if (year % 400 == 0) {
          return true;
      } else if (year % 100 == 0) {
          return false;
      } else {
          return true;
      }
}

function change_year(select)
{
    if( isLeapYear( $(select).val() ) )
      {
            Days[1] = 29;
            if( $("#month").val() == 2)
            {
                   var day = $('#day');
                   var val = $(day).val();
                   $(day).empty();
                   var option = '<option value="day">day</option>';
                   for (var i=1;i <= Days[1];i++){ //add option days
                         option += '<option value="'+ i + '">' + i + '</option>';
             }
                   $(day).append(option);
                   if( val > Days[ month ] )
                   {
                          val = 1;
                   }
                   $(day).val(val);
             }
    }
    else {
        Days[1] = 28;
    }
}

function change_month(select) {
    var day = $('#day');
    var val = $(day).val();
    $(day).empty();
    var option = '<option value="day">day</option>';
    var month = parseInt( $(select).val() ) - 1;
    for (var i=1;i <= Days[ month ];i++){ //add option days
        option += '<option value="'+ i + '">' + i + '</option>';
    }
    $(day).append(option);
    if( val > Days[ month ] )
    {
        val = 1;
    }
    $(day).val(val);
}

Answer 3

尝试使用以下代码获取出生日期，然后选择框。

代码：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

  <script>


     var setyear=0;
      var setmonth=0;
      var dayarray=new Array("31","28","31","30","31","30","31","31","30","31","30","31");
    function onchangeyear(val){
            setyear=val;
            var dayoption='<option value="">Day</option>';
           // dayarray[val-1];
           if(setmonth!=0){
               if(val%4==0 && setmonth==2) {
                   for(var i=1;i<=parseInt((dayarray[setmonth-1]))+1;i++)  {
                    dayoption +='<option value="'+i+'">'+i+'</option>'; 
              }
          }else{
              for(var i=1;i<=parseInt(dayarray[setmonth-1]);i++)  {
                dayoption +='<option value="'+i+'">'+i+'</option>'; 
          }      
        }
       $('#day').html(dayoption);
   }else{
         for(var i=1;i<=31;i++)  {
         dayoption +='<option value="'+i+'">'+i+'</option>'; 
     }
      $('#day').html(dayoption);
   }
}



 function onchangemonth(val){
               setmonth=val;
               var dayoption='<option value="">Day</option>';
             // dayarray[val-1];
              if(setyear!=0){
           if(setyear%4==0 && val==2) {
                 for(var i=1;i<=parseInt((dayarray[val-1]))+1;i++)  {
                 dayoption +='<option value="'+i+'">'+i+'</option>'; 
              }
           }else{
                for(var i=1;i<=(dayarray[val-1]);i++)  {
                dayoption +='<option value="'+i+'">'+i+'</option>'; 
           }      
       }
           $('#day').html(dayoption);
   }else{
         for(var i=1;i<=dayarray[val-1];i++)  {
              dayoption +='<option value="'+i+'">'+i+'</option>'; 
       }
        $('#day').html(dayoption);
   }
}




    </script>



   <label id="date_of_birth">Date of Birth:<br />
   <select class="first" name="date_of_birth:day" tabindex="7" id="day">
          <option value="">--day--</option>
          <option value="1">1</option>
            -------------------------
          <option value="31">31</option>
    </select>     

    <select name="date_of_birth:mon" tabindex="8" id="month" onchange="onchangemonth(this.value)">
          <option value="">month</option>
          <option value="1">Jan</option>
            -------------------   
          <option value="12">Dec</option>
    </select>


     <select name="date_of_birth:year" tabindex="9" id="year" onchange="onchangeyear(this.value)">
          <option value=""> years</option>
          <option value="1920">1920</option>         
               ----------------     
           <option value="2010">2010</option>       
           <option value="2011">2011</option> 
           <option value="2012">2012</option>      

     </select>

 </label>