Forms and Tables

Labeled Form

Text Connects to Controls

A form becomes understandable as each label and control is connected with matching for/id values.

Program

HTML form controls are not just boxes. Labels and attributes tell the browser how controls should be named and submitted.

labeled_form.html
Visuals: captured from real browser rendering
<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <button>Subscribe</button>
</form>

  1. Create a POST form.

    An empty subscription form container appears.
    The form element defines where and how submission happens.

  2. Add the visible Email label.

    The form shows an Email label with no input yet.
    The for attribute points at the future control id.

  3. Add the email input control.

    The Email label is followed by an email input.
    The input id matches the label for value.

  4. Give the submitted value a name.

    The email input remains visible and is ready for submitted data.
    The name attribute is the submitted field key.

  5. Add the submit button.

    The form now has an Email field and a Subscribe button.
    The button gives the user a visible submit action.
label A label gives a form control a visible and accessible name.
name The name attribute is the key sent when a form is submitted.