david-s
5/8/2020 - 4:36 PM

HTML form with fieldset and required fields

When used correctly, the

and elements tie related form fields together in a way that is accessible to people who cannot see the visual layout of the form.

You should not use the

and when you have a single form field that asks for a single piece of information.

index
content_copyfile_download
<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="K" >
                King
              </label>
            </li>
            <li>
              <label for="title_2">
                <input type="radio" id="title_2" name="title" value="Q">
                Queen
              </label>
            </li>
            <li> 
              <label for="title_3"> 
                <input type="radio" id="title_3" name="title" value="J">
                Joker 
              </label> 
            </li>
        </ul>
      </fieldset>
      <p>
        <label for="name">
          <span>Name: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="text" id="name" name="username" required>
      </p>
      <p>
        <label for="mail">
          <span>E-mail: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="email" id="mail" name="usermail" required>
      </p>
      <p>
        <label for="pwd">
          <span>Password: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="password" id="pwd" name="password" required>
      </p>
  </section>
  <section>
      <h2>Payment information</h2>
      <p>
        <label for="card">
          <span>Card type:</span>
        </label>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </p>
      <p>
        <label for="number">
          <span>Card number:</span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="tel" id="number" name="cardnumber" required>
      </p>
      <p>
        <label for="date">
          <span>Expiration date:</span>
          <strong><abbr title="required">*</abbr></strong>
          <em>formatted as mm/dd/yyyy</em>
        </label>
        <input type="date" id="date" name="expiration" required>
      </p>
  </section>
  <p> <button type="submit">Validate the payment</button> </p>
</form>