Programonic

The concept

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.

Code example

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>

Preview example Example details

Follow the code

Open the walkthrough to inspect the example one step at a time.

Show guided walkthrough

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

Prepared trace of the published program. Some rows group repeated iterations.
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.	`—`	—

Behind the scenes

How HTML processes this code

The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.