HTML, CSS & JavaScript · Chapter 1.6 · Intermediate level

Forms (Instagram Login & Admission Form)

फ़ॉर्म बनाना (लॉगिन और एडमिशन फ़ॉर्म)

Whenever you log in to Instagram, search on Google, or fill an online school form, you are typing inside an HTML <form>! Inside <form>, <input type="text"> creates a normal typing box, <input type="password"> hides secret characters as dots ••••, placeholder="..." shows a light hint inside the empty box, and <button type="submit"> creates the clickable Submit button!

जब भी आप Instagram पर लॉगिन करते हो या ऑनलाइन एडमिशन फ़ॉर्म भरते हो, वह HTML के <form> से बना होता है! इसके अंदर <input type="text"> नाम लिखने का डिब्बा बनाता है, <input type="password"> पासवर्ड को बिंदुओं (••••) में छुपा देता है, placeholder खाली डिब्बे में हल्का इशारा दिखाता है, और <button type="submit"> फ़ॉर्म जमा करने का बटन बनाता है!

Open this chapter in the live classroom HTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<form> ... </form>: Wraps all input boxes and submit button together.; सारे इनपुट डिब्बों और सबमिट बटन को एक फ़ॉर्म में जोड़ता है।
<label> ... </label>: Displays the title/label above an input box.; इनपुट बॉक्स के ऊपर उसका नाम (जैसे 'Student Name:') दिखाता है।
<input type="text">: Single-line text box where users can type names or emails.; नाम या ईमेल टाइप करने वाला बॉक्स।
<input type="password">: Secret password box — masks every letter as •.; सीक्रेट पासवर्ड बॉक्स — टाइप किए अक्षर डॉट्स • दिखते हैं।
placeholder="...": Hint text shown inside the input box before typing.; खाली बॉक्स के अंदर दिखने वाला हल्का संकेत शब्द।
<button type="submit">: Clickable button that submits the form!; क्लिक करने वाला सबमिट बटन!

Ready example

<h3>🔐 Student Portal Login</h3>
<form>
  <label>Student Name:</label><br>
  <input type="text" placeholder="Apna naam likho"><br><br>

  <label>Secret Password:</label><br>
  <input type="password" placeholder="Password daalo"><br><br>

  <button type="submit">Login Now 🚀</button>
</form>

What you will see: Try typing your name & password right inside the preview window and click the button — it works live!

प्रिव्यू विंडो में खुद अपना नाम और पासवर्ड टाइप करके बटन दबाकर देखो — यह सच में काम करेगा!

Line by line

<form> ... </form>: Starts and closes the interactive login form.; लॉगिन फ़ॉर्म की शुरुआत और अंत।
<input type="text" placeholder="Apna naam likho">: Creates a text box with hint text inside.; नाम लिखने का बॉक्स जिसमें हल्का हिंट लिखा है।
<input type="password" placeholder="Password daalo">: Creates a hidden-dots password box.; पासवर्ड छुपाकर लिखने वाला सुरक्षित बॉक्स।
<button type="submit">Login Now 🚀</button>: Submits the form when clicked in the preview!; प्रिव्यू में क्लिक करने पर फ़ॉर्म सबमिट करता है!

Common mistake

✗ Wrong

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

✓ Right

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

Use placeholder="..." to show grey hint text inside an <input> box!

इनपुट बॉक्स के अंदर हल्का हिंट दिखाने के लिए हमेशा placeholder="..." लिखते हैं!

Your task

Build a <form> containing a type="text" input, a type="password" input, and a <button>!

एक <form> बनाओ जिसमें एक type="text" इनपुट, एक type="password" इनपुट, और एक <button> हो!

Start with <form> and end with </form>.
<form> खोलो और अंत में </form> बंद करो।
Add <input type="text"> and <input type="password">.
अंदर <input type="text"> और <input type="password"> जोड़ो।
Add <button type="submit">Login</button>, Run, and test typing in the preview!
<button type="submit">Login</button> लगाकर Run करो और प्रिव्यू में टाइप करके देखो!

Starter code for the task

<form>
  <label>Username:</label><br>
  <input type="text" placeholder="Enter username"><br><br>
  <!-- TODO 1: "Password:" label aur input type="password" wala box banao -->
  <!-- TODO 2: neeche submit button banao: Register 🚀 -->
</form>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

<form> groups the boxes that a user fills in.
<input type="text"> is for text, type="password" hides the characters, placeholder shows a grey hint.
<label> names a box and <button type="submit"> sends the form.

<form> उन डिब्बों को जोड़ता है जिन्हें यूज़र भरता है।
<input type="text"> टेक्स्ट के लिए, type="password" अक्षर छुपाता है, placeholder हल्का hint दिखाता है।
<label> डिब्बे का नाम बताता है और <button type="submit"> फ़ॉर्म भेजता है।

Quick quiz

Which <input> type hides characters as dots •••••• while typing?

कौन-सा <input> टाइप पासवर्ड को •••••• बिंदुओं में छुपा देता है?

type="secret"
type="hidden"
type="password"
type="text"

Show the answer

Answer: C (type="password")

<input type="password"> masks secret characters automatically!

type="password" टाइप किए गए अक्षरों को सुरक्षित रूप से छुपाता है!

Practice problems for this chapter

Rail Ticket Booking Form · Intermediate · Write the code
रेल टिकट बुकिंग फ़ॉर्म

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.