HTML Forms and Inputs

Why forms matter

Almost everything you do on the web uses a form. Logging in, signing up, searching, posting a comment, ordering food — behind each one is an HTML form quietly collecting what you type and tap. A form is simply a part of a page that gathers information from a person and (usually) sends it somewhere.

In this lesson you'll build a real form piece by piece: text boxes, an email field, radio buttons, checkboxes, a dropdown menu and a submit button. By the end you'll be able to make a working sign-up form. If you're new to HTML tags, it helps to first read Introduction to HTML Tags, and you can see where forms fit on a full page in Build a Simple Web Page with HTML.

The <form> tag

Every form starts and ends with a <form> tag. Everything that belongs to the form lives inside it:

<form>
  <!-- inputs and buttons go here -->
</form>

On its own a <form> shows nothing. It's a container. The interesting parts are the inputs you place inside it.

The <input> tag

The <input> tag is the workhorse of forms. It's a single tag (no closing tag) and its type attribute decides what kind of box appears:

<input type="text">
<input type="email">
<input type="password">
<input type="number">

The same tag can be a plain text box, an email field, a hidden password field, or a number spinner — just by changing type. Here are the most common types you'll use:

type	What it makes
text	a normal one-line text box
email	a text box that checks for an @ sign
password	a box that hides characters as dots
number	a box that only accepts numbers
date	a calendar date picker

Labels: always say what an input is for

A bare input box is confusing — what should you type in it? That's the job of a <label>. It's the readable text next to an input:

<label for="username">Your name:</label>
<input type="text" id="username">

The trick is matching them: the label's for attribute equals the input's id. Now the two are linked, so clicking the label also clicks (focuses) the input. Every input should have a label — it makes your form clearer and works better for people using screen readers.

The name attribute

When a form is sent, each answer needs a key so the receiver knows what it means. That key is the name attribute:

<input type="email" id="mail" name="email">

If you typed [email protected], the form sends something like [email protected]. Without a name, that answer would have no label and would be ignored. So: id links the label to the input, and name labels the data when it's sent.

Choices: radio buttons and checkboxes

Sometimes you want people to choose instead of type.

Radio buttons let the user pick exactly one option. The magic is that they all share the same name:

<p>Choose a size:</p>
<label><input type="radio" name="size" value="small"> Small</label>
<label><input type="radio" name="size" value="medium"> Medium</label>
<label><input type="radio" name="size" value="large"> Large</label>

Because all three have name="size", selecting one automatically unselects the others.

Checkboxes let the user pick any number of options. Each works independently:

<p>Toppings:</p>
<label><input type="checkbox" name="cheese"> Cheese</label>
<label><input type="checkbox" name="olives"> Olives</label>
<label><input type="checkbox" name="mushrooms"> Mushrooms</label>

The value attribute on radios says which option was chosen when the data is sent.

Dropdown menus with <select>

When there are many options, a dropdown saves space. It uses <select> with an <option> for each choice:

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="uk">United Kingdom</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

The submit button

Finally, a button to send the form. Inside a form, a button with type="submit" (the default) triggers the form:

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

A complete worked example

Let's combine everything into one working sign-up form. Save this as signup.html and open it in a browser. Try leaving the name empty and pressing the button — the browser's built-in validation will stop you, because of the required attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sign Up</title>
  <style>
    body { font-family: sans-serif; max-width: 360px; margin: 30px auto; }
    label { display: block; margin-top: 12px; font-weight: bold; }
    input[type="text"], input[type="email"], select {
      width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box;
    }
    button { margin-top: 16px; padding: 10px 16px; }
  </style>
</head>
<body>
  <h1>Create an account</h1>
  <form>
    <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>

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

    <label>Favourite subject</label>
    <select name="subject">
      <option value="coding">Coding</option>
      <option value="art">Art</option>
      <option value="sport">Sport</option>
    </select>

    <label>Send me updates?</label>
    <label><input type="radio" name="updates" value="yes"> Yes please</label>
    <label><input type="radio" name="updates" value="no"> No thanks</label>

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

Notice how the required attribute makes the browser refuse to submit until the field is filled, and the email field checks for an @. You got all that validation for free, just from HTML.

Try it yourself

1. Add a number field. Insert an "Age" input using type="number" with a label, and add min="5" and max="120" so the browser limits the range.
2. Add checkboxes. Below the form, add three checkbox toppings (or hobbies) the user can tick — remember each needs its own name.
3. Add a message box. Use <textarea name="message"></textarea> to give a bigger, multi-line box for a short message.

Challenge: Build a "Pizza order" form. It should ask for the customer's name (text), pizza size (three radio buttons), at least three toppings (checkboxes), a delivery country (dropdown) and special instructions (textarea), then end with a submit button. Make sure every input has a matching <label> and a sensible name. When it works, style it using what you learned in Styling Web Pages with CSS.