HTML · HTML Forms — Introduction · Lesson 10 of 32

HTML Forms — Introduction

HTML Forms — Introduction

HTML Forms are used to collect information from users and send that information for processing. Forms are one of the most important components of interactive websites and web applications.

Key Idea:

A form provides a structured way for a user to enter data, while form controls such as text boxes, radio buttons, checkboxes and buttons determine what type of information can be entered.

What is an HTML Form?

An HTML Form is a section of a web page containing interactive controls that allow users to enter and submit data.

Forms are commonly used to collect information such as:

  • Name
  • Email address
  • Password
  • Phone number
  • Address
  • Gender
  • Preferences
  • Feedback
  • Search queries

Real-World Examples

Form Purpose
Login Form Collects username/email and password.
Registration Form Collects information required to create an account.
Search Form Accepts keywords entered by a user.
Feedback Form Collects comments, opinions or suggestions.
Contact Form Allows users to send a message to an organisation.
Online Application Form Collects detailed information from applicants.

The <form> Element

The <form> element is used to create an HTML form.

Form controls such as input fields, labels, buttons and selection controls are generally placed inside the <form> element.

Basic Syntax

<form>

    Form controls go here

</form>
Remember:

The <form> element acts as a container for controls used to collect and submit user information.

Creating a Simple Form

A basic form can contain a text box and a submit button.

Example

<form>

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

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

</form>

How It Works

  1. <form> creates the form container.
  2. <label> provides a description for the input field.
  3. <input> creates a field where the user can enter data.
  4. <button> creates a button.
  5. type="submit" specifies that the button submits the form.

Common Form Controls

HTML provides several form controls for collecting different types of information.

Control HTML Element / Type Purpose
Text Field <input type="text"> Accepts a single line of text.
Password <input type="password"> Accepts password input while hiding the characters.
Email <input type="email"> Accepts an email address.
Number <input type="number"> Accepts numeric input.
Radio Button <input type="radio"> Allows selection of one option from a group.
Checkbox <input type="checkbox"> Allows one or more independent choices.
Date <input type="date"> Allows the user to select a date.
File <input type="file"> Allows the user to select a file.
Dropdown <select> Allows the user to select from predefined options.
Multiline Text <textarea> Accepts multiple lines of text.
Submit Button <button type="submit"> Submits the form.

The <input> Element

The <input> element is one of the most commonly used elements in HTML forms.

Its behaviour is controlled using the type attribute.

Example

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">
Type Example Typical Use
text type="text" Name, city, username
email type="email" Email address
password type="password" Password
number type="number" Age, quantity, marks
date type="date" Date of birth, appointment date
radio type="radio" Select one option
checkbox type="checkbox" Select multiple options

The <label> Element

The <label> element provides a descriptive name for a form control.

A label improves usability and accessibility because users can understand what information is expected.

Example

<label for="username">Username:</label>

<input type="text" id="username">
Important Relationship:

The for attribute of <label> should match the id of the corresponding form control.

name and id Attributes

The id and name attributes serve different purposes in forms. 

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

<input
    type="email"
    id="email"
    name="email">
Attribute Purpose
id Uniquely identifies an element within the page and connects it with a label.
name Identifies the form field when its value is submitted to a server.
Common Mistake:

Beginners often use only id and forget name. For form submission, the name attribute is important because it identifies the submitted field.

Text Input

A text input allows the user to enter a single line of text. 

<label for="fullname">Full Name:</label>

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

Examples: Name, username, city and organisation name.

Password Input

The password input type hides the characters entered by the user on the screen. 

<label for="password">Password:</label>

<input
    type="password"
    id="password"
    name="password">
Security Note:

Hiding characters in the browser does not by itself make a password secure. Secure transmission and server-side security are also required.

Complete Beginner Form Example

The following example combines a form, labels, text input, email input, password input and a submit button. 

<form>

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

    <br><br>

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

    <br><br>

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

    <br><br>

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

</form>

How Does a Form Work?

A form generally follows a simple data-collection process. 

User
  │
  ▼
HTML Form
  │
  ▼
Form Controls
  │
  ▼
User Enters Data
  │
  ▼
Submit
  │
  ▼
Form Data
  │
  ▼
Server / Application
  │
  ▼
Processing and Response
Stage What Happens?
1. Form Display The browser displays the form controls.
2. Data Entry The user enters information.
3. Validation The entered information may be checked.
4. Submission The user submits the form.
5. Processing The application or server processes the submitted data.
6. Response The user receives an appropriate response.

Important Form Attributes — Preview

The <form> element supports important attributes that control how and where form data is submitted.

Attribute Purpose
action Specifies where the submitted form data is sent.
method Specifies the HTTP method used to submit the data.
target Specifies where the response should be displayed.
autocomplete Controls whether the browser may automatically complete form values.
novalidate Prevents the browser's built-in validation during submission.
Coming Next:

The action and method attributes will be studied in detail when we learn Form Submission and GET vs POST.

Real-World Example: Student Registration Form

Case Study

Imagine an online student registration page where a student enters their name, email address, password and other information.

The HTML form provides the interface for collecting the information. After submission, a web application can validate and process the data.

This demonstrates an important principle: HTML creates the form interface, while application logic processes the submitted data.

HTML Form vs Form Processing

HTML Form Form Processing
Creates the user interface. Processes submitted information.
Uses HTML elements. Usually involves server-side or client-side programming.
Collects user input. Validates, stores or uses the input.
Runs in the browser. May involve a web server and database.

Common Beginner Mistakes

  • Forgetting to place form controls inside <form>.
  • Using id without understanding the role of name.
  • Forgetting to associate a label with its input.
  • Using the wrong input type.
  • Assuming that HTML alone securely stores or processes submitted information.
  • Using a password field without understanding that type="password" only masks the display.
  • Forgetting to provide a submit control.

Exam Questions

1. What is an HTML Form?

Answer: An HTML Form is a section of a web page used to collect information from users through interactive form controls.

2. Which HTML element is used to create a form?

Answer: <form>

3. Which input type is used to enter a password?

Answer: type="password"

4. Which element is used to provide a caption or description for a form control?

Answer: <label>

5. Which input type allows the user to select one option from a group?

Answer: type="radio"

6. Which input type allows the user to select multiple independent options?

Answer: type="checkbox"

7. Differentiate between id and name attributes in a form.

Answer: The id uniquely identifies an element in the document and can associate it with a label. The name identifies the form field when its value is submitted.

8. Write HTML code to create a name field and a submit button.

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

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

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

Interview Questions

1. What is the purpose of the <form> element?

It groups form controls and provides a structure for collecting and submitting user data.

2. Why should labels be used with form controls?

Labels improve usability and accessibility by clearly identifying the purpose of each form control.

3. What is the difference between a text field and a password field?

A text field displays the entered characters normally, whereas a password field masks the characters on screen.

4. What is the purpose of the name attribute?

The name attribute identifies a form control's value when the form data is submitted.

5. Is HTML alone enough to process form data?

No. HTML creates the form interface. Processing submitted data generally requires client-side or server-side programming.

Practice Task

Create an HTML form containing the following fields:

  1. Full Name
  2. Email Address
  3. Password
  4. Age
  5. Date of Birth
  6. Submit Button

For every input field, use an appropriate label, id, name and input type.

Think Like a Web Developer

You are developing a registration page for an online learning platform. The user must enter their name, email address and password.

Which HTML controls would you choose and why?

Click to View Answer

Use <input type="text"> for the name, <input type="email"> for the email address and <input type="password"> for the password. Each control should have an associated <label>, meaningful id and name.

Quick Revision

  • <form> creates an HTML form.
  • <input> creates many types of form controls.
  • <label> describes a form control.
  • type determines the behaviour of an input control.
  • id identifies an element within the page.
  • name identifies submitted form data.
  • radio is generally used for one choice from a group.
  • checkbox allows independent selections.
  • submit sends the form for processing.
  • HTML creates the interface; application logic processes the submitted information.

Memory Trick

F → I → L → V → S

  • F → Form
  • I → Input
  • L → Label
  • V → Validate
  • S → Submit

Frequently Asked Questions (FAQs)

1. What is the main purpose of an HTML form?

The main purpose of an HTML form is to collect information from users.

2. Can a form contain multiple input controls?

Yes. A form can contain multiple text fields, passwords, radio buttons, checkboxes, dropdowns, textareas and buttons.

3. What is the difference between <input> and <form>?

<form> provides the overall form structure, while <input> creates individual input controls.

4. Why is the label element important?

It identifies the purpose of a form control and improves accessibility and usability.

5. Does a password input encrypt the password?

No. type="password" only masks the characters visually. Secure transmission and proper server-side security are separate requirements.

Exam Tips

  • Remember the purpose of the <form> element.
  • Learn the common input types and their uses.
  • Do not confuse radio buttons with checkboxes.
  • Remember that id and name have different purposes.
  • Practise writing complete form code rather than memorising individual tags.
  • In code-based questions, check opening and closing tags and attribute quotation marks carefully.
Start This Course From the Beginning →