如果不能只使用纯语义的方式，应该使用什么标签来进行Form布局呢？

Question

我知道这是纯粹的语义方式

<form action="" method="">
        <fieldset>
          <legend>Contact Form</legend>
              <label for="name">Name</label>
              <input name="name" id="name" size="20" />
           </fieldset> 
<form>

，但有时出于某些设计目的，它不足以获得所需的样式。所以我的问题是除了这个纯语义方法之外，

这个代码不是也是语义的（在纯语义方法之后），因为表单是一组我们逐一填充的有序字段

ol {
  list-style: none; 
  padding-left: 0;
  }


<form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>

      <ol>
        <li>
          <label for="name">Name</label>
          <input name="name" id="name" size="20" />
       </li> 

       <li>
        <label for="email">Email</label>
        <input name="email" id="email" size="20" />
       </li>

      <li>
        <label for=" Choices"> Choices (radio)</label>
          <input type="radio" name=" Choice" /> Choice 1
          <input type="radio" name=" Choice" /> Choice 2
          <input type="radio" name=" Choice" /> Choice 3
      </li>

      <li>    
      <label for=" Choices3"> Choices (checkbox)</label> 
        <input type="checkbox" name=" Choice3" /> Choice 1
        <input type="checkbox" name=" Choice3" /> Choice 2
        <input type="checkbox" name=" Choice3" /> Choice 3
     </li>       

     <li>
      <label for="dropdown">Question</label>

        <select id="dropdown">
          <optgroup label="Group of Options">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </optgroup>
        </select>
      </li>

      <li>  
      <label for="message">Message</label><br />
        <textarea name="message"rows="12" cols="36"></textarea>
      </li>

      <li><input type="submit" value="send it" /></li>

      </ol>

    </fieldset>
  </form>

Answer 1

如果表单字段要按特定顺序完成，那么是的，我会说有序列表对于分隔表单元素在语义上是有意义的。

Answer 2

如果您想添加额外的元素以允许来自 CSS 的更多布局样式挂钩，但其本身没有语义内容，请使用

（或 对于内联）。这就是他们存在的目的。

Answer 3

您应该使用定义列表，这样您的标签/输入可以通过 for 和 id 相互链接，还可以通过定义标题（标签）和定义描述（输入）相互链接。

这样您就可以做一些好的样式或隐藏一些东西（如果需要）。