Html 表单元素的结构化使用方法

我经常对如何将表单元素与table或ul标记一起使用感到困惑。 哪一个应该是子标签表格或表格/ul

<form>
     <ul></ul>      
</form>

<form>
     <table></table>        
</form>

或

没有指定的标准表单设计方法。如果我没有错的话，现在表格和列表的使用非常少，除非是强制性的。最好使用div/span/p和标签

检查

与表单一起使用的常见HTML结构

除了特定于HTML表单的结构之外，最好记住表单只是HTML。这意味着您可以使用HTML的所有功能来构造HTML表单

正如您在示例中所看到的，通常使用

或

元素包装标签及其小部件

除了

元素之外，使用HTML标题和分段构造复杂表单也是常见的做法

当使用复选框和单选按钮时，也经常使用HTML列表

让我们看一个简单付款表单的示例：

<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

  <section>
    <h2>Contact information</h2>

    <fieldset>
      <legend>Title</legend>
      <ul>
        <li>
          <label for="title_1">
            <input type="radio" id="title_1" name="title" value="M." />
            Mister
          </label>
        </li>
        <li>
          <label for="title_2">
            <input type="radio" id="title_2" name="title" value="Ms." />
            Miss
          </label>
        </li>
      </ul>
    </fieldset>

    <p>
      <label for="name">
        <span>Name: </span>
        <input type="text" id="name" name="username" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>

     <p>
      <label for="mail">
        <span>E-mail: </span>
        <input type="email" id="mail" name="usermail" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
  </section>

  <section>
    <h2>Payment information</h2>

    <p>
      <label for="card">
        <span>Card type:</span>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </label>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <input type="text" id="number" name="cardnumber" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
      </label>
    </p>
  </section>

  <section>
    <p>
      <button>Validate the payment</button>
    </p>
  </section>
</form>

付款单
必填字段后面跟着*

联系方式
标题


先生


错过



姓名：
*


电邮：
*

付款信息

卡类型：
签证
万事达卡
美国运通


卡号：
*


到期日期：
*
格式为mm/yy


验证付款

两个都是正确的，所有的东西都是你需要的：如果你需要一个以上的形式，那么第二个代码组是正确的，如果你只需要一个，那么另一个要考虑的是你想要给你的表单的布局。根据布局的不同，您可以使用table（最好将div与
display:table
一起使用，以增加引用）或ul，或者只使用输入元素。
<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

  <section>
    <h2>Contact information</h2>

    <fieldset>
      <legend>Title</legend>
      <ul>
        <li>
          <label for="title_1">
            <input type="radio" id="title_1" name="title" value="M." />
            Mister
          </label>
        </li>
        <li>
          <label for="title_2">
            <input type="radio" id="title_2" name="title" value="Ms." />
            Miss
          </label>
        </li>
      </ul>
    </fieldset>

    <p>
      <label for="name">
        <span>Name: </span>
        <input type="text" id="name" name="username" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>

     <p>
      <label for="mail">
        <span>E-mail: </span>
        <input type="email" id="mail" name="usermail" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
  </section>

  <section>
    <h2>Payment information</h2>

    <p>
      <label for="card">
        <span>Card type:</span>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </label>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <input type="text" id="number" name="cardnumber" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
      </label>
    </p>
  </section>

  <section>
    <p>
      <button>Validate the payment</button>
    </p>
  </section>
</form>