Web Development Zero to Advanced — Class 15 of 120
HTML Forms Introduction
HTML forms are used to collect information from users.
Almost every modern website uses forms in some way.
Examples include:
• Login forms
• Registration forms
• Contact forms
• Search forms
• Checkout forms
• Newsletter forms
• Job application forms
• Feedback forms
• Order forms
• Admin forms
A basic form looks like this:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
In this class, you will learn:
• What an HTML form is
• The <form> element
• Form controls
• action attribute
• method attribute
• GET and POST basics
• Labels and inputs
• id and name
• Submit buttons
• Form submission flow
• Client-side vs server-side processing
• Form accessibility basics
• Common beginner mistakes
What Is an HTML Form?
An HTML form is a section of a web page that allows users to enter and submit information.
For example, a contact form may collect:
Name
Phone Number
Message
The browser can then submit this information for processing.
Example:
<form>
<label for="name">
Name:
</label>
<input
type="text"
id="name"
name="name"
>
<button type="submit">
Send
</button>
</form>
The <form> Element
The <form> element acts as the container for form controls.
Basic structure:
<form>
Form controls go here.
</form>
Inside a form, you may use elements such as:
<input>
<label>
<textarea>
<select>
<button>
Example:
<form>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
>
<button type="submit">
Submit
</button>
</form>
What Is a Form Control?
A form control is an interactive element that allows users to enter, select, or submit information.
Examples include:
• Text fields
• Email fields
• Password fields
• Number fields
• Checkboxes
• Radio buttons
• Dropdown menus
• Text areas
• Buttons
Example:
<input type="text">
This creates a text input control.
The <input> Element
The <input> element is one of the most important HTML form controls.
Example:
<input type="text">
Different type values create different controls.
Examples:
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">
We will study input types in detail in the next class.
The <label> Element
The <label> element describes what a form control is for.
Example:
<label for="username">
Username:
</label>
<input
type="text"
id="username"
name="username"
>
The label contains:
for="username"
The input contains:
id="username"
Because these values match, the label is associated with the input.
Why Labels Are Important
Labels improve:
• Usability
• Accessibility
• Screen-reader support
• Form understanding
• Clickable target area
Users should not have to guess what an input field means.
The id Attribute
The id attribute identifies an element within the HTML document.
Example:
<input
type="text"
id="full-name"
>
A label can reference it:
<label for="full-name">
Full Name:
</label>
The name Attribute
The name attribute identifies the form control when form data is submitted.
Example:
<input
type="text"
id="full-name"
name="full_name"
>
If the user enters:
John Smith
the submitted data may conceptually contain:
full_name=John Smith
Remember:
id = Identifies an HTML element
name = Identifies submitted form data
What Is the action Attribute?
The action attribute specifies where the form data should be sent when the form is submitted.
Example:
<form action="/contact">
A complete example:
<form action="/contact" method="post">
<label for="message">
Message:
</label>
<input
type="text"
id="message"
name="message"
>
<button type="submit">
Send
</button>
</form>
Here:
/contact
represents the destination that will receive the submitted form data.
What Is the method Attribute?
The method attribute specifies the HTTP method used to submit the form.
Two common form methods are:
GET
POST
Example:
<form action="/search" method="get">
or:
<form action="/contact" method="post">
GET Method
GET is commonly used when retrieving information.
Example:
<form action="/search" method="get">
<label for="search">
Search:
</label>
<input
type="search"
id="search"
name="q"
>
<button type="submit">
Search
</button>
</form>
Suppose the user searches for:
HTML
The URL may look similar to:
/search?q=HTML
The submitted value appears in the query string.
Common GET Uses
GET is commonly appropriate for:
• Search
• Filtering
• Sorting
• Retrieving information
• Pages where the query should be shareable or bookmarkable
Simple concept:
GET → Retrieve information
POST Method
POST is commonly used when submitting information that may create or change data.
Example:
<form action="/register" method="post">
<label for="username">
Username:
</label>
<input
type="text"
id="username"
name="username"
>
<button type="submit">
Register
</button>
</form>
Common POST uses include:
• Registration
• Login
• Contact message submission
• Creating orders
• Creating database records
• Uploading information
Simple concept:
POST → Submit/process data
GET vs POST
GET:
• Commonly used for retrieval
• Form data usually appears in the URL query
• Search/filter pages commonly use it
• URLs can often be bookmarked
POST:
• Commonly used for submissions that may change data
• Normal form fields are sent in the request body
• Commonly used for registration and login
• Data does not normally appear in the URL query
Important:
POST does not automatically encrypt data.
Use HTTPS to protect data during transmission.
What Happens When a Form Is Submitted?
Suppose a user fills in:
Name: John
Email: john@example.com
Then clicks:
Submit
A simplified flow is:
User
↓
HTML Form
↓
Submit
↓
Browser
↓
HTTP Request
↓
Server
↓
Processing
↓
HTTP Response
↓
Browser
A dynamic application may also use a database:
User
↓
Form
↓
Request
↓
Backend
↓
Database
↓
Backend
↓
Response
↓
Browser
HTML Does Not Process Data by Itself
This is very important.
HTML can create:
• Input fields
• Labels
• Buttons
• Form structure
But HTML alone cannot:
• Create a user account
• Save information in a database
• Verify a password
• Send a real order to a database
• Process a payment
• Authenticate a user
For these operations, you normally need technologies such as:
• Backend programming
• APIs
• Databases
• Server-side validation
The Submit Button
A submit button can be created using:
<button type="submit">
Submit
</button>
When clicked, the browser attempts to submit the form.
Another syntax is:
<input type="submit" value="Submit">
Both can submit a form.
Button vs Input Submit
Button:
<button type="submit">
Create Account
</button>
Input:
<input
type="submit"
value="Create Account"
>
<button> is often more flexible because it can contain richer content.
Complete Contact Form Example
Create:
index.html
Then write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form
action="/contact"
method="post"
>
<p>
<label for="name">
Full Name:
</label>
<input
type="text"
id="name"
name="name"
required
>
</p>
<p>
<label for="email">
Email Address:
</label>
<input
type="email"
id="email"
name="email"
required
>
</p>
<p>
<label for="message">
Message:
</label>
</p>
<p>
<textarea
id="message"
name="message"
rows="6"
cols="40"
required
></textarea>
</p>
<button type="submit">
Send Message
</button>
</form>
</body>
</html>
Expected Output
The page will display:
Contact Us
Full Name:
[Input Field]
Email Address:
[Input Field]
Message:
[Large Text Area]
[Send Message Button]
If /contact does not exist on your local project, submitting the form will not successfully process the information.
That is expected at this stage.
The purpose is to understand the HTML structure.
Search Form Example
A search form commonly uses GET.
<form
action="/search"
method="get"
>
<label for="product-search">
Search Products:
</label>
<input
type="search"
id="product-search"
name="q"
placeholder="Search products"
>
<button type="submit">
Search
</button>
</form>
If the user searches:
Gaming Laptop
the resulting URL may resemble:
/search?q=Gaming+Laptop
Login Form Example
<form
action="/login"
method="post"
>
<p>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
>
</p>
<p>
<label for="password">
Password:
</label>
<input
type="password"
id="password"
name="password"
required
>
</p>
<button type="submit">
Login
</button>
</form>
The HTML creates the login interface.
Actual authentication requires server-side code.
Registration Form Example
<form
action="/register"
method="post"
>
<p>
<label for="name">
Full Name:
</label>
<input
type="text"
id="name"
name="name"
required
>
</p>
<p>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
>
</p>
<p>
<label for="password">
Password:
</label>
<input
type="password"
id="password"
name="password"
required
>
</p>
<button type="submit">
Create Account
</button>
</form>
Practical Example: Web Development Project Inquiry
Suppose an IT company wants customers to request a website quotation.
<form
action="/project-inquiry"
method="post"
>
<p>
<label for="client-name">
Your Name:
</label>
<input
type="text"
id="client-name"
name="client_name"
required
>
</p>
<p>
<label for="client-email">
Email:
</label>
<input
type="email"
id="client-email"
name="client_email"
required
>
</p>
<p>
<label for="budget">
Estimated Budget:
</label>
<input
type="number"
id="budget"
name="budget"
>
</p>
<p>
<label for="details">
Project Details:
</label>
</p>
<textarea
id="details"
name="project_details"
rows="8"
cols="50"
required
></textarea>
<p>
<button type="submit">
Request a Quote
</button>
</p>
</form>
Placeholder Attribute
A placeholder provides a temporary hint inside an empty input.
Example:
<input
type="email"
name="email"
placeholder="name@example.com"
>
However:
Placeholder ≠ Label
Prefer:
<label for="email">
Email Address:
</label>
<input
type="email"
id="email"
name="email"
placeholder="name@example.com"
>
Required Attribute
The required attribute indicates that the browser should require a value before ordinary form submission.
Example:
<input
type="text"
name="name"
required
>
Example:
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
>
Browser Validation
Modern browsers provide some built-in form validation.
For example:
<input
type="email"
required
>
can check basic conditions such as:
• Is the field empty?
• Does the value satisfy basic email syntax requirements?
Later you will learn attributes such as:
min
max
minlength
maxlength
pattern
Client-Side vs Server-Side Validation
Client-side validation happens in the browser.
Examples:
required
type="email"
JavaScript validation
Server-side validation happens on the server.
This is essential because browser-side validation can be bypassed.
Remember:
Client-side validation → Better user experience
Server-side validation → Required for trusted processing
Form Security Basics
Never assume that information submitted through a form is trustworthy.
Server-side applications should validate and safely process incoming data.
Important security concepts include:
• Input validation
• Output encoding
• Authentication
• Authorization
• CSRF protection
• Secure database queries
• HTTPS
These topics will be covered later in the course.
HTTPS and Forms
Sensitive forms should use HTTPS.
Examples:
• Login
• Registration
• Payment
• Personal information
• Admin forms
Remember:
POST ≠ Encryption
HTTPS = Protects data in transit
Form Accessibility
A good form should be understandable and usable.
Important practices include:
• Use clear labels
• Connect labels with controls
• Use appropriate input types
• Provide understandable instructions
• Provide useful error messages
• Do not rely only on placeholder text
• Keep logical form order
Good:
<label for="phone">
Phone Number:
</label>
<input
type="tel"
id="phone"
name="phone"
>
Less useful:
<input
type="text"
placeholder="Enter something"
>
Common Beginner Mistakes
1. Missing Labels
Avoid:
<input type="email">
Prefer:
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
>
2. for and id Do Not Match
Wrong:
<label for="email">
Email:
</label>
<input id="user-email">
Correct:
<label for="email">
Email:
</label>
<input id="email">
3. Missing name
If a value needs to be included in normal form submission, it generally needs a name.
Wrong:
<input
type="text"
id="username"
>
Better:
<input
type="text"
id="username"
name="username"
>
4. Using Placeholder Instead of Label
A placeholder can disappear when the user starts typing.
Use a persistent label.
5. Thinking HTML Stores Data
HTML creates the form interface.
It does not automatically save information into a database.
6. Thinking POST Is Secure by Itself
POST does not encrypt communication.
Use HTTPS.
7. Trusting Only Browser Validation
Server-side validation is required for real applications.
8. Duplicate IDs
Avoid:
<input id="name">
<input id="name">
IDs should be unique within a document.
New & Difficult Words
HTML = HyperText Markup Language
Form = Interface used to collect user information
Form Control = Interactive input or selection element
Input = Element used to receive information
Label = Text identifying a form control
Textarea = Multi-line text input
Button = Interactive control
Action = URL that receives submitted form data
Method = HTTP method used when submitting a form
GET = HTTP method commonly used to retrieve information
POST = HTTP method commonly used to submit data
ID = Identifier for an HTML element
Name = Key associated with submitted form data
Placeholder = Temporary hint inside a form control
Required = Attribute requiring a value before normal browser submission
Validation = Checking whether information meets expected rules
Client-Side = Processing occurring in the browser
Server-Side = Processing occurring on the server
Authentication = Verifying identity
Authorization = Determining allowed actions
HTTPS = Hypertext Transfer Protocol Secure
Database = System used to store and manage data
Important Notes
Basic form structure:
<form
action="/submit"
method="post"
>
<label for="name">
Name:
</label>
<input
type="text"
id="name"
name="name"
>
<button type="submit">
Submit
</button>
</form>
Remember:
<form> → Form Container
action → Submission Destination
method → Submission Method
<label> → Control Label
<input> → User Input
id → Element Identifier
name → Submission Key
<button> → Submit or Action Control
Most importantly:
HTML → Creates Form Interface
Browser → Submits Request
Backend → Processes Data
Database → Can Store Data
HTTPS → Protects Data in Transit
Practice Questions
- What is an HTML form?
- What does the
<form>element do? - What is a form control?
- What does
<input>do? - What does
<label>do? - How do you associate a label with an input?
- What is the
idattribute? - What is the
nameattribute? - What is the difference between
idandname? - What does
actionspecify? - What does
methodspecify? - What is GET commonly used for?
- What is POST commonly used for?
- Does POST encrypt data?
- What does
requireddo? - What is a placeholder?
- Can HTML alone process a form?
- Why is server-side validation necessary?
- Why should sensitive forms use HTTPS?
- What happens when a user submits a form?
Assignment
Create a folder named:
class-15
Inside it create:
index.html
Create three different forms.
Form 1 — Search Form
Use:
GET
Fields:
Search Keyword
Form 2 — Contact Form
Use:
POST
Fields:
Full Name
Phone
Message
Form 3 — Registration Form
Use:
POST
Fields:
Full Name
Password
Every form must contain:
<form>
action
method
<label>
<input>
id
name
required
<button>
Then write this flow below the forms in your notes:
User
↓
HTML Form
↓
Browser
↓
HTTP Request
↓
Server
↓
Validation / Processing
↓
Database
↓
Response
↓
Browser
Finally, explain in your own words:
- Why GET is useful for search.
- Why POST is commonly used for registration.
- Why POST alone is not secure.
- Why server-side validation is necessary.
Quiz
- Which element creates an HTML form?
Answer: <form>.
- Which attribute defines where form data is sent?
Answer: action.
- Which attribute defines the HTTP submission method?
Answer: method.
- Which method is commonly used for search forms?
Answer: GET.
- Which method is commonly used for registration forms?
Answer: POST.
- Which element identifies a form control for users?
Answer: <label>.
- Which attribute connects a label to a form control?
Answer: for.
- Which input attribute must match the label’s
forvalue?
Answer: id.
- Which attribute identifies a submitted form value?
Answer: name.
- Does POST automatically encrypt form data?
Answer: No.
- Can HTML alone save form data into a database?
Answer: No.
- Why is server-side validation important?
Answer: Because client-side validation can be bypassed and the server must independently verify untrusted input.
Interview Questions
Q: What is an HTML form?
Answer: An HTML form is a section of a web document containing controls that allow users to enter and submit information.
Q: What is the purpose of the action attribute?
Answer: The action attribute specifies the destination URL that should process submitted form data.
Q: What is the purpose of the method attribute?
Answer: The method attribute determines which HTTP method is used when submitting the form.
Q: What is the difference between GET and POST?
Answer: GET commonly sends form values through the URL query and is typically used for retrieval operations, while POST sends normal form values in the request body and is commonly used for submissions that may change server-side data.
Q: What is the difference between id and name?
Answer: id identifies an element within the document and can associate it with a label. name identifies the control’s value when form data is submitted.
Q: Why should forms use labels?
Answer: Labels clearly identify form controls and improve usability and accessibility.
Q: Does HTML process form data?
Answer: No. HTML creates the form interface. Processing normally requires backend code or another server-side service.
Q: Why must forms be validated on the server?
Answer: Client-side validation can be modified or bypassed, so the server must validate all untrusted submitted information before processing it.
Class Summary
In Class 15, you learned the fundamentals of HTML forms.
You learned:
<form> → Form Container
<label> → Form Label
<input> → Form Input
<textarea> → Multi-Line Input
<button> → Form Button
action → Submission Destination
method → HTTP Submission Method
GET → Commonly Used for Retrieval
POST → Commonly Used for Data Submission
id → HTML Element Identifier
name → Form Submission Key
required → Required Input
You also learned the form processing flow:
User
↓
Form
↓
HTTP Request
↓
Backend
↓
Database
↓
HTTP Response
↓
Browser
Most importantly:
HTML creates the form.
The browser submits the form.
The server processes the information.
A database can store information.
HTTPS protects data during transmission.
Next Class:
Class 16 — HTML Input Types, Labels & Buttons