Form skeleton

Set up form, fieldset, legend and labels.

Form, fieldset and legend

The <form> element holds every field and says where the data goes. The action attribute is the target URL and method is the HTTP verb (usually post).

<fieldset> groups related fields into a box; <legend> gives that group its title. This organises long forms and builds structure for screen reader users. Let's start the Cafe Dem form now.

The label and input pair

To make a field accessible you use a <label> and <input> pair. The label's for attribute and the input's id attribute must hold the same value.

That way clicking the label also focuses the input, and a screen reader announces the field name aloud. The name attribute is the data key sent to the server, so it should be unique and meaningful.

Exercise Add the form skeleton

Add a <form> to the body of the skeleton: action='/contact', method='post'. Inside the form put a <fieldset> with a <legend> of 'Contact details'. Inside the fieldset add a label+input pair: label for='name' 'Your name', input type='text' id='name' name='name'.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cafe Dem - Contact</title>
  </head>
  <body>
    <form action="/contact" method="post">
      <fieldset>
        <legend>Contact details</legend>
        <label for="name">Your name</label>
        <input type="text" id="name" name="name">
      </fieldset>
    </form>
  </body>
</html>

Test yourself

What does a label's for attribute point to?
```
<label for="name">Your name</label>
<input id="name" name="name">
```
- the input's name
- the input's value
- the input's id
- the form's action
Show answer

the input's id — Correct! for='name' matches id='name'; the label forwards clicks to the input.

Complete the missing label-input pair

<label for="email">Email</label>
<input type="email" ____="email" name="email">

Show answer

<label for="email">Email</label>
<input type="email" id="email" name="email">

Match tags to their role

form

Submits the data
fieldset

Groups fields
legend

Titles the group
label

Names the field

Next lesson: Person fields

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies