concept

HTML Forms

Collecting user input with inputs, labels, and the form element

Overview

Forms let users send data to a server: logins, searches, sign-ups, and more. A <form> element wraps controls like text fields, checkboxes, and buttons. Pairing every input with a <label> is essential for usability and accessibility, making forms a great place to practice good habits early.

Syntax / Usage

The action attribute sets where data is sent and method sets how. Each input should have a name so its value is submitted, and a matching <label>.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required />

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
  </select>

  <button type="submit">Sign up</button>
</form>

Examples

A simple login form with password input:

<form action="/login" method="post">
  <label for="user">Username</label>
  <input type="text" id="user" name="username" required />

  <label for="pass">Password</label>
  <input type="password" id="pass" name="password" required />

  <button type="submit">Log in</button>
</form>

A group of radio buttons sharing one name:

<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s" /> Small</label>
  <label><input type="radio" name="size" value="m" /> Medium</label>
  <label><input type="radio" name="size" value="l" /> Large</label>
</fieldset>

Common Mistakes

  • Forgetting the name attribute, so an input's value is never submitted
  • Not connecting <label for> to an input's id, hurting accessibility
  • Using the wrong input type, e.g. text instead of email or password
  • Giving radio buttons in a group different name values so multiple stay selected
  • Omitting type="submit" on the button, leading to unexpected behavior

See Also

html-attributes html-accessibility-basics html-elements-and-tags