← 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. Closes Nov 30

Enroll in Frontend Development

Cookie preferences

Choose what you're comfortable with. You can change this any time from the footer.

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