What Are HTML Forms? Complete Beginner's Guide

Every time you search Google, sign up for a newsletter, log in to your bank or send a message through a "Contact us" page, you are using an HTML form. Forms are the main way a website collects information from the people who visit it.

This guide explains what an HTML form is, how it works behind the scenes, and the handful of building blocks you need to make one. No previous experience required — if you can edit a text file, you can follow along.

What is an HTML form?

An HTML form is a section of a web page that contains input controls — text boxes, checkboxes, dropdowns, buttons — and instructions for what to do with the data when the visitor presses Submit.

Here is the smallest useful form you can write:

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

That is all a form is: a <form> element wrapping some fields and a button. The browser does the rest — it draws the controls, checks that the email looks valid, and sends the data when the button is clicked.

How an HTML form works, step by step

It helps to picture the journey a single submission takes:

1. The visitor fills in the fields. Each field has a name, such as email.
2. They press the submit button. The browser runs built-in validation (for example, required fields must not be empty).
3. The browser packages the data as name/value pairs, like email=jane@example.com.
4. It sends that package to the URL in the action attribute, using the HTTP method in the method attribute (usually POST).
5. A server receives the data, does something useful with it — stores it, emails it, signs the person up — and sends back a response page.

The important point for beginners: HTML only builds and sends the form. Something on a server has to receive it. That "something" is often called a form backend.

The building blocks of every form

Almost every form you will ever build uses the same small set of elements:

Element	What it does
<form>	The container. Sets where the data goes (action) and how (method).
<label>	The visible text describing a field. Clicking it focuses the field.
<input>	The workhorse: text, email, password, checkbox, radio, date, file and more.
<textarea>	A multi-line text box for longer messages.
<select>	A dropdown list of options.
<button>	Submits (or resets) the form.
<fieldset> & <legend>	Group related fields under a caption.

We cover each of these in detail in HTML Form Elements Explained.

The name attribute is what gets sent

The single most common beginner mistake is forgetting the name attribute. The browser only submits fields that have one. The id is for connecting a label; the name is the key the server receives.

<!-- ✗ Not submitted: no name -->
<input type="text" id="city">

<!-- ✓ Submitted as city=London -->
<input type="text" id="city" name="city">

GET vs POST

The method attribute controls how data travels:

• GET puts the data in the URL (/search?q=forms). Great for searches and filters you might bookmark or share. Never use it for passwords or personal data.
• POST sends the data in the body of the request, out of sight of the address bar. Use it for anything that creates, changes or sends something — contact messages, sign-ups, orders.

Rule of thumb: if submitting the form does something, use POST.

Built-in validation (free, no JavaScript)

Modern browsers check a lot for you before a form is sent:

• required — the field can't be empty.
• type="email" / type="url" — the value must look like an email or web address.
• minlength / maxlength — limits on text length.
• min / max — limits on numbers and dates.
• pattern — a regular expression the value must match.

Client-side validation improves the experience, but it can be bypassed, so your backend should always validate again.

Where does the data go? Choosing a backend

You have three common options for receiving form data:

1. Write your own server code in PHP, Node.js, Python and so on. Maximum control, but you have to host it, secure it and send the emails yourself.
2. Use your platform's built-in forms (WordPress plugins, Webflow, etc.). Easy, but tied to that platform.
3. Use a form backend service like Formclick. You point the form's action at an API endpoint and submissions arrive in your inbox and dashboard — no server needed.

With Formclick, the only change to a normal form is the action URL and one hidden field holding your access key:

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">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="message">Message</label>
  <textarea id="message" name="message" required></textarea>

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

That form works on any static site — GitHub Pages, Netlify, a plain HTML file — because the backend lives somewhere else.

Accessibility basics from day one

• Every field needs a label. Connect them with for and id. Placeholders are not labels.
• Use the right input type so phones show the right keyboard and screen readers announce the field correctly.
• Use a real <button>, not a styled <div>, so keyboard users can submit.
• Group related choices (like radio buttons) in a <fieldset> with a <legend>.

Key takeaways

• An HTML form is a <form> element containing fields and a submit button.
• Only fields with a name are submitted.
• action says where data goes; method says how (use POST for most forms).
• HTML builds and sends the form; a backend has to receive it.
• Labels, correct input types and real buttons make forms usable for everyone.

Ready to build one? Continue with How to Create an HTML Form, or grab a ready-made layout from our free HTML form templates.