Forms

Forms are how users send information to a website: logging in, searching, signing up, checking out, leaving a comment. The <form> element wraps the controls, and each control's name decides how its value is sent. This lesson builds a complete form step by step.

A first form

Fill it in and press Send: the browser collects each field's name and value and sends them to the action URL (here, a test service that simply echoes back what it receives).

The form element

Attribute	Purpose
`action`	The URL that receives the data. If omitted, the current page.
`method`	`get` (data in the URL) or `post` (data in the request body) — lesson 33
`enctype`	How data is encoded; use `multipart/form-data` for file uploads
`autocomplete`	`on`/`off` for the whole form
`novalidate`	Skip the browser's built-in validation

name and value

Only controls with a name are submitted. The data arrives as name=value pairs:

TXT submitted data

name=Ana+Silva&email=ana%40example.com&message=Hello%21

Spaces become + and special characters are encoded, like @ as %40. The server reads each value by its name, so names should be short and consistent: email, first_name, quantity.

Labels

Every control needs a label that describes it. Connect them with for (on the label) matching id (on the control):

A connected label is announced by screen readers, and clicking it focuses the field or toggles the checkbox — a much bigger target, especially on touch screens. Wrapping the control inside the <label> (second example) also connects them. Lesson 29 goes further.

The main kinds of control

<form>
  <p><label for="u">Username</label> <input id="u" name="username"></p>
  <p><label for="p">Password</label> <input id="p" name="password" type="password" autocomplete="new-password"></p>
  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="free" checked> Free</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>
  <p><label><input type="checkbox" name="terms" required> I accept the terms</label></p>
  <p>
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="pt">Portugal</option>
      <option value="es">Spain</option>
    </select>
  </p>
  <p><label for="bio">Bio</label><br><textarea id="bio" name="bio" rows="2"></textarea></p>
  <button type="submit">Create account</button>
  <button type="reset">Clear</button>
</form>

Result

Element	For	Lesson
`<input>`	Most single values — text, email, numbers, dates, checkboxes, radios, files…	27
`<select>`	Choosing from a list	30
`<textarea>`	Multi-line text	30
`<button>`	Submitting, resetting, or custom actions	31
`<fieldset>` + `<legend>`	Grouping related controls	29

Radio buttons and checkboxes

Radio buttons sharing the same name form a group: only one can be chosen, and the selected one's value is sent. Checkboxes are independent; a checked box sends its value (on if no value is set), and an unchecked box sends nothing at all.

Forms and accessibility

Every control has a visible label — placeholder text isn't a substitute, because it disappears when you type.
Related controls (radio groups, address fields) are grouped in a fieldset with a legend.
Use the right input type, so phones show the right keyboard.
The form can be completed with the keyboard alone: Tab between fields, Space to toggle, Enter to submit.

Try it yourself

Add a "Phone" field (with a label) and a "How did you hear about us?" select menu to this form:

PreviousLayout with CSS NextInput Types