🧾 Intermediate HTML

Forms

⏱ 2 hr2 topicsLive playground
🎯 By the end: You can build a form with properly labelled inputs of different types, mark fields required, and explain why every input needs a label.

Forms are how the web listens: sign-ups, searches, contact pages, checkouts. The HTML side is very approachable, and getting one detail right — pairing every input with a label — instantly makes your forms more usable and accessible than most you'll meet online.

1Inputs and their labels

A form lives in a <form> element. Inside it, the workhorse is <input>, a void element whose type attribute changes what it collects:

typeGives you
textA single line of text.
emailA text box that checks for an @ and shows an email keyboard on phones.
passwordHidden, dotted-out text.
numberA numeric field with up/down arrows.
checkbox / radioTick boxes / pick-one options.

Always label your inputs

Every input needs a <label>. Link them by giving the input an id and the label a matching for:

<label for="email">Your email</label>
<input type="email" id="email">
A linked label isn't just neat — clicking it focuses the input (a bigger tap target on mobile), and screen readers announce the field's purpose. Never ship an input without one.
A labelled form
HTML
CSS
Live preview
What's happening: Each input has a matching label (for=id). Try clicking a label in the preview — it focuses the input. The email field uses type=email, which hints validation and the right mobile keyboard.
Key points
  • Inputs live in a <form>; the type attribute decides what each <input> collects.
  • Pair every input with a <label> using matching for and id.
  • A linked label improves accessibility and gives a bigger tap target on mobile.

2More controls and basic validation

Beyond <input>, you'll reach for:

  • <textarea> — a multi-line text box (e.g. a message).
  • <select> with <option>s — a dropdown menu.
  • <button> — typically type="submit" to send the form.

Built-in validation

The browser can check fields for you before sending, with simple attributes:

  • required — the field must be filled in.
  • minlength / maxlength — limit text length.
  • type="email" — must look like an email.
Important: browser validation is a convenience, not security. A determined user can bypass it. Always validate again on the server (your Node/Laravel back-end) — never trust the browser alone.
Key points
  • Use <textarea> for long text, <select> for dropdowns, <button type="submit"> to send.
  • Attributes like required, minlength and type="email" give free browser validation.
  • Browser validation is convenience only — always validate on the server too.

★ Practical: a contact form

In any playground, build a small contact form with:

  1. A labelled text input for a name, marked required.
  2. A labelled email input.
  3. A labelled <textarea> for a message.
  4. A <button type="submit">, and confirm every field has a matching label.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Tables
Next →
Semantic HTML