📝 Chapter Roadmap
1 The <form> Wrapper
Think of an HTML form exactly like a physical paper form you fill out at a hospital or a bank. On the web, you use forms to Log In, Sign Up, or send a message.
Form Attributes (The Postman)
The <form> tag is the main box. But it needs instructions on where to send the data and how to send it safely.
-
action=""
The destination URL. It tells the form where to send the data (e.g., to a server file like "login.php").
-
method=""
How to send the data. You can use GET (visible in the URL, good for searches) or POST (hidden and secure, good for passwords).
2 The <input> Types
Inside the form, you use the <input> element to create blank boxes for the user to type in. Input is an empty tag (no closing tag). The most important attribute is type="", which completely changes how the box behaves!
📝 Text Input
For normal, short text like Names or Usernames.
<input type="text">
🔒 Password Input
Hides the characters (shows dots) to keep secrets safe.
<input type="password">
📧 Email Input
Forces the user to include an "@" symbol.
<input type="email">
🚀 Submit Button
The button that actually sends the form data!
<input type="submit">
3 Radio vs Checkbox
type="radio"
Use Radio buttons when the user must pick ONLY ONE option from a list (like answering a multiple-choice question).
type="checkbox"
Use Checkboxes when the user is allowed to pick MULTIPLE options (like choosing pizza toppings).
4 Labels & Placeholders
A form without labels is a guessing game! We use two special features to help the user know exactly what to type.
<input type="submit" value="Login">