Making Content Focusable

Please tell us your name.

Please tell us something about your history.

Gender

You may be this if you like beer, gadgets, and Playboy Magazine.

You may be this if you like prosecco, make up, and Playgirl Magazine.

Tell us how old you are.

  • I entered all data truthfully
  • I’m a good person
  • I won’t vote for Donald Trump next time

Code

<form>
  <div class="control">
    <label for="full_name">Full name</label><input id="full_name" type="text" />
    <p class="description" tabindex="0">
      Please tell us your name.
    </p>
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography"></textarea>
    <p class="description" tabindex="0">
      Please tell us something about your history.
    </p>
  </div>
  <fieldset>
    <legend>Gender</legend>
    <div class="control">
      <input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label>
      <p class="description" tabindex="0">
        You may be this if you like beer, gadgets, and Playboy Magazine.
      </p>
    </div>
    <div class="control">
      <input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label>
      <p class="description" tabindex="0">
        You may be this if you like prosecco, make up, and Playgirl Magazine.
      </p>
    </div>
  </fieldset>
  <div class="control">
    <label for="age_group">Age Group</label><select id="age_group">
      <option>
        0 to 9 Years
      </option>
      <option>
        10 to 19 Years
      </option>
      <option>
        20 to 29 Years
      </option>
      <option>
        30 to 39 Years
      </option>
      <option>
        40 to 49 Years
      </option>
      <option>
        50 to 59 Years
      </option>
      <option>
        60 to 69 Years
      </option>
      <option>
        70 to 79 Years
      </option>
      <option>
        80 to 89 Years
      </option>
      <option>
        90 to 99 Years
      </option>
    </select>
    <p class="description" tabindex="0">
      Tell us how old you are.
    </p>
  </div>
  <div class="control">
    <input id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the following terms and conditions:</label>
    <ul tabindex="0">
      <li>
        I entered all data truthfully
      </li>
      <li>
        I'm a good person
      </li>
      <li>
        I won't vote for Donald Trump next time
      </li>
    </ul>
  </div>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + label {
  width: auto;
}

.description {
  margin-top: 0;
  margin-left: 120px;
}

fieldset .description {
  margin-left: 22px;
}

ul {
  margin-top: 0;
}
NIL