HTML Forms — Full Explanation (Simple & Clear)
A form in HTML is used to collect user input and send it to a server or process it using
JavaScript.
Forms are used for:
Login page
Signup page
Search box
Feedback form
Payment form
Any type of data collection
✔ Basic Structure of an HTML Form
<form action="[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="fullname">
<input type="submit" value="Submit">
</form>
⭐ 1. Important Form Attributes
✔ action
Where the form data is sent.
<form action="[Link]">
✔ method
How data is sent:
GET → data visible in URL
POST → data hidden
<form method="post">
✔ autocomplete
On/off for suggestions.
<form autocomplete="off">
✔ target
Where to open result:
_self
_blank
<form target="_blank">
⭐ 2. Common Form Controls (input types)
✔ Text fields
<input type="text">
✔ Number
<input type="number">
✔ Email
<input type="email">
✔ Password
<input type="password">
✔ Date
<input type="date">
✔ Checkbox
<input type="checkbox">
✔ Radio buttons
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
✔ File upload
<input type="file">
✔ Submit
<input type="submit" value="Login">
✔ Button
<button type="button">Click</button>
⭐ 3. <select> Dropdown
<select name="branch">
<option value="cse">CSE</option>
<option value="ece">ECE</option>
<option value="civil">Civil</option>
</select>
⭐ 4. <textarea> (Multiple-line input)
<textarea rows="4" cols="30">Enter message...</textarea>
⭐ 5. <label> — Important for usability
Links text to input.
<label for="email">Email:</label>
<input type="email" id="email">
⭐ 6. HTML5 New Input Types (Very important for exam)
email
url
tel
date
datetime-local
time
week
month
range
color
search
⭐ 7. HTML5 Form Attributes
✔ required
Must be filled.
<input type="email" required>
✔ pattern
Validation using regex.
<input type="text" pattern="[A-Za-z]{3,}">
✔ placeholder
Hint text.
<input placeholder="Enter name">
✔ min, max, step
For number/date/range.
⭐ 8. Example Form (Full)
<form action="[Link]" method="post">
<label>Name:</label>
<input type="text" name="name" required>
<label>Email:</label>
<input type="email" name="email" required>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label>Course:</label>
<select name="course">
<option>[Link]</option>
<option>[Link]</option>
</select>
<label>Message:</label>
<textarea name="msg"></textarea>
<input type="submit" value="Send">
</form>
⭐ In one sentence:
Forms are used to collect and submit user input using various input controls like text boxes,
dropdowns, checkboxes, radio buttons, buttons, and more.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="payment-container">
<form id="payment-form">
<h2>Payment Details</h2>
<div class="form-group">
<label for="cc-name">Name on Card</label>
<input type="text" id="cc-name" name="cc-name"
autocomplete="cc-name" required>
</div>
<div class="form-group">
<label for="cc-number">Card Number</label>
<input type="text" id="cc-number" name="cc-number"
autocomplete="cc-number" inputmode="numeric"
pattern="[\d ]{10,30}" placeholder="1234 5678 9012 3456" required>
</div>
<div class="form-row">
<div class="form-group half">
<label for="cc-exp">Expiry Date (MM/YY)</label>
<input type="text" id="cc-exp" name="cc-exp"
autocomplete="cc-exp"