Forms & Inputs

Forms are how users send data to a website — signing up, logging in, searching, submitting feedback. HTML provides a rich set of form elements for every type of input.

The form element

Everything lives inside a <form> tag. It groups related inputs and can have an action attribute pointing to where the data should be sent:

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

Input types

The <input> element is the workhorse of forms. Its type attribute changes how it behaves:

• → text — single-line text field (default)
• → email — validates email format automatically
• → password — masks the typed characters
• → number — only accepts numeric input
• → checkbox — toggleable on/off box
• → radio — select one option from a group

<input type="text" placeholder="Your name">
<input type="email" placeholder="[email protected]">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="checkbox"> I agree
<input type="radio" name="color" value="red"> Red

Labels

Always wrap input labels with the <label> tag. This improves accessibility — screen readers can announce what each field is for, and clicking the label focuses the input:

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

Textarea, Select, and Button

• → <textarea> — a multi-line text input for longer content
• → <select> + <option> — a dropdown menu
• → <button> — a clickable button (type: submit, reset, or button)

<textarea rows="4" placeholder="Your message"></textarea>

<select name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="jp">Japan</option>
</select>

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

Build a contact form

Quiz