css - 如果我们不能只使用纯语义的方式，应该使用什么标签来进行表单布局？

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

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

这样你就可以做一些好的造型或在需要时隐藏一些东西。

Answer 3

如果您想添加额外的元素以允许来自 CSS 的更多布局样式挂钩，但它们本身没有语义内容，请使用<div>（或<span>用于内联）。这就是他们的目的。