A form should feel easy to use. The visitor sees a question, gives an answer, and needs to know what will happen next.
What You Need to Know
The summary lets visitors check their entries before committing. The server needs to generate this page from verified values.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<section aria-labelledby="review-title">
<h2 id="review-title">Review your details</h2>
<dl>
<dt>Name</dt><dd>Alex Morgan</dd>
<dt>Delivery</dt><dd>Pickup</dd>
</dl>
<form action="/confirm" method="post">
<button type="submit">Confirm details</button>
</form>
</section>Let’s Read the Code
- <section>: A section groups content with a shared topic.
- <h2>: A heading divides the page into understandable parts.
- aria-labelledby: Aria-labelledby uses the text of another element as the accessible name.
- id: An id uniquely identifies an element on this page.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.
Keep the form understandable. Put each label next to the right control, group related questions, and make the submit action clear. A good form is more than a collection of inputs.
Your Turn
Add an Edit details link that returns the visitor to the earlier form.
Common Beginner Mistakes
- Copying the example without giving the fields a clear label and a usable name.
- Do not treat client-side displayed values as proof of what was validated on the server.
Key Takeaways
- A control needs a clear label and, when submitted, a meaningful name and value.
- <section>: A section groups content with a shared topic.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.