← Month 1 — Web Foundations & HTMLWeek 435 min

Complete HTML forms

Objectives

Build form/label/input/select/textarea
Use HTML5 types and native validation
Group with fieldset/legend

Lesson

A good form ties every control to a label (for/id). Without labels, accessibility and mobile tap targets suffer.

Useful types: email, tel, url, number, date, password, search, file, checkbox, radio. autocomplete improves UX and compliance.

required, minlength, pattern, min/max give native validation. Not enough for security: revalidate on the server (Next.js Route Handlers later).

fieldset/legend group related fields (e.g. shipping address). button type="submit" vs type="button": a classic bug that submits too early.

method and action exist in plain HTML; with Next.js we often prefer Server Actions or fetch to an API.

Practice lab

Add required, a name text field, and a message textarea tied to labels.

○ required○ type="text"○ <textarea✓ <label

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

Assessment

1. Why associate label and input?

Previous Next