Существует ли семантический способ использования трех полей выбора для выбора «Дата рождения»?

Question

Сейчас я создаю веб-форму, и мне нужно, чтобы пользователи вводили свои DOB.

На данный момент я использовал 3 поля выбора. Один на день, один на месяц и один на год.

Я обернул их в ярлык «Дата рождения» и стилизовал их с помощью CSS.

Все выглядит хорошо, но когда я иду проверить вещи, я получаю следующую ошибку:

«Элемент метки может содержать не более одного потомка ввода, кнопки, выбора, текстовой области или ключевого слова»

Было бы хорошо узнать, есть ли лучший способ сделать это или какие-либо семантические альтернативы?

Заранее спасибо: о)

ps - я тоже должен был включить br в ярлык, чтобы флажки выбора очищали текст ярлыка. Я поместил поля выбора в тег label для целей позиционирования, так как моя форма состоит из двух столбцов. Там, кажется, не проблема проверки с BR, где он находится. В надежде, что все в порядке ...

Вот как выглядит атм:

и вот мой код атм:

<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 для вспомогательных технологий, которые могут помочь ответить на ваш вопрос (в вашем случае <input> будет заменено на <select>:

Вот как я склонен это делать (я не говорю, что это обязательно лучший способ, заметьте): у меня есть видимый текст для зрячих пользователей, и 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>