Skip to main content

HTML Forms

Everything you have built so far is one-way: you publish, and visitors read. Forms turn the web into a conversation. They are how a visitor signs up, logs in, searches, orders a book, leaves a comment, books a seat, or tells you what they think. Nearly every useful website has at least one.

Forms are also where HTML meets the real world. People make typos, use screen readers, type on small phones, speak different languages, and sometimes try to break things on purpose. A good form handles all of that gracefully. This section teaches you how to build forms that are clear, easy to complete, accessible to everyone, and safe.


What You Will Learn​

In this section, you will be able to:

  • Build a form with the <form> element and decide where its data goes
  • Choose between the GET and POST methods
  • Create fields with <input> and name them with <label>
  • Pick the right input type for emails, numbers, dates, passwords, files, and more
  • Collect longer text with <textarea> and choices with <select>, <option>, and <datalist>
  • Add buttons and group related fields with <fieldset> and <legend>
  • Help users with autocomplete
  • Check data in the browser with required, min, max, minlength, maxlength, and pattern
  • Send files with multipart form data
  • Make forms accessible and secure
Prerequisites

You should be comfortable with basic HTML elements and attributes. If you need a refresher, read Table Basics for a sense of how structured elements fit together, and Links and Navigation for how URLs work, since forms send data to a URL.

Your First Form​

Here is a small sign-up form. Try typing in the demo. (Its submit button is switched off on this page, so nothing is sent anywhere.)

index.html
<form action="/subscribe" method="post">
  <p>
    <label for="name">Your name</label><br />
    <input type="text" id="name" name="name" required />
  </p>

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

  <p>
    <label for="level">Your level</label><br />
    <select id="level" name="level">
      <option value="beginner">Beginner</option>
      <option value="intermediate">Intermediate</option>
    </select>
  </p>

  <p>
    <label>
      <input type="checkbox" name="news" />
      Send me weekly tips
    </label>
  </p>

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

Even this small form uses most of what you will learn. Click Subscribe with empty fields, and your browser will check them for you, with no JavaScript needed.

How a Form Works​

A form is a round trip:

1. The visitor fills in the fields
        │
        ▼
2. The browser checks the data       (required, type, pattern, min, max ...)
        │   problems? → the visitor fixes them
        ▼
3. The visitor presses Submit
        │
        ▼
4. The browser packs the data into name=value pairs
   and sends them to the address in  action  using the  method
        │
        ▼
5. A server receives, checks again, and acts   (saves, replies, redirects)
        │
        ▼
6. The visitor sees a result page or message

Two important points sit in that picture:

  • HTML creates the form and does the first check (step 2). It does not store or process anything by itself. A server does that (step 5), written in a language such as Node.js, Python, PHP, or Java.
  • The browser's check is a convenience, not security. Anyone can bypass it. The server must always check again. You will learn why in Secure Form Design.

The Parts of a Form​

PartElementWhat it does
The container<form>Wraps the fields, and says where and how to send them
A field<input>, <textarea>, <select>Where the visitor types or chooses
A name tag<label>Tells people (and tools) what a field is for
A group<fieldset> and <legend>Groups related fields under a title
An action<button>Submits, resets, or runs something
A helper<datalist>Suggests values while typing

The Two Attributes Every Field Needs​

Almost every field depends on two attributes. If you remember nothing else, remember these:

AttributeUsed forWhat happens without it
nameThe key under which the field's value is sent to the serverThe value is not sent at all
idLinking a <label> to the field with forThe label is not connected, which breaks accessibility and click-to-focus
<label for="email">Email</label>
<input type="email" id="email" name="email" />

When the form is submitted, the browser sends email=ada@example.com. The name is the key, and what the visitor typed is the value.

The Form Controls at a Glance​

You need...UseLesson
A short line of text<input type="text">Input Element
An email, number, date, color, file...<input type="email">, number, date, and moreInput Types
A long message<textarea>Textarea
One choice from a list<select> with <option>Select, Option and Optgroup
A text field with suggestions<input list> with <datalist>Datalist
One choice from a few, all visible<input type="radio">Input Types
A yes/no or several choices<input type="checkbox">Input Types
A button to send or act<button>Button

Choosing the Right Control​

Picking the right control saves visitors effort, and often prevents mistakes before they happen.

SituationBest controlWhy
2 to 5 options, only one allowedRadio buttonsAll options are visible at once
6 to about 15 options, only one allowed<select>Saves space
Many options, or the user may know the answer alreadyText input with <datalist>Suggestions plus free typing
Several options allowedCheckboxesClear and simple
Agree or notA single checkboxThe standard pattern
A short answer<input>One line
A comment, message, or address<textarea>Room to write

Your Learning Path​

The lessons are grouped in the order that builds a form from the outside in. Follow them in order.

Two bonus lessons

This section adds two lessons that were not in the original plan: Disabled and Readonly (disabled-and-readonly.mdx) and Styling Forms (form-styling.mdx). Both are everyday needs that do not fit neatly into another lesson. Fields often need to be shown but not edited, and the default form controls look quite plain.

What Makes a Good Form?​

Think of it as a short conversation with a stranger. You want it to be polite, quick, and clear.

  1. Ask only what you need. Every extra field makes people leave.
  2. Label every field, visibly and correctly.
  3. Use the right control, so the phone shows the right keyboard.
  4. Help before correcting. Show format hints, and use autocomplete.
  5. Validate kindly. Say what is wrong and how to fix it, in plain words.
  6. Work with a keyboard alone, and with a screen reader.
  7. Work on a small screen, with big enough touch targets.
  8. Keep it safe. Check everything again on the server, and protect personal data.
  9. Confirm success. Tell people clearly that their message was received.

Common Beginner Mistakes​

MistakeWhat goes wrongWhere you will fix it
Fields with no nameTheir data is never sentInput Element
Using the placeholder as the labelThe hint vanishes when typing, and screen readers may skip itLabel Element
Clicking a label does nothingfor and id do not matchLabel Element
Using type="text" for everythingNo helpful keyboard, no free validationInput Types
Using GET for passwordsThey appear in the address bar and logsForm Methods
A <button> inside a form that submits by accidentMissing type="button"Button
Unclear error messagesPeople give upForm Validation
Relying only on browser checksAnyone can bypass themSecure Form Design
No enctype on a file uploadOnly the file's name is sentMultipart Form Data
Using red color alone to show errorsColorblind users cannot tellAccessible Forms

Forms for a Global Audience​

People everywhere will use your form. Small decisions decide whether it works for them.

  • Names are not "first" and "last." Many people have one name, several family names, or a different order. A single "Full name" field is often kinder, and avoid forcing a pattern.
  • Addresses differ. Not every country has states or ZIP codes. Allow flexible fields, and do not require a field that may not exist.
  • Phone numbers vary. Allow a country code, spaces, and dashes. Do not reject a valid format.
  • Dates and numbers vary. <input type="date"> lets the browser show the person's own format. Be careful with pattern rules built for one country.
  • Use autocomplete tokens, so browsers fill in details in the person's language.
  • Allow longer text. Names and addresses in some languages are longer than you expect, and may include accents and non-Latin characters.
  • Set lang on the page, and write labels and messages in plain, short words that translate well.
  • Mind data laws. Rules about collecting personal data (such as GDPR in Europe) apply to visitors from those regions. Collect the minimum, say why, and let people ask for deletion.

A Note on Security Before You Start​

Every field you add is a door into your system. People on the internet will try the handle. As you work through this section, keep three rules in mind:

  1. Never trust data from the browser. Always validate and clean it on the server.
  2. Use POST (over HTTPS) for anything private, and never send passwords by GET.
  3. Collect only what you need, and protect it.

You will study each of these in depth in Form Methods and Secure Form Design.


Quick Recap​

Test yourself. Click a question to reveal the answer.

1. Which element wraps all the fields of a form?

The <form> element. Its action says where to send the data, and its method says how.

2. Which attribute decides the key under which a field's value is sent?

name. A field with no name is not sent at all.

3. Which two attributes connect a label to its field?

for on the <label> must match id on the field. You can also wrap the field inside the <label>.

4. Does HTML store the data that visitors submit?

No. HTML only builds the form and sends the data. A server-side program receives, checks, and stores it.

5. Why must a server check the data again, even if the browser already did?

Browser checks are a convenience, and anyone can bypass them. The server is the only place where checks can be trusted.

6. When would you pick radio buttons over a select list?

When there are only a few options (about two to five) and only one may be chosen, so everything is visible at once.

Key Takeaways​

  • A form is a conversation: fields collect data, the browser does a first check, and a server does the real work.
  • <form> holds the fields. action and method decide where and how the data is sent.
  • Give every field a name (so it is sent) and a matching <label> (so it is understood).
  • Pick the right control and input type, and use required, min, max, minlength, maxlength, and pattern to guide people.
  • Build for everyone: keyboard, screen reader, small screen, and any language or region.
  • Never trust the browser. Check on the server, use POST over HTTPS for private data, and collect only what you need.

Ready to begin? Start with Form Element.