HTML5フォームで複数のselect要素に1つのlabel要素を使用できますか？

Question

私は自分が行っているオンラインWeb開発コースの課題に取り組んでいます。割り当ては、HTMLフォームを作成することです。

1つの要件は、月、日、年の3つのドロップダウンメニューです。 「誕生日：」のラベルは、これらの3つのメニューの前に表示されます。

コースの割り当てソリューションでは、1つのラベル要素の内側に3つの選択要素がネストされています。私はこれを試して、ブラウザーで正常に見えましたが、ファイルをW3Cにアップロードしたときに次のエラーが表示されました。

"エラー：ラベル要素には、入力、メーター、 、select、またはtextareaの子孫になります。

1つのラベル要素を複数の選択要素に適用する適切な方法はありますか？それとも、これは貧しい習慣ですか？その代わりに、毎日、毎月、そして一年ごとに独自のラベルを取得する必要がありますか？ここで

が私のコードです：

<div> 
 
\t \t <label>Birthday: 
 
\t \t \t <select name="month" required> 
 
\t \t \t \t <option value="">Month</option> 
 
\t \t \t \t <option value="Jan">Jan</option> 
 
\t \t \t \t <option value="Feb">Feb</option> 
 
\t \t \t \t <option value="Mar">Mar</option> 
 
\t \t \t \t <option value="Apr">Apr</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select name="day" required> 
 
\t \t \t \t <option value="">Day</option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t \t <option value="3">3</option> 
 
\t \t \t \t <option value="4">4</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select name="year" required> 
 
\t \t \t \t <option value="">Year</option> 
 
\t \t \t \t <option value="1918">1918</option> 
 
\t \t \t \t <option value="1988">1988</option> 
 
\t \t \t \t <option value="1998">1998</option> 
 
\t \t \t \t <option value="2008">2008</option> 
 
\t \t \t </select> 
 
\t \t </label> 
 
\t </div>

- HTMLで

Answer 1

、<input />フィールドは意味プリミティブ«を、»され、それぞれが単一の値プリミティブ値を表し、数、文字列、ブール値などのようなものです。年、月、日の3つの値からなる生年月日は、その文脈。だからあなたは、»»そのように複雑なフィールドを作成しようとしていることをHTMLで理解できない。

これは、（imho）フィールド（プリミティブ）のいずれかにラベル（複合）を付けて、フィールドに接続せずに»装飾«としてラベルを使用しないでください。

<label>のラッピング要素としては、（特にラジオボタンの場合）»クリック領域/ヒットボックス«を拡張し、javascriptなしでフィールド値に応じてCSSを適用すると便利です。それ以外の場合は、ラベルをフィールドにリンクすることは検索エンジンや要素にとってはクールですが、HTMLには次のような標準化された定義がありません：»複雑な入力のラベル付け方法«、 （afik）。

だからあなたのケースでは、私だけでしょう：

<form> 
    <div class="complex field-group"> 
    <label>…</label> 
    <div class="fields"> 
     <!-- eventually to help bots 
     <label for="x" style="display:none;">…</label> 
     --> 
     <input id="x"/> 

     … 
    </div> 
    </div> 
</form>