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的更多布局样式挂钩，但它们本身没有语义内容，请使用<div>（或<span>进行内联）。这就是他们的目的。

Answer 3

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

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

如果我们不能只使用纯语义方式，应使用什么标签来制作表格布局？

3 个答案: