INTERACTION

Forms & Inputs

Collect user input with labels and appropriate control types.

After this lessonConnect labels to inputs and choose meaningful input types.

How it works

Forms become easier to use when every control has a visible label. The label for attribute should match the input id.

Choose input types such as number, date and email when they match the data. Browser validation helps users but does not replace server-side validation for submitted data.

REAL WORK

Build a small calculator, filter panel or data-entry helper with clear labels and constraints.

SYNTAX

The pattern

<label for="material">Material</label>
<input id="material" name="material" type="text">

Example

<label for="qty">Quantity</label>
<input id="qty" name="qty" type="number" min="0">

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<label for="qty">Quantity</label>
<input id="qty" name="qty" type="number" min="0">

QUICK CHECK

How do you connect a label to an input?

Progress is stored only in this browser. No account required.