输入标签总是必须位于表单标签的正下方吗？或者在表单标签下多层嵌套输入是否有效？

Question

我正在考虑在表单下包装各种输入标签，我想知道有多少嵌套元素是可能的，并且在语义上不会很奇怪。 我听说有语义规则，有些人提到了 html 语义以及为什么包装形式很重要。

这里 div 标签与表单无关，但输入仍在表单下，那么这在语义上是否正确？会有问题吗？

<form>
   <div>
      <div>
         <input ... />
      </div>
   </div>
</form>

Answer 1

是的，您可以将输入元素嵌套在表单标签内的多个级别的其他元素（例如 div、span 等）中，而不会违反 HTML 语义。只要嵌套元素是有效的流内容，HTML5 规范就允许此类嵌套。嵌套的级别没有严格的限制，但应逻辑性且可访问地使用，以确保良好的实践。

喜欢

<form>
   <table>
      <tr>
         <td>
            <input type="text" name="username" />
         </td>
      </tr>
   </table>
</form>

使用表格进行布局可以解决您的设计需求，但在现代 HTML 中在语义上是不正确的。表格只能用于表格数据，不能用于表单布局。相反，您使用 div 元素和 CSS 进行布局在语义上是正确的。

一如既往，您可以使用 https://validator.w3.org/（标记验证器）进行检查。 （很抱歉从评论中获取它，如果您想添加单独的答案，我会尽快将其删除。）