CodeBlanks Logo Icon CodeBlanks
Login Register

Form skeleton

HTML course · Intermediate · Lesson 42/67

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

  1. 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.

  2. 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">

  3. Match tags to their role

    form
    Submits the data
    fieldset
    Groups fields
    legend
    Titles the group
    label
    Names the field

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone