← HTML tutorial

HTML

Forms

The <form> tag wraps a group of input controls. A text field is an <input type="text">; pair each one with a <label> so screen readers, and simple mouse clicks, know what it's for.

Example 1: a labelled text field

<label for="name">Your name:</label>
<input type="text" id="name" name="name">

The for="name" on the label connects it to the input sharing that exact id. Clicking the label text focuses the input, and a screen reader announces the label when the field is reached, placeholder text alone can't do either of these things reliably.

Example 2: choosing from options, and submitting

<label for="track">Favourite track:</label>
<select id="track" name="track">
  <option>Frontend</option>
  <option>Backend</option>
  <option>Cybersecurity</option>
</select>

<button type="submit">Submit</button>

<select> gives a dropdown of fixed choices, useful whenever the answer must be one of a known set rather than free text. This example only demonstrates the markup, it isn't wired up to actually send anywhere, since that's a backend's job, covered in a different track entirely.

Try it yourself
Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account