是否可以将一个标签元素用于 HTML5 表单中的多个选择元素？

Question

我正在为我正在学习的在线 Web 开发课程做作业。任务是创建一个 HTML 表单。

其中一个要求是要有 3 个下拉菜单 - 一个代表月、日和年。 “生日：”标签位于这三个菜单之前。

课程的作业解决方案显示三个选择元素嵌套在一个标签元素中。我试过了，虽然它在浏览器中看起来很正常，但当我将文件上传到 W3C 时，我收到了以下错误：

“错误：标签元素最多可以包含一个按钮、输入、仪表、输出、进度、选择或文本区域后代。”

是否有适当的方法将一个标签元素应用于多个选择元素？或者这是一种糟糕的做法，而是应该每天、每月和每年都有自己的标签？

这是我的代码：

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

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

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

-

Answer 1

在 HTML 中，<input /> 字段是 »primitive«，这意味着，每个字段都代表一个原始值，例如数字、字符串、布尔值等。出生日期，由三个值组成，一个代表年份，在这种情况下，月份和日期是“复杂的”。因此，您无法让 HTML »理解«您正试图以这种方式创建一个 »复杂« 字段。

这就是为什么（恕我直言）您不应该将标签（复杂）附加到任何字段（原始）并将标签用作“装饰”而不与任何字段建立任何连接，这样您就不会收到任何验证错误。

<label>'s 作为包装元素可以帮助（尤其是对于单选按钮）扩展»单击区域/命中框«并根据字段值应用一些 css，而无需任何 javascript。否则，将标签链接到字段对于搜索引擎和其他东西来说很酷，但由于 HTML 没有关于以下内容的标准化定义：»如何标记复杂输入«，很难说所提出的方法是否有用，或者将来会有用（阿菲克）。

所以在你的情况下，我会：

<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>