Forms

Forms are how users communicate back to a website — a sign-up form, a contact form, a search box, a checkout flow. As a designer you have probably spent a lot of time designing them. Now you will learn the HTML that makes them real.

Every interactive input on the web is built from a small set of elements: <form>, <label>, <input>, <textarea>, <select>, and <button>. They each have a specific job, and pairing them correctly is what makes forms both functional and accessible.

The form element

<form> is the wrapper that groups all the inputs together. On a real site it has action (where to send the data) and method (how to send it — get or post) attributes. For learning, you can leave those out.

<form>
  <!-- inputs go here -->
</form>

Labels and inputs

<input> is the actual text box (or checkbox, or radio button). It is a self-closing element with no text content.

<label> is the text that describes the input — “Your name”, “Email address”, and so on.

Critical rule: every <input> needs a matching <label>. You link them with matching for and id attributes:

<label for="email">Email address</label>
<input type="email" id="email" name="email" />

The for attribute on the label must exactly match the id attribute on the input. When they are linked:

Clicking the label text focuses the input (better usability — larger click target).
Screen readers read the label when the input is focused (essential for accessibility).

Input types

The type attribute on <input> changes how it behaves:

type	What it does
`text`	Plain single-line text (default)
`email`	Email address — mobile keyboards show `@` key; browser validates format
`password`	Hides characters as the user types
`number`	Numeric input with up/down arrows
`checkbox`	A tick box — true or false
`radio`	One choice from a group
`submit`	A submit button (use `<button>` instead — more flexible)

Textarea and button

<textarea> is a multi-line text input — for longer messages or comments. It does need a closing tag.

<button> submits the form by default when placed inside <form>. Add type="button" if you want it to do something else (via JavaScript) without submitting.

<form>
  <div class="field">
    <label for="name">Full name</label>
    <input type="text" id="name" name="name" placeholder="Jane Smith" />
  </div>

  <div class="field">
    <label for="email">Email address</label>
    <input type="email" id="email" name="email" placeholder="jane@example.com" />
  </div>

  <div class="field">
    <label for="message">Your message</label>
    <textarea id="message" name="message" rows="4" placeholder="Tell me about your project..."></textarea>
  </div>

  <button type="submit">Send message</button>
</form>

Click the “Full name” label text — notice the cursor jumps into the input. That is the for/id link at work. Try changing the button text or adding a new field.