CodeBlanks Logo Icon CodeBlanks
Login Register

Output and form events

HTML course · Advanced · Lesson 22/56

Show calculations with <output> and the form attribute.

Output and the for attribute

The <output> tag shows the result of a calculation. You have seen it before; now we pair it with two new attributes.

The for attribute tells the output which inputs feed it. Its value is a space-separated list of ids: <output for="a b">. This says the output follows the inputs with id="a" and id="b".

The browser can update the output automatically when the watched inputs change; it grows stronger still when paired with the form attribute.

Outer linking with the form attribute

The form attribute links an input or output to a form even when it sits outside that form. Normally an input belongs to the form that wraps it. But sometimes layout pushes an input outside.

Example: <form id="calc">...</form> and later <input type="number" form="calc">. This input is included in the form despite sitting outside.

An output can also link to a form with the form attribute; this way a result can be displayed from anywhere on the page.

Exercise Write a calculator form

Add a <form id="calc"> inside body. Inside it put an <input type="number" id="a" name="a"> and an <output for="a b" name="result"></output>. Then OUTSIDE the form add an <input type="number" id="b" name="b" form="calc">. This input must link to the form through the form="calc" attribute.

Show example solution 
<body>
  <form id="calc">
    <label for="a">Number 1</label>
    <input type="number" id="a" name="a">
    <output for="a b" name="result"></output>
  </form>
  <label for="b">Number 2</label>
  <input type="number" id="b" name="b" form="calc">
</body>

Test yourself

  1. What is the core purpose of <output>?

    • Show the result of a calculation
    • Upload a file
    • Pick a colour
    • Build a menu
    Show answer

    Show the result of a calculation — Correct. output shows the result of a calculation.

  2. Add a for attribute to the output

    <output for="____" name="result"></output>
    Show answer 
    <output for="a b" name="result"></output>

  3. Match each attribute to its role

    for (output)
    Watched inputs
    form
    Outer form link
    id
    Unique identity
    name
    Form data name

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone