structured way of using form element

Question

I often get confused with how to use form element with table or ul tag. Which one should be child tag form or table/ul

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

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

or

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

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

Both are correct, all matter is what you need : if you need more than one form, so the second bloc of code is correct, if you only need one, the other thing to consider is the layout you want to give to your form. Depending the layout, you can use table (better use div with `display : table` to increase referencement) or ul, or nothing than the input element. — Anwar, Sep 09 '15 at 10:42

score 1 · Answer 1 · edited Nov 17 '15 at 08:09

There is no standard way of designing a form specified. If I am not wrong, nowadays usage of tables and lists for forms are very rare unless it's mandatory. It's good to use div/span/p and labels

Check How to structure an HTML form

Common HTML structures used with forms

Beyond the structures specific to HTML forms, it's good to remember that forms are just HTML. This means that you can use all the power of HTML to structure an HTML form.

As you can see in the examples, It's common practice to wrap a label and its widget with a <p> or a <div> element.

In addition to the <fieldset> element, it's also common practice to use HTML titles and sectioning to structure a complex form.

HTML lists are also often used when using checkboxes and radio buttons.

Let's see an example with a simple payment form:

<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>

structured way of using form element

1 Answers1