HTML <form> Tag – User Input Forms
📌 Introduction
The <form> tag is used to create an interactive form where users can enter and submit data.
It is used in:
- Login pages
- Registration forms
- Contact forms
- Search bars
- Surveys
🧱 Syntax
<form>
<!-- input elements -->
</form>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>Contact Form</h2>
<form>
<label>Name:</label>
<input type="text" />
<br /><br />
<label>Email:</label>
<input type="email" />
<br /><br />
<button type="submit">Send</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Users can type information
- The form collects data
- The submit button sends the data
🎯 Important Attributes
1. action
<form action="/submit"></form>
✔ Defines where the form sends data
2. method
<form method="POST"></form>
✔ Defines how data is sent:
GET→ visible in URLPOST→ hidden and secure
🧠 Basic Form Structure
A good form usually includes:
<label>→ text description<input>→ user input<button>→ submit
🧩 Example with Structure
<form action="/submit" method="POST">
<label>Name:</label>
<input type="text" />
<br />
<label>Password:</label>
<input type="password" />
<br />
<button type="submit">Login</button>
</form>
🎯 When to Use <form>
Use it for:
- Login systems
- Registration pages
- Contact pages
- Search functionality
- Data submission
⚠️ Important Notes
- Without
<form>, data cannot be submitted properly - Always use labels for accessibility
- Use correct input types
🚫 Common Mistakes
- Missing
actionormethod❌ - No labels ❌
- Wrong input types ❌
- Not grouping inputs in form ❌
🎨 Styling Example
<form style="padding:10px; border:1px solid #ccc;">
<input type="text" placeholder="Enter name" />
</form>
🧪 Mini Exercise
Create a form with:
- Name input
- Email input
- Password input
- Submit button
- Use labels for each input