Forms and Inputs

HTML forms are the primary way users send data to a web server — from login screens and search bars to checkout flows and contact forms. Building accessible, usable forms requires understanding both HTML structure and CSS styling.

The Form Element

The form element wraps all form controls. Its two most important attributes are action (where data is sent) and method (how it is sent):

<form action="/submit" method="post">
  <!-- form controls go here -->
</form>

Use method="get" for searches (data appears in the URL) and method="post" for anything that modifies data or contains sensitive information.

Labels and Inputs

Every input should have an associated label. The label's for attribute must match the input's id:

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

Labels are critical for accessibility — screen readers read the label when the input is focused. They also make the click target larger (clicking the label focuses the input).

Input Types

The type attribute tells the browser what kind of data to expect and how to validate it:

<input type="text"     placeholder="Your name" />
<input type="email"    placeholder="you@example.com" />
<input type="password" placeholder="••••••••" />
<input type="number"   min="0" max="100" />
<input type="date" />
<input type="checkbox" id="agree" name="agree" />
<input type="radio"    name="size" value="small" />
<input type="file"     accept=".pdf,.doc" />
<input type="submit"   value="Submit" />
<input type="reset"    value="Reset" />

Using the correct type gives you free validation and triggers the appropriate keyboard on mobile devices (e.g., a numeric keypad for type="number", an email keyboard for type="email").

Textarea and Select

<!-- Multi-line text input -->
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<!-- Dropdown select -->
<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- Select a country --</option>
  <option value="gb">United Kingdom</option>
  <option value="us">United States</option>
  <option value="au">Australia</option>
</select>

Fieldset and Legend

Group related inputs with fieldset and label the group with legend:

<fieldset>
  <legend>Delivery options</legend>
  <label><input type="radio" name="delivery" value="standard" /> Standard (3–5 days)</label>
  <label><input type="radio" name="delivery" value="express" /> Express (next day)</label>
</fieldset>

Styling Forms with CSS

By default, form controls look different in every browser. Use CSS to create a consistent appearance:

input[type="text"],
input[type="email"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}