HTML Forms
Collect input with labelled form controls.
HTML
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>Explanation
A form groups controls and sends them to the address in action. Each label is tied to its input by matching for and id, which makes the control easier to click and lets screen readers announce it. The type="email" input checks the format, and required stops an empty submit.
Explore the dry run
Guided walkthroughReady
1
<form action="/subscribe" method="post">2
<label for="email">Email</label>3
<input id="email" name="email" type="email" required>4
<button type="submit">Subscribe</button>5
</form>Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| form groups the controls and names where the data is sent. | — | — | |
| The label is linked to the input by for and id. | — | — | |
| An email input that must be filled in. The browser renders it; there is no console output. | — | — | |
| The submit button sends the form. | — | — |