Semantic page layout · 15 MIN

Semantic forms and labels

A label associates text with a form control. Use name to identify submitted values, appropriate input types to improve mobile keyboards and browser validation, and fieldset/legend to group related controls. Never rely on placeholder text as the only label.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

<form><label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Join</button></form>

Practise this lesson