Project 20: Pricing Table

HTML Masterclass

Builds on these lessons

Form Advanced Forms Progress Element Forms Meter Element

Step 1 of 3

Project

A Seat Count with the <output> Element

Build a Team plan card with a number input for seat count and an <output for="seats"> showing the computed monthly total. <output> is the tag built for exactly this: displaying the result of a calculation, and its for attribute links it back to the input(s) that feed it.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing | Nimbus Labs</title>
</head>
<body>
  <h1>Pricing</h1>
  <article class="plan">
    <h2>Team</h2>
    <form>
      <label for="seats">Seats</label>
      <input type="number" id="seats" name="seats" min="1" max="50" value="5">
      <output for="seats">Total: $45/month</output>
    </form>
  </article>
</body>
</html>

← Previous Next →