What are HTML Forms?

// Quick Answer
  • HTML forms collect user input on websites.
  • Forms use elements like <input>, <textarea>, and <button>.
  • The <form> tag wraps all form controls.
  • Forms can send data using GET or POST requests.
  • Every login page, search bar, and signup page uses HTML forms.

What is an HTML form?

An HTML form is a section of a web page used to collect information from users.

Forms allow visitors to:

  • Log in to websites
  • Create accounts
  • Search content
  • Send messages
  • Place orders
  • Submit surveys
💡 In simple terms

HTML forms are how websites "talk" to users and collect information.

The <form> element

Every HTML form starts with the <form> tag.

It acts as a container for all form controls like inputs, labels, buttons, and dropdown menus.

index.html
<form>

  

</form>

Basic HTML form example

Here is a simple form with a name field and submit button:

form.html
<form>

  <label for="name">
    Name
  </label>

  <input
    type="text"
    id="name"
    name="name"
  >

  <button type="submit">
    Submit
  </button>

</form>

Common form elements

HTML provides many different form controls.

  • <input> — text fields, passwords, emails, checkboxes
  • <textarea> — multi-line text
  • <select> — dropdown menus
  • <option> — dropdown items
  • <button> — clickable buttons
  • <label> — accessible field labels
📌 Real-world fact

Nearly every interactive website feature uses forms — including Google Search, Instagram login, Amazon checkout, and YouTube comments.

Different input types

The type attribute changes how an input behaves.

inputs.html
<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="date">

Modern browsers automatically provide validation and special keyboards for many input types.

What do GET and POST mean?

Forms send data using the method attribute.

GET

GET sends data through the URL.

search.html
<form method="GET">

Commonly used for:

  • Search bars
  • Filters
  • Public data

POST

POST sends data inside the request body instead of the URL.

login.html
<form method="POST">

Commonly used for:

  • Login forms
  • Registration forms
  • Payments
  • Sensitive information
⚠️ Important

Never send passwords or sensitive data using GET requests because the information appears in the URL.

The action attribute

The action attribute tells the browser where to send form data.

contact.html
<form
  action="/submit-form"
  method="POST"
>

Why labels matter

Labels improve accessibility and usability.

label.html
<label for="email">
  Email
</label>

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

Clicking the label automatically focuses the input field.

Basic form validation

HTML includes built-in validation features.

validation.html
<input
  type="email"
  required
>

The browser will automatically prevent submission if the field is empty or invalid.

Summary

HTML forms are one of the most important parts of web development.

They allow websites to collect user input using fields, buttons, dropdowns, and other controls.

Every modern website relies on forms for interaction — from login systems to search engines and checkout pages.

Ready to build real forms? Our free HTML course teaches forms, validation, accessibility, semantic HTML, and modern web development step-by-step.