Introduction to Frontend Development

# Forms, tables, and accessibility

# Forms

<form action="/profile" method="post">
  <fieldset>
    <legend>Profile</legend>

    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>

    <label for="bio">Bio</label>
    <textarea id="bio" name="bio"></textarea>

    <label for="role">Role</label>
    <select id="role" name="role">
      <option value="student">Student</option>
      <option value="teacher">Teacher</option>
    </select>

    <button type="submit">Save</button>
  </fieldset>
</form>

label connects visible text to a control. name identifies the value sent in the request; id connects the control to its label. Semantic input types and attributes such as required provide useful browser validation before submission.

The form example above shows the basic controls and HTTP submission flow; its labels and structure can be improved further with the techniques described there.

# Tables

Use tables for tabular data, not page layout:

<table>
  <caption>Exam results</caption>
  <thead>
    <tr><th scope="col">Student</th><th scope="col">Score</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Ada</th><td>98</td></tr>
  </tbody>
</table>

# Accessibility checklist

  • Keep headings in a meaningful order.
  • Give links descriptive text.
  • Associate every form control with a label.
  • Provide useful alternative text for meaningful images.
  • Make interactive controls keyboard accessible.
  • Use semantic landmarks such as main, nav, and footer.
  • Do not communicate information through color alone.

# Exercise

Create a semantic profile or article page. Add a heading hierarchy, navigation, an article, an accessible form, and a table of genuinely tabular data. Compare your DOM with the structure of the examples on this page.

← CSS →