Home Blog Contact

Web Design Tutorial — Lesson 24 of 27 [ Updated: 11 Aug 2026 ]

HTML Forms Explained for Beginners – Complete Introduction

Learning Objectives

After completing this tutorial, you will be able to:

  • Understand what HTML forms are.

  • Create a basic form.

  • Use the <form> element.

  • Add labels to form fields.

  • Create basic input fields.

  • Understand how forms are structured.

Table of Contents

  1. Introduction

  2. What Is an HTML Form?

  3. Where Are Forms Used?

  4. The <form> Element

  5. Creating Your First Form

  6. The <label> Element

  7. The <input> Element

  8. Creating Different Input Fields

  9. Connecting Labels and Inputs

  10. Building a Simple Registration Form

  11. Best Practices

  12. Common Beginner Mistakes

  13. Practice Exercise

  14. Assignment

  15. Summary

  16. Frequently Asked Questions

  17. Next Tutorial

Introduction

Most websites need some way to receive information from visitors.

For example, a website may ask a visitor to:

  • Enter their name.

  • Enter an email address.

  • Search for an article.

  • Create an account.

  • Log in.

  • Send a message.

  • Select an option.

  • Submit an order.

HTML forms provide the basic structure for collecting this information.

You will see forms almost everywhere on the web.

What Is an HTML Form?

An HTML form is a section of a webpage designed to collect user input.

A simple form might look like this:

Name
[________________]

Email
[________________]

[ Submit ]

HTML creates the structure.

Later, CSS will make the form look professional, and JavaScript or a backend language such as PHP can process the submitted information.

For now, your goal is to understand the HTML structure.

Where Are Forms Used?

Forms are used in many real-world situations.

Login Form

Email
Password

[ Log In ]

Registration Form

Name
Email
Password

[ Create Account ]

Contact Form

Name
Email
Message

[ Send Message ]

Search Form

[ Search articles... ] [ Search ]

Checkout Form

Name
Address
Phone
Payment Information

[ Place Order ]

You will eventually learn how to build all of these.

The <form> Element

The <form> element defines the form.

Basic syntax:

<form>

    <!-- Form controls go here -->

</form>

Everything belonging to the form can be placed inside the <form> element.

For example:

<form>

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

</form>

This creates the basic structure of a form.

Creating Your First Form

Let's create a simple name form.

<form>

    <label>Name</label>

    <input type="text">

</form>

Open the page in your browser.

You should see:

Name
[________________]

The <label> tells the visitor what the field is for.

The <input> creates the field where the visitor can type.

The <label> Element

The <label> element provides a description for a form control.

Example:

<label>Name</label>

A good form should clearly identify every input field.

For example:

<label>Email</label>
<input type="email">

The visitor can immediately understand what information should be entered.

The <input> Element

The <input> element creates an input field.

One of the most important attributes is:

type

For example:

<input type="text">

This creates a text input.

The type determines what kind of input the browser should provide.

You will learn many input types throughout the form section.

Creating Different Input Fields

Text Input

Use:

<input type="text">

Example:

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

This is useful for names, usernames, titles, and other general text.

Email Input

Use:

<input type="email">

Example:

<label>Email Address</label>
<input type="email">

The browser understands that this field is intended for an email address.

Password Input

Use:

<input type="password">

Example:

<label>Password</label>
<input type="password">

Characters entered into this field are visually hidden.

This is commonly used for login and registration forms.

Connecting Labels and Inputs

A professional form should connect each <label> to its corresponding input.

You can do this using:

for

and:

id

Example:

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

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

Notice:

label for="name"
        ↓
input id="name"

The values match.

This creates an explicit connection between the label and input.

Why Is This Important?

The connection makes the form easier to use.

For example, if a user clicks the label:

Full Name

the browser can focus the associated input field.

This is also important for accessibility because assistive technologies can understand which label belongs to which form control.

Building a Simple Registration Form

Now let's combine what you've learned.

<h1>Create an Account</h1>

<form>

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

    <br><br>

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

    <br><br>

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

</form>

You now have the basic structure of a registration form.

It contains:

Full Name
Email Address
Password

The visual design is still simple.

That's expected.

CSS will later transform this into a professional form.

Adding a Placeholder

You can give users a hint using the placeholder attribute.

Example:

<input
    type="text"
    id="name"
    placeholder="Enter your full name">

The visitor will see:

[ Enter your full name ]

Another example:

<input
    type="email"
    id="email"
    placeholder="Enter your email">

A placeholder can help explain what information should be entered.

However, don't use the placeholder as a replacement for a proper label.

Good:

<label for="email">Email Address</label>

<input
    type="email"
    id="email"
    placeholder="you@example.com">

Best Practices

Always identify form fields

Use clear labels:

<label for="email">Email Address</label>

rather than relying only on placeholder text.

Use the appropriate input type

For email:

<input type="email">

For passwords:

<input type="password">

For general text:

<input type="text">

Choosing the correct type gives the browser useful information about the field.

Give inputs meaningful IDs

Good:

<input id="email">

Avoid confusing IDs such as:

<input id="input123">

Meaningful names make your code easier to understand.

Common Beginner Mistakes

Mistake 1: No label

Avoid:

<input type="text">

The user may not know what to enter.

Better:

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

Mistake 2: for and id don't match

Incorrect:

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

The values don't match.

Correct:

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

Mistake 3: Using the wrong input type

Don't use:

<input type="text">

for a password if the field is supposed to hide the characters.

Use:

<input type="password">

Practice Exercise

Create a simple contact form containing:

  • Name

  • Email

  • Message

For now, use text inputs for Name and Email.

Example:

<form>

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

    <br><br>

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

    <br><br>

    <label for="message">Message</label>
    <input type="text" id="message">

</form>

Don't worry about creating a large message box yet.

You'll learn the proper <textarea> element in a later tutorial.

Assignment

Create a Student Registration Form.

Include:

  • Full Name

  • Email

  • Password

  • Username

Each field should have:

  • A <label>

  • A suitable <input type>

  • A unique id

  • A matching for attribute

Example structure:

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

Try writing the complete form yourself.

Summary

In this tutorial, you learned the basic structure of HTML forms.

The most important elements introduced were:

<form>  → Defines the form
<label> → Describes a form control
<input> → Creates an input field

You also learned common input types:

text
email
password

And you learned how to connect labels and inputs:

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

This is the foundation for building real-world forms.

Frequently Asked Questions

What does <form> do?

It defines a section of a webpage used to collect user input.

What is <input> used for?

It creates an interactive field where users can enter or select information.

Why should I use <label>?

Labels identify form controls and improve usability and accessibility.

What is the purpose of id?

The id uniquely identifies an element and can be used to connect a label to its input.

What does placeholder do?

It displays a temporary hint inside an input field.

Next Tutorial

HTML Input Types – Text, Email, Password, Number, Date, and More

Next, you'll explore the most useful HTML <input> types and learn when to use each one. You'll build a more realistic form instead of using only basic text fields.

← Previous Next →