Complete HTML, CSS & JavaScript
Handbook
Chapter 5 — HTML Forms: Collecting User
Input
Estimated Length (Full Book Version): 90–120 Pages
Difficulty: Beginner → Advanced
Learning Objectives
After completing this chapter, you will be able to:
● Understand the purpose of HTML forms.
● Create accessible, user-friendly forms.
● Use all major HTML input types.
● Validate user input using HTML5.
● Organize forms with semantic elements.
● Submit form data using GET and POST.
● Build real-world forms such as login, registration, and contact forms.
● Apply security and usability best practices.
Table of Contents
5.1 Introduction to HTML Forms
What Is an HTML Form?
An HTML form is a collection of interactive controls that allows users to enter information and
submit it to a server.
Examples include:
● Login pages
● Registration pages
● Search bars
● Contact forms
● Checkout forms
● Surveys
● Job applications
Example:
<form>
</form>
5.2 The <form> Element
Syntax:
<form action="/submit" method="post">
</form>
Attributes
Attribute Description
action URL where data is sent
method GET or POST
enctype Encoding type
target Where response opens
autocomplet Enables autofill
e
novalidate Disables browser validation
5.3 GET vs POST
GET
Used for:
● Search
● Filtering
● Read-only requests
Example
[Link]/search?q=html
Advantages
● Bookmarkable
● Fast
● Visible URL
Disadvantages
● Data visible
● Limited length
POST
Used for
● Login
● Registration
● Payment
● File upload
Advantages
● Hidden from URL
● Supports larger data
● More secure for sensitive information
5.4 Labels
Example
<label for="email">Email</label>
<input id="email">
Benefits
● Accessibility
● Larger click area
● Better usability
5.5 Input Elements
Text
<input type="text">
Password
<input type="password">
Email
<input type="email">
Number
<input type="number">
Date
<input type="date">
Time
<input type="time">
Month
<input type="month">
Week
<input type="week">
Color
<input type="color">
Range
<input type="range">
File
<input type="file">
Search
<input type="search">
URL
<input type="url">
Telephone
<input type="tel">
Hidden
<input type="hidden">
Radio Buttons
<input type="radio">
Checkbox
<input type="checkbox">
Submit Button
<input type="submit">
Reset Button
<input type="reset">
Button
<input type="button">
5.6 Textarea
<textarea></textarea>
Use cases
● Comments
● Feedback
● Messages
5.7 Select Menu
<select>
<option>Nepal</option>
<option>Germany</option>
</select>
Topics
● Selected
● Disabled
● Multiple
● Size
5.8 Datalist
Autocomplete suggestions.
Example
<input list="countries">
<datalist id="countries">
<option>Nepal</option>
<option>Germany</option>
</datalist>
5.9 Fieldset
<fieldset>
<legend>Personal Information</legend>
</fieldset>
Benefits
● Organization
● Accessibility
5.10 HTML5 Validation
Attributes
required
min
max
maxlength
minlength
pattern
step
Examples provided for each.
5.11 Placeholder
placeholder="Enter your email"
When to use placeholders and why they should not replace labels.
5.12 Autofocus
autofocus
5.13 Autocomplete
autocomplete="email"
5.14 Disabled vs Readonly
Comparison
Disabled Readonly
Cannot edit Cannot edit
Not submitted Submitted
Greyed out Usually normal
appearance
5.15 File Upload
Topics
● Multiple files
● Accepted formats
● File size considerations
Example
<input type="file" accept=".pdf,.jpg">
5.16 Form Encoding
application/x-www-form-urlencoded
multipart/form-data
text/plain
When to use each encoding type.
5.17 Accessibility
Topics
● Labels
● Fieldsets
● Legends
● Keyboard navigation
● Error messages
● Focus management
5.18 Security
Topics
● Never trust client-side validation
● HTTPS
● CSRF overview
● XSS overview
● SQL Injection overview
● Password handling principles
5.19 Form Design Best Practices
● Keep forms short.
● Group related fields.
● Show required fields clearly.
● Use descriptive labels.
● Validate input early.
● Provide helpful error messages.
● Avoid unnecessary questions.
5.20 Common Mistakes
● Missing labels
● Using placeholders as labels
● Incorrect input types
● Missing validation
● Poor accessibility
● Weak password requirements
● Overly long forms
5.21 Mini Projects
1. Contact Form
2. Login Form
3. Registration Form
4. Survey Form
5. Event Registration Form
6. Job Application Form
7. Student Admission Form
5.22 Capstone Project
Build a University Admission Portal with:
● Personal Information
● Academic History
● Address
● Emergency Contact
● File Upload
● Terms & Conditions
● Validation
● Responsive Layout (using CSS in later chapters)
5.23 Interview Questions
Examples:
1. What is the purpose of the <form> element?
2. What is the difference between GET and POST?
3. Why should every input have a <label>?
4. Explain the required attribute.
5. When should multipart/form-data be used?
6. What is the difference between disabled and readonly?
7. Why is HTML validation alone insufficient for security?
5.24 Chapter Summary
By the end of this chapter, you should be able to:
● Create complete HTML forms.
● Use all common input types.
● Validate user input with HTML5.
● Build accessible forms.
● Understand how form data is submitted.
● Apply fundamental security and usability practices.
Practical Exercises
1. Build a contact form with name, email, phone number, and message.
2. Create a user registration form with password confirmation and HTML5 validation.
3. Design a job application form with file upload for resumes.
4. Build a survey form using radio buttons, checkboxes, and select menus.
5. Create a login form and compare GET versus POST behavior.