HTML Forms Tutorial: Inputs, Labels, Validation & Submit

by
Home/Learn/HTML forms tutorial

HTML Forms Tutorial

An HTML form collects information from visitors and sends it somewhere. You build one with the <form> element, put <input>, <select> and <textarea> fields inside it, connect each field to a <label>, and finish with a submit button. Attributes like required add validation without JavaScript.

Last updated: October 4, 2026

Quick answer

<form action="/subscribe" method="post"> <label for="email">Email</label> <input type="email" id="email" name="email" required> <button type="submit">Subscribe</button> </form>

Step 1: Start with the <form> element

Every form starts with a <form> tag that wraps all of its fields. Two attributes tell the browser what to do when the form is submitted:

  • action: the address the data is sent to, usually a script on your server or a form service. Leave it out and the form submits to the current page.
  • method: get adds the data to the URL (fine for searches), post sends it in the body of the request (use this for anything personal, like emails or messages).

HTML only collects and sends the data. Saving it or emailing it to you needs something on the receiving end: a server script, or a hosted form service if your site has no back end.

Step 2: Add text inputs with labels

An <input> is a single-line field. Each one needs a name (the key the data is sent under) and should have a <label> that describes it.

  1. Give the input an id, for example id="name".
  2. Write a label with a matching for attribute: <label for="name">Your name</label>.
  3. Add name="name" to the input so its value is included when the form is sent.

Clicking a connected label puts the cursor in its field, and screen readers read the label aloud. A placeholder is not a replacement for a label, because it disappears as soon as someone starts typing.

index.html
Preview
Open in Full Editor →

Step 3: Pick the right input type

The type attribute changes how an input looks and behaves. The right type gives phone users the right keyboard (an @ key for email, a number pad for numbers) and adds basic checks for free:

  • email, tel, url: text fields with matching keyboards (email and url also check the format).
  • password: hides what is typed.
  • number: digits only, with optional min, max and step.
  • date, time, color, range: the browser shows a date picker, a time picker, a color picker or a slider.
index.html
Preview
Open in Full Editor →

Step 4: Checkboxes, radio buttons, dropdowns and text areas

Not every answer is typed. For choices, HTML has four more controls:

  • Checkboxes (type="checkbox"): tick any number of options.
  • Radio buttons (type="radio"): pick exactly one. Radios that share the same name form one group.
  • Dropdowns (<select> with <option>s): one choice from a list that would be too long for radios.
  • Text areas (<textarea>): multi-line text such as a message. Set its size with rows or CSS.

Wrap related checkboxes or radios in a <fieldset> with a <legend>, so the group has a title that screen readers announce.

index.html
Preview
Open in Full Editor →

Wrapping the input inside its label, as the checkboxes above do, connects them without needing for and id.

Step 5: Add built-in validation

Browsers can check a form before it’s sent, with no JavaScript. Add these attributes and the browser blocks the submit and shows a message when a field is wrong:

  • required: the field can’t be empty.
  • minlength / maxlength: limits on the number of characters.
  • min / max: limits for numbers and dates.
  • pattern: a regular expression the value must match, e.g. pattern="[0-9]{5}" for a 5-digit ZIP code. Add a title that explains the format.
  • type="email" / type="url": the value must look like an email address or a web address.

Press Send in the example without filling anything in to see the browser’s messages. The :invalid and :valid CSS selectors style fields by their state.

index.html
Preview
Open in Full Editor →

Browser validation is for convenience, not security. Anyone can switch it off, so the server that receives the data must check it again.

Step 6: Put it together, a complete contact form

Here is everything combined into a styled contact form you can copy. It uses method="post", a label for every field, the right input types, validation and a clear submit button. Replace action with the address of your form handler.

index.html
Preview
Open in Full Editor →

The autocomplete attributes let browsers fill in the visitor’s saved name and email, which makes forms much faster to complete on phones.

GET vs POST: which method should a form use?

MethodWhere the data goesUse it for
get (default)Added to the URL: /search?q=html. Visible, bookmarkable, saved in historySearches and filters that people may want to share or bookmark
postSent in the request body, not shown in the URLSign-ups, logins, contact forms, uploads, anything that changes data or is personal

Use post and also enctype="multipart/form-data" when the form has a file upload (<input type="file">).

Common mistakes when building forms

  • Missing name attributes. A field without a name isn’t sent at all, even if the user filled it in.
  • Placeholders instead of labels. Placeholder text vanishes when typing starts and is often too faint to read. Use a real <label>.
  • Labels that aren’t connected. The label’s for must match the input’s id exactly.
  • Radio buttons with different names. Only radios that share a name act as one group.
  • Trusting browser validation alone. Always validate again on the server.
  • Using get for personal data. It puts emails and messages into the URL and browser history. Use post.
  • Expecting HTML to send emails. A form needs a server script or a form service to deliver or store its data.
<form> <input> <label> <select> <textarea> <button> <fieldset> <datalist>

Frequently asked questions

How do I create a form in HTML?
Wrap your fields in a <form> element with action and method attributes, add <input>, <select> or <textarea> fields, each with a name and a connected <label>, and finish with <button type="submit">.
How do I make a form field required?
Add the required attribute to the field, for example <input type="email" name="email" required>. The browser will not submit the form until the field is filled in.
Can an HTML form send an email by itself?
No. HTML only collects the data and sends it to the address in the action attribute. A server-side script or a hosted form service has to receive the data and send the email.
What is the difference between GET and POST in a form?
GET adds the form data to the URL, which suits searches and filters. POST sends the data in the request body, which suits personal information, logins and anything that changes data.
Why is my form field not being submitted?
The field is probably missing a name attribute. Only fields with a name are included in the submitted data. Disabled fields are also left out.
How do I connect a label to an input?
Give the input an id and set the label's for attribute to the same value: <label for="email">Email</label> <input id="email">. You can also put the input inside the label.
How do I validate an email address in an HTML form?
Use <input type="email">. The browser checks that the value looks like an email address before submitting. Add required to make it mandatory, and check it again on the server.