MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 11: Forms in HTML!
Think about what happens when you:
In every one of these cases, you are using an HTML Form!
Until now, the websites we built were one-way streets — visitors could only read your text and look at your photos.
Forms turn your website into a two-way conversation! They allow visitors to type answers, select preferences, upload files, and send information directly to you!
In this lesson, you will master the <form> container and the exciting variety of <input> types!
Imagine you walk into the school administrative office to join Class 10. The clerk hands you a printed paper Admission Form:
An HTML Form works in the exact same way on a computer or mobile screen!
<form> Container Element 📦Every form starts with the <form> tag and ends with </form>:
action: The destination URL where the collected answers should be sent (like handing your filled exam sheet to the principal's desk).method:GET (The Postcard ✉️): Appends all typed data directly to the web address bar (e.g. website.com/search?query=science). Used for search boxes. Never use GET for passwords!POST (The Sealed Envelope 🔒): Hides the data securely inside the digital request body. Always used for passwords, registration details, and payments!<label> Tag 🏷️Never put an input box on your screen without a <label>!
<label> is a Superpower:<label>, tapping the text automatically checks the box!<input> Types 🎛️The <input> tag is a void / self-closing element. By simply changing its type attribute, it transforms into dozens of completely different interactive controls!
Let's explore the most popular ones:
type="text" (Single-Line Text Box)Used for names, cities, and general short text:
type="password" (Secret Hidden Text 🔒)Masks every typed character with black dots (••••••) so nobody peeking over your shoulder can read your secret code:
type="email" (Smart Email Checker ✉️)The browser automatically checks that the student typed a valid email address with an @ and a domain name before allowing submission:
type="number" (Numerical Counter 🔢)Restricts input to numbers only and provides small up/down increment arrows:
type="date" (Interactive Calendar Picker 📅)On computers, it opens a visual dropdown calendar. On Android and iPhones, it pops open the phone's native scrolling wheel!
type="tel" (Phone Number Keypad 📞)When a student taps this field on a smartphone, their phone automatically pops open the numeric dialing keypad instead of the full alphabet keyboard!
type="color" (Visual Color Picker Wheel 🎨)Pops open a complete color slider wheel:
Students often confuse radio buttons and checkboxes. Here is the golden rule:
type="radio") — Only 1 Winner!Think of a multiple-choice exam question: you can only pick one correct answer!
name attribute! This tells the browser they are part of the same team, so selecting one automatically unchecks the others!type="checkbox") — Pick Multiple!Think of your hobbies or pizza toppings: you can love both Cricket AND Coding!
Every form needs a trigger button to send the answers. You can use either of these:
If you forget to give your radio buttons the same name, the browser won't know they are related, and users will be able to check all of them at the same time!
name Attribute on InputsIf an input does not have a name="..." attribute, its value will NOT be sent to the server when the user clicks submit!
method="GET" for PasswordsNever use GET for login forms! A GET request places your password right in the URL address bar in clear text for everyone to see! Always use method="POST".
<form> tag is the outer container used to collect user input.action attribute defines where the data goes; the method (GET or POST) defines how it travels.<label> tag with for="input-id" to make forms accessible and easy to tap on smartphones.<input type="password"> masks confidential characters with dots.<input type="date"> opens a native interactive calendar on all modern devices.type="radio") let users choose only one option (must share the same name).type="checkbox") let users select multiple options.<button type="submit"> triggers form submission.Test your understanding with these multiple-choice questions:
method="POST" instead of method="GET" for password fields?<label> properly linked to an input via for and id?Open VS Code and create a file named school-club-form.html.
Create an "Inter-School Coding Club Membership Form":
<form action="#" method="POST">.<label>.Class 8th, Class 9th, Class 10th, Class 11th, or Class 12th (all sharing name="studentClass").Web Design, Python Programming, Robotics, and AI.Next Up: In Topic 11.2, we will explore Form Controls & Built-in Validations — how to use textareas, dropdowns, and enforce mandatory fields without writing a single line of JavaScript!
In the next lesson, we will continue your web development journey with Form Controls & Validations (Form).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HTML5 Graphics: SVG & Canvas | Form Controls & Validations |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.