Accessible form

Build a form users can understand and complete.

STEP 1 · LEARN

How it works

A label identifies a control, while correct types help validation.

Correct example

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

for and id connect the label to the input. type email enables email validation, and required makes the field mandatory.

Common mistake

<input placeholder="Email">

A placeholder disappears when the user types and does not replace a persistent connected label.

STEP 2 · APPLY

Add required name and email fields, connected labels and a submit button.

index.htmlHTML

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

0%not checked

Explain the solution logic

For each control, check the label for and input id pair, then add name, the correct type and required.