HTML Forms

Why forms matter

Forms are how users send data to a website — login pages, search bars, contact forms, sign-up pages. If a user types something and clicks a button, there's almost certainly a <form> involved.

Basic form structure

<form action="/submit" method="POST">
  <label for="name">Your name:</label>
  <input type="text" id="name" name="name" required />

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

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

Let's break this down:

• <form> wraps all the inputs. action is where the data goes; method is how it's sent.
• <label> describes each field. The for attribute should match the input's id.
• <input> is the most common form element. The type attribute changes its behavior.
• <button type="submit"> sends the form.

Common input types

HTML5 gives you many input types out of the box:

<input type="text" />       <!-- Plain text -->
<input type="email" />      <!-- Email (browser validates format) -->
<input type="password" />   <!-- Hidden text -->
<input type="number" />     <!-- Numbers only -->
<input type="date" />       <!-- Date picker -->
<input type="checkbox" />   <!-- True/false toggle -->
<input type="radio" />      <!-- Pick one from a group -->

You also have <textarea> for multi-line text and <select> for dropdowns:

<textarea name="message" rows="4"></textarea>

<select name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

Validation without JavaScript

Add required to make a field mandatory. The browser won't submit until it's filled:

<input type="email" required />

You can also use minlength, maxlength, and pattern for more control:

<input type="text" minlength="3" maxlength="20" pattern="[A-Za-z]+" />

Grouping fields with fieldset and legend

Long forms are easier to use when related inputs are grouped:

<fieldset>
  <legend>Shipping address</legend>
  <label for="street">Street</label>
  <input type="text" id="street" name="street" autocomplete="street-address" />
</fieldset>

<legend> gives the group a title that screen readers announce. Use autocomplete attributes so browsers can fill known fields (name, email, address) for the user.

Accessible labels and placeholders

Every input needs a visible label linked with for and id. Placeholders are not a substitute for labels — they disappear when the user types and are easy to miss for assistive technology.

<label for="search">Search</label>
<input type="search" id="search" name="q" placeholder="e.g. flexbox" />

For checkboxes and radio buttons, wrap the label around the control or use explicit for/id pairing so the clickable area is large enough.

Buttons: submit, reset, and button

<button type="submit">Save</button>
<button type="button">Cancel</button>
<button type="reset">Clear form</button>

Inside a <form>, a bare <button> defaults to type="submit", which can accidentally submit the form. Be explicit with type="button" for actions that should not submit.

How form data is sent

• method="GET" — appends name/value pairs to the URL query string. Fine for search boxes; never use for passwords.
• method="POST" — sends data in the request body. Use for logins, sign-ups, and anything sensitive (always over HTTPS in production).

The name attribute on each control becomes the key sent to the server. Without name, the field is omitted from submission.

Next steps: JavaScript and server handling

HTML validation catches obvious errors (empty required fields, invalid email format). Real apps also validate on the server — never trust client-side checks alone. In later JavaScript lessons you'll learn to read form values, prevent default submission, and send data with fetch.

Choosing the right control for the job

Good forms match the input type to what you are actually collecting. Use type="email" for email addresses so mobile keyboards show the @ key, type="tel" for phone numbers, and type="url" for website fields. Picking the wrong type forces users to fight their keyboard and increases mistakes. For a short list of fixed options, a <select> keeps the UI compact; for five or fewer choices, radio buttons often scan faster because every option is visible at once.

Multi-step checkout or registration flows benefit from splitting one long form into logical pages or <fieldset> groups. Each step should have a clear heading and only the fields needed for that step. Users abandon forms when they feel overwhelming — progressive disclosure beats one giant wall of inputs.

Security and privacy basics

Never collect more data than you need, and always send sensitive forms over HTTPS. Password fields belong in POST requests, never in GET query strings where they can appear in browser history or server logs. Use autocomplete="current-password" or autocomplete="new-password" so password managers can offer to save credentials without extra JavaScript.

The name attribute is how the server receives each value — keep names stable and predictable (email, not field_7). If you add client-side validation with JavaScript later, treat it as a convenience layer; attackers can bypass the browser entirely, so duplicate checks on the server.

The novalidate attribute

By default, the browser runs built-in validation before submitting. Add novalidate to the <form> when you want full control in JavaScript — for example, to show custom error messages inline. Even with novalidate, you should still enforce the same rules on the server.