HTML Forms — The Basics

Introduction

An HTML form is how a page collects data from a person and hands it somewhere — to a server, to JavaScript on the page, or to another URL. You mark out that collection area with the <form> element, fill it with controls the user can type into or choose from, and give the user a way to submit what they entered. Every login box, search bar, checkout page and comment field on the web is built from this same small set of pieces.

Why learn the form model rather than reach for a component library? Because the browser already knows how to gather values, validate them, and package them for sending — for free, and accessibly, the moment you use the native elements. A hand-rolled widget throws that away. Learn the <form> element, the controls inside it, and the <label> that names each one, and you can build a correct, keyboard-friendly form with no framework at all.

The whole model rests on three ideas. A <form> groups controls; each control carries a name so its value can be keyed in the submitted data; and each control is described to the user by a <label>. Hold that trio in your head — group, name, describe — and every attribute you meet afterward slots cleanly onto one of them. That is the core of it.

Lessons

1. The form element: the wrapper

Everything starts with the <form> element. It is a container that groups the controls belonging together and defines what happens when the user submits: the action attribute says *where* the collected data goes, and the method attribute says *how* it travels (get puts the values in the URL, post sends them in the request body). On its own a <form> renders nothing visible — it is the boundary that ties a set of controls into one submittable unit.

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

2. Controls: input, textarea and select

Inside the form live the controls — the elements the user actually interacts with. The workhorse is <input>, a single element whose type attribute reshapes it into a text box, a checkbox, a radio button, a password field and more. For a multi-line message you use <textarea> instead, and to offer a fixed list of choices you use <select> with <option> children. These three elements cover the vast majority of every form you will ever write. The full <input> reference documents each type in detail.

<input type="text" name="city">
<textarea name="message"></textarea>
<select name="plan">
  <option>Free</option>
  <option>Pro</option>
</select>

3. Pairing a label with a control

A control on its own is a naked box; a label tells the user what it is for. You associate a <label> with a control in one of two ways: give the control an id and point the label's for attribute at it, or simply wrap the control inside the <label>. Either way the pairing is real, not cosmetic — clicking the label focuses or toggles the control, and a screen reader announces the label when the field gains focus. That accessibility is exactly why the <label> reference matters as much as the control it names.

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

<label>Remember me
  <input type="checkbox" name="remember">
</label>

4. The name attribute: how data is keyed

This is the idea beginners miss most often: a control without a name attribute is invisible to submission. When a form is sent, the browser walks its controls and builds a set of name=value pairs — the name becomes the key and whatever the user entered becomes the value. A text field named email holding [email protected] submits as [email protected]. No name, no pair, no data. The name is the label the *server* reads, just as the <label> is the label the *person* reads.

<!-- submits as  [email protected] -->
<input type="email" name="email" value="[email protected]">

<!-- no name: this value is NOT submitted -->
<input type="text">

5. Submit buttons

A form needs a trigger, and that trigger is a submit button. Write it as <button type="submit"> (the default type for a button inside a form) or as <input type="submit">. Pressing it — or hitting Enter inside a text field — tells the browser to validate the controls and send the collected name=value pairs to the form's action. The text you put inside the button is what the user sees, so make it describe the action: *Sign up*, *Send message*, *Search*.

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

6. Basic validation with required

Before the browser sends anything it can check the entries for you. The simplest and most useful check is the required attribute: add it to a control and the form refuses to submit while that control is empty, showing a built-in message instead. It costs one word and needs no JavaScript. Richer built-in checks build on the same idea — type="email" rejects text that is not an email shape, and minlength, max and pattern add further rules — but required is the one you will reach for on almost every field that must be filled.

<input type="email" name="email" required>
<!-- the form will not submit while this field is empty -->

That is the complete mental model. A <form> groups controls — <input>, <textarea>, <select>; each control pairs with a <label> so the user knows what it is; each control carries a name so its value is keyed in the submitted data; a submit button sends those pairs to the form's action; and required (with its validation siblings) keeps bad data from ever leaving the page. Every richer form — file uploads, fieldsets, custom validation — is a refinement resting on that same frame.

Practice

Predict first: if you remove the name from the email field below, what does the form submit for it? (Answer: nothing — a control with no name contributes no name=value pair.) Now experiment for real — a small, labelled sign-up form you can edit and render:

Next steps

You have the model — now put it to work. Follow how to create a form to build one step by step, browse the runnable form examples for every control side by side, and read the value-by-value references for the <input> element and the <label> element. When you need to lay data out in rows and columns rather than collect it, step across to HTML Tables. Every snippet here runs in the editor.

Frequently asked questions

What does the name attribute do on a form control?

It is the key under which the control's value is submitted. When the form is sent the browser builds name=value pairs from its controls; a control with no name contributes nothing, so its value is never submitted.

How do I connect a label to an input?

Give the input an id and set the label's for attribute to that same id, or wrap the input inside the <label> element. Either way clicking the label focuses the control and screen readers announce it.

How do I make a form field mandatory?

Add the required attribute to the control. The browser then refuses to submit the form while that field is empty and shows a built-in message, with no JavaScript needed.

What is the difference between input, textarea and select?

<input> is a single-line control whose type sets its shape; <textarea> is a multi-line text box for longer messages; and <select> offers a fixed list of choices through its <option> children.