我目前正在构建一个Web表单，我需要用户输入他们的DOB。
我目前使用了3个选择框。一天一个，一个月，一个月。
我已将它们包含在“出生日期”标签内，并使用CSS设置样式。
一切看起来都不错，但是当我去验证时，我收到以下错误：
“标签元素最多可包含一个输入，按钮，选择，textarea或keygen后代”
听听是否有更好的方法来做这个或任何语义替代方案会很好吗？
在此先感谢：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>
有一个建议here适当地为辅助技术构建一个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>
......你需要一个标签用于每个控件，否则辅助技术将会挣扎 - 它只会说“编辑：”而某人不一定知道他们应该在每个领域放什么。这种方法告诉辅助技术而不占用屏幕空间。
请尝试以下代码表示出生日期，选择框。
码：
<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>
我的代码非常简单，使用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);
}