UX Design and Development course

Build a Form

The following example code is a fully featured example form. See in-line comments for call-out features.

<!DOCTYPE HTML>

<!-- setting the lang type -->
<html lang="en-US">
<head>

  <!-- set the proper character set -->
  <meta charset="UTF-8">
  <title>Forms Complete Example</title>
</head>
<body>

<!-- setting the unique ID for features, NOT presentation -->
<form id="register">

  <!--
    When creating a form with <fieldset>,
    you are still required to set a header
  -->
  <h1>Register for Miss Bakers Space Cadets</h1>

  <!-- proper form sectioning uses <fieldset> elements -->
  <fieldset>

    <!-- Each <fieldset> should have a <legend> -->
    <legend>Personal details</legend>

    <!--
      Other then for presentational purposes,
      labels and inputs do NOT require additional structural markup
      The following example is semantically correct
    -->
    <label for="given-name">First Name</label>
    <input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>


    <!--
      Every <label> should contain a `for` attribute
      that is associated to a <input> `ID`
    -->
    <label for="family-name">Last Name</label>
    <input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>

    <label for="dob">Date of Birth</label>
    <input id="dob" name="dob" type="date" required>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" placeholder="example@domain.com" required>

    <label for="url">URL</label>
    <input id="url" name="url" type="url" placeholder="http://mysite.com">

    <label for="phone">Telephone</label>
    <input id="phone" name="phone" type="tel" placeholder="Eg. +447000 000000" required>

    <label for="shoes">Shoesize</label>
    <input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">

    <label for="skill">Flying Skill level (1 low - 100 high)</label>
    <input id="skill" name="skill" type="range" min="1" max="100" value="0">
    <output name="output" onforminput="value=a.value">0</output>

  </fieldset>

  <!--
    When creating a new section of form fields,
    it is appropriate to create another <fieldset> block
  -->
  <fieldset>
    <legend>Billing address</legend>

    <label for="address">Address</label>
    <textarea id="address" name="address" rows=5 required></textarea>

    <label for="postCode">Post code </label>
    <input id="postCode" name="postCode" type="text" required>

    <label for="country">Country </label>
    <input id="country" name="country" list="country-names" type="text" required>

    <datalist id="country-names">
      <option label="England" value="England"></option>
      <option label="Northern Ireland" value="Northern Ireland"></option>
      <option label="Ireland" value="Ireland"></option>
      <option label="Scotland" value="Scotland"></option>
      <option label="Wales" value="Wales"></option>
    </datalist>
  </fieldset>

  <fieldset>
    <legend>Card details</legend>

    <!--
      When you encounter a nested concept with your form,
      it is expected to nest a <fieldset> block.

      It is also considered best practice to add naming
      attributes to your <fieldset> elements.
    -->
    <fieldset name="card-selection">
      <legend>Card type</legend>
      <input id="visa" name="cardtype" type="radio">
      <label for="visa">VISA</label>

      <input id="mastercard" name="cardtype" type="radio">
      <label for="mastercard">Mastercard</label>

      <input id="amex" name="cardtype" type="radio">
      <label for="amex">AMEX</label>
    </fieldset>

    <label for="cardName">Name</label>
    <input id="cardName" name="cardName" type="text" placeholder="Name as it appears on your card" required>

    <label for="cardNo">Card number </label>
    <input id="cardNo" name="cardNo" type="number" required title="The sixteen digit number across the middle of your card.">

    <label for="security">Security code </label>
    <input id="security" name="security" type="number" required pattern="[0-9]{3}" title="The last three digits on the back of your card.">

    <label for="expiry">Expiry Date </label>
    <input id="expiry" name="expiry" type="month">
  </fieldset>

  <!--
    Buttons are single concepts within a <form>,
    it's a good idea to place in it's own <fieldset>
  -->
  <fieldset>
     <button type=submit>Place Order</button>
  </fieldset>
</form>
</body>
</html>

The example

Forms Complete Example