The Interactive

Form Basics

  • Beginner
  • December 31, 2025
Written by Fahim ul Haq

Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.

Forms are one of the most important parts of the web. Any time you sign up for an account, log in, search for something, or submit information, you are using an HTML form.

In this lesson, you’ll learn the basics of how forms work in HTML. You’ll understand what forms are, why they exist, and how to create simple forms using common input elements. You’ll also build a complete form step by step so you can see how everything fits together.

This lesson focuses on structure and understanding. You don’t need to worry about styling or advanced behavior yet. The goal is to learn how forms are built and how browsers interpret them.

What is an HTML form?

An HTML form is a section of a web page that collects input from users. That input can be text, numbers, selections, or other types of data.

Forms act as a bridge between the user and the system behind the website. The user enters information, and the form sends that information somewhere to be processed.

Even though forms often look simple on the surface, they are one of the most powerful features of HTML.

Why forms matter

Without forms, websites would be mostly static. Users could read content, but they couldn’t interact with it in meaningful ways.

Forms make it possible to:

  • Create accounts
  • Log in
  • Submit feedback
  • Search content
  • Place orders
  • Contact businesses

Learning form basics is a major milestone in learning HTML because it introduces real interaction between users and websites.

The form element

All HTML forms start with the <form> element. This element wraps all the form controls, such as input fields and buttons.

Here is the simplest possible form:

				
					<form>
</form>

By itself, this form does nothing yet. It’s just a container. The real functionality comes from the elements inside it.

Understanding the role of the form

The <form> element defines:

  • What data will be collected
  • Where the data will be sent
  • How the data will be sent

In this lesson, you’ll focus mainly on structure and inputs. You’ll briefly see where data goes, but you won’t need to handle servers or databases yet.

Adding your first form to a page

Let’s start with a basic HTML document and add an empty form.

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Basics</title>
  </head>
  <body>
    <h1>Contact Form</h1>

    <form>
    </form>
  </body>
</html>

If you open this page in a browser, you won’t see anything special yet. That’s expected. The form is there, but it doesn’t contain any inputs.

Input elements: collecting user data

To collect data, forms use input elements. Inputs allow users to type, select, or choose information.

The most common input element is <input>. This element changes behavior depending on its type attribute.

Here’s a basic text input:

				
					<input type="text" />

By default, this creates a single-line text field where users can type.

Labels: explaining inputs to users

Inputs should almost always have labels. A label tells the user what the input is for.

Here’s how to add a label:

				
					<label>Name:</label>
<input type="text" />

This works visually, but there’s a better and more accessible way to connect labels to inputs.

Connecting labels to inputs properly

To properly associate a label with an input, you use the for attribute on the label and the id attribute on the input.

Example:

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

This connection helps screen readers and improves usability. Clicking the label also focuses the input field.

This is an important habit to build early.

Step-by-step: creating a simple text input

Let’s build a small form with a labeled text input.

Inside your <form>, add the following:

				
					<form>
  <label for="username">Username:</label>
  <input type="text" id="username" />
</form>

Save and refresh your browser. You should see a label and a text input field.

Placeholder text

Inputs can include placeholder text to give users a hint about what to enter.

Example:

				
					<input
  type="text"
  id="username"
  placeholder="Enter your username"
/>

The placeholder appears inside the input and disappears when the user starts typing.

Placeholders are helpful, but they should not replace labels. Always use both.

The name attribute

The name attribute identifies the data being sent when a form is submitted.

Example:

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

When the form is submitted, the browser sends the value of this input using the name as the key.

Even though you’re not processing form data yet, it’s important to include name attributes as a good habit.

Password inputs

For sensitive information like passwords, HTML provides a password input type.

Example:

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

This masks the text as the user types, helping protect privacy.

Email inputs

HTML includes specialized input types for certain kinds of data, such as email addresses.

Example:

				
					<label for="email">Email:</label>
<input type="email" id="email" name="email" />

Email inputs provide basic validation and may trigger email-friendly keyboards on mobile devices.

Multiple inputs in a form

Most forms contain more than one input. Let’s build a simple form with multiple fields.

				
					<form>
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /><br /><br />

  <label for="email">Email:</label><br />
  <input type="email" id="email" name="email" /><br /><br />

  <label for="password">Password:</label><br />
  <input type="password" id="password" name="password" />
</form>

The <br /> elements add line breaks for basic spacing. Later, CSS will handle layout more cleanly.

Buttons and submitting forms

Forms need a way to submit data. This is done using a button.

The most common submit button looks like this:

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

Add this inside your form:

				
					<form>
  <!-- inputs here -->
  <button type="submit">Submit</button>
</form>

When clicked, the browser attempts to submit the form.

The action attribute

The action attribute on the <form> element defines where the form data is sent.

Example:

				
					<form action="/submit">

For now, you can leave the action empty or set it to #. The form will still work visually, but the data won’t be processed.

				
					<form action="#">

Handling form submissions properly is covered later when you learn backend or JavaScript concepts.

Handling form submissions properly is covered later when you learn backend or JavaScript concepts.

The method attribute

The method attribute defines how data is sent.

The two most common methods are:

  1. GET
  2. POST

Example:

				
					<form action="#" method="post">

At this stage, you don’t need to deeply understand the difference. Just know that POST is commonly used for sending form data securely.

Step-by-step: building a complete basic form

Let’s put everything together into a complete beginner form.

				
					<form action="#" method="post">
  <h2>Sign Up</h2>

  <label for="name">Name:</label><br />
  <input
    type="text"
    id="name"
    name="name"
    placeholder="Your full name"
  /><br /><br />

  <label for="email">Email:</label><br />
  <input
    type="email"
    id="email"
    name="email"
    placeholder="you@example.com"
  /><br /><br />

  <label for="password">Password:</label><br />
  <input
    type="password"
    id="password"
    name="password"
  /><br /><br />

  <button type="submit">Create Account</button>
</form>

Save and refresh. You’ve now built a complete HTML form using only basic elements.

Accessibility and forms

Forms must be accessible to all users, including those using screen readers or keyboards.

Using labels correctly, connecting them with inputs, and choosing appropriate input types improves accessibility automatically.

HTML gives you many accessibility features for free when you use it correctly.

Common beginner mistakes with forms

One common mistake is forgetting to add labels. Another is using placeholders instead of labels, which can confuse users.

Beginners also sometimes:

  • Forget name attributes
  • Use incorrect input types
  • Nest forms inside other forms

Avoid these issues by following the structure you’ve learned in this lesson.

Forms and layout (for later)

Right now, your forms may look plain. That’s okay.

HTML focuses on structure and meaning. CSS will later control spacing, alignment, colors, and layout.

Learning forms without styling helps you understand what each element does.

Practice: improve your form

Try modifying your form by:

  • Adding another input field
  • Changing placeholder text
  • Renaming labels
  • Rearranging the order

Experimenting is one of the best ways to learn how forms behave.

What you should understand after this lesson

By now, you should be comfortable with:

  • What forms are and why they exist
  • Using the <form> element
  • Creating text, email, and password inputs
  • Adding labels correctly
  • Using buttons to submit forms

You don’t need to understand data handling yet. Focus on structure and clarity.

What’s next?

Now that you understand form basics, you’re ready to learn about more specialized form controls.

In the next lesson, you’ll explore radio buttons, checkboxes, dropdowns, and text areas, and learn when to use each one.

Before moving on, try building a small contact form using only what you’ve learned here. Writing forms from scratch is one of the best ways to solidify your understanding.

On this page

    In This Module

    2. The Interactive