HTML Tags Tutorial for Beginners – Part 5: 

Forms & Input Tags (Complete Guide)

Forms are one of the most useful parts of HTML because they allow websites to collect information from users. Whether it is a login screen, registration page, search bar, contact form, feedback form, or checkout page, HTML forms make interaction possible.

In this beginner-friendly tutorial, you will learn how HTML forms work, understand input types, validation basics, attributes, and real-world examples.

---

Table of Contents

• What Are Forms in HTML?
• Form Tag (form)
• Action Attribute
• Method Attribute
• Input Tag
• Text Input
• Password Input
• Email Input
• Number Input
• Telephone Input
• URL Input
• Search Input
• Date and Time Inputs
• Color and Range Inputs
• Checkbox Input
• Radio Button Input
• File Input
• Hidden Input
• Submit, Reset and Button Inputs
• Label Tag
• Placeholder Attribute
• Required, Readonly & Disabled
• Min & Max
• Autocomplete & Autofocus
• Textarea Tag
• Select, Option & Optgroup
• Datalist Tag
• Fieldset & Legend
• Form Validation Basics
• Mini Projects
• Accessibility Tips
• Best Practices
• Common Beginner Mistakes
• Conclusion
• FAQ

---

What Are Forms in HTML?

Forms collect user information.

Examples include:

• Login forms
• Registration forms
• Search bars
• Contact forms
• Feedback forms
• Payment forms

---

Form Tag (<form>)

The form tag creates a form container.

<form>

</form>

All input elements go inside it.

---

Action Attribute

The action attribute defines where form data goes.

<form action="submit.php">
</form>

---

Method Attribute

The method attribute controls how data is sent.

GET Method

<form method="get">
</form>

Used for searches and visible URLs.

POST Method

<form method="post">
</form>

Used for sensitive or large data.

---

Input Tag (<input>)

The input tag collects user input.

<input type="text">

HTML supports many input types.

---

Text Input

<input
type="text"
placeholder="Enter Name">

Used for names, usernames, and titles.

---

Password Input

<input
type="password"
placeholder="Password">

Characters are hidden for privacy.

---

Email Input

<input
type="email"
placeholder="Email">

Helps validate email format.

---

Number Input

<input
type="number">

Accepts numbers only.

---

Telephone Input

<input
type="tel">

Useful for phone numbers.

---

URL Input

<input
type="url">

Accepts website URLs.

---

Search Input

<input
type="search"
placeholder="Search...">

Used for search boxes.

---

Date and Time Inputs

Date

<input type="date">

Time

<input type="time">

DateTime Local

<input
type="datetime-local">

Month

<input type="month">

Week

<input type="week">

---

Color Input

<input type="color">

Lets users pick colors.

---

Range Input

<input
type="range"
min="0"
max="100">

Useful for sliders.

---

Checkbox Input

<input type="checkbox">

Allows multiple selections.

---

Radio Button Input

<input
type="radio"
name="gender">

Allows one choice in a group.

---

File Input

<input
type="file">

Lets users upload files.

---

Hidden Input

<input
type="hidden"
value="1001">

Stores hidden information.

---

Submit Input

<input
type="submit"
value="Login">

Submits form data.

---

Reset Input

<input
type="reset">

Clears form data.

---

Button Input

<input
type="button"
value="Click">

---

Label Tag (<label>)

Labels describe inputs.

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

Labels improve accessibility.

---

Placeholder Attribute

<input
placeholder="Enter Email">

Displays temporary guidance text.

---

Required Attribute

<input
type="email"
required>

Prevents empty submission.

---

Readonly Attribute

<input
type="text"
readonly>

Users cannot edit value.

---

Disabled Attribute

<input
type="text"
disabled>

Completely disables input.

---

Min & Max

<input
type="number"
min="1"
max="10">

Sets allowed range.

---

Autocomplete & Autofocus

<input
autocomplete="on">

<input
autofocus>

Autocomplete remembers values while autofocus selects input automatically.

---

Textarea Tag (<textarea>)

Textarea accepts multi-line input.

<textarea>
</textarea>

Useful for comments and messages.

---

Select, Option & Optgroup

<select>

<option>India</option>
<option>Japan</option>

</select>

Dropdown menus simplify choices.

Grouped options:

<optgroup label="Asia">
<option>India</option>
</optgroup>

---

Datalist Tag (<datalist>)

Datalist provides suggestions.

<input list="cities">

<datalist id="cities">
<option value="Delhi">
<option value="Mumbai">
</datalist>

---

Fieldset & Legend

Fieldset groups form elements.

<fieldset>

<legend>
Personal Details
</legend>

</fieldset>

---

Form Validation Basics

Validation prevents invalid input.

Example:

<input
type="email"
required>

HTML automatically checks input type.

---

Mini Project: Login Form

<form>

<label>Email</label>

<input
type="email"
required>

<label>Password</label>

<input
type="password"
required>

<input
type="submit"
value="Login">

</form>

---

Mini Project: Registration Form

<form>

<input
type="text"
placeholder="Name">

<input
type="email"
placeholder="Email">

<input
type="password"
placeholder="Password">

<input
type="submit"
value="Register">

</form>

---

Accessibility Tips for Forms

• Always use labels
• Use placeholder carefully
• Add required validation
• Group inputs with fieldset
• Write meaningful button text

---

Best Practices

• Validate input
• Use semantic labels
• Keep forms simple
• Use correct input type
• Test mobile usability
• Write meaningful placeholders

---

Common Beginner Mistakes

• Skipping labels
• Wrong input type
• No validation
• Using placeholder as label
• Messy forms
• Too many fields

---

Conclusion

HTML forms are essential for user interaction. Once you understand form elements and input types, you can create login pages, registration forms, search bars, and many interactive webpage features.

---

Frequently Asked Questions (FAQ)

1. What is the purpose of form tag?

The form tag creates a container for collecting user data.

2. What is the difference between GET and POST?

GET shows data in the URL, while POST sends data more securely.

3. Why use label tag?

Labels improve accessibility and explain form fields.

4. What is textarea used for?

Textarea accepts multi-line text input.

5. Why use required attribute?

It prevents users from submitting empty fields.

6. What is datalist used for?

Datalist provides suggested values for input fields.

7. Should beginners learn forms?

Yes. Forms are essential for interactive websites.