📝 Days 6–10 – Forms, Semantics और SEO · दिन 06
दिन 6: Forms 1: Inputs, Labels और Buttons
⏱ 90 min📶 Beginner → Intermediate🎯 100% self-study
दिन 6 / 15
✅ आज आप सीखेंगे
- Form data कैसे भेजता है (action, method)
- Click होने वाले और accessible labels
- name, value, placeholder
- Input types: text, email, tel, number, date, range, color, file
- Radio buttons, checkboxes और buttons
🏢 असली दुनिया में
लंबी phone calls की जगह Sharma Sweets online bulk-order enquiry form चाहता है: नाम, mobile, e-mail, event की तारीख़, quantity, मिठाइयों की पसंद और delivery option। Forms ही हर website का जानकारी इकट्ठा करने का तरीका हैं – Google search से bank login तक।
Form कैसे काम करता है
method="get"
- Data URL में जाता है: ?q=ladoo
- Search और filters के लिए अच्छा
- Bookmark हो सकता है
- Passwords के लिए कभी नहीं
method="post"
- Data request body में जाता है
- Orders, logins, uploads के लिए
- URL में नहीं दिखता
- File upload के लिए ज़रूरी
HTML
<form action="https://www.google.com/search" method="get" target="_blank"> <label for="q">Search recipes on Google:</label> <input type="search" id="q" name="q" value="ghewar recipe"> <button type="submit">Search</button> </form>
Labels, name और value
HTML
<form> <label for="fullname">Full name</label><br> <input type="text" id="fullname" name="fullname" placeholder="e.g. Meena Gupta" autocomplete="name"><br><br> <label>Mobile <input type="tel" name="mobile" placeholder="98290 12345" autocomplete="tel"></label> </form>
⚠️ Placeholder label नहीं है
Placeholder text लिखते ही ग़ायब हो जाता है और अक्सर पढ़ने में बहुत हल्का होता है। हमेशा दिखने वाला <label> लें। name attribute के बिना field की value भेजी ही नहीं जाती!
Input types
HTML
<form> <p><label>E-mail <input type="email" name="email"></label></p> <p><label>Quantity (kg) <input type="number" name="qty" min="1" max="200" step="0.5" value="5"></label></p> <p><label>Event date <input type="date" name="event_date"></label></p> <p><label>Delivery time <input type="time" name="time"></label></p> <p><label>Sweetness level <input type="range" name="sweet" min="1" max="5"></label></p> <p><label>Box colour <input type="color" name="box_colour" value="#e34f26"></label></p> <p><label>Upload design <input type="file" name="design" accept="image/*"></label></p> <p><label>Password <input type="password" name="pw"></label></p> </form>
| type | Phone keyboard / व्यवहार |
|---|---|
| @ key, format जाँचता है | |
| tel | Number pad |
| number | Number pad, min/max/step, spin buttons |
| date / time | Native date और time pickers |
| search | Clear (✕) button, “Search” key |
| url | .com और / keys, format जाँचता है |
| password | Characters छिपाता है |
| hidden | नहीं दिखता – order id जैसा extra data भेजता है |
Radio buttons और checkboxes
HTML
<form> <p>Delivery (choose one):</p> <label><input type="radio" name="delivery" value="pickup" checked> Shop pickup</label> <label><input type="radio" name="delivery" value="home"> Home delivery (+₹100)</label> <p>Sweets (choose any):</p> <label><input type="checkbox" name="sweets" value="kaju"> Kaju katli</label> <label><input type="checkbox" name="sweets" value="ladoo" checked> Ladoo</label> <label><input type="checkbox" name="sweets" value="ghewar"> Ghewar</label> </form>
Buttons
HTML
<form onsubmit="alert('Form submitted! (demo)'); return false;">
<input type="text" name="n" value="Meena">
<button type="submit">Send enquiry</button>
<button type="reset">Clear</button>
<button type="button" onclick="this.textContent='Clicked ✔'">Just a button</button>
</form>💡 Button का type हमेशा दें
Form के अंदर बिना type वाला <button> submit की तरह काम करता है। सिर्फ़ JavaScript चलाने वाले buttons के लिए type="button" लिखें।
असली example: bulk-order enquiry form
HTML
<form action="https://httpbin.org/post" method="post" target="_blank">
<h2>Bulk order enquiry</h2>
<p><label for="n">Your name</label><br><input id="n" name="name" autocomplete="name" required></p>
<p><label for="m">Mobile</label><br><input id="m" type="tel" name="mobile" autocomplete="tel" required></p>
<p><label for="e">E-mail</label><br><input id="e" type="email" name="email" autocomplete="email"></p>
<p><label for="d">Event date</label><br><input id="d" type="date" name="event_date"></p>
<p><label for="q">Quantity (kg)</label><br><input id="q" type="number" name="qty" min="5" value="10"></p>
<p>Delivery:
<label><input type="radio" name="delivery" value="pickup" checked> Pickup</label>
<label><input type="radio" name="delivery" value="home"> Home delivery</label></p>
<input type="hidden" name="source" value="website">
<button type="submit">Send enquiry</button>
</form>🧠 देखें server को क्या मिलता है
httpbin.org/post data वापस दिखाता है, ताकि आप हर name=value जोड़ा देख सकें। PHP course में आप server code लिखेंगे जो enquiry save करके दुकान को e-mail करता है।
🏅 आज के Job Skills
✔ action और method के साथ forms बनाना✔ labels, name और autocomplete सही इस्तेमाल करना✔ हर field के लिए सही input type चुनना✔ Radios, checkboxes और buttons का इस्तेमाल
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: School admission enquiry form बनाएँ: student का नाम, parent mobile, class (radio 9/10/11/12), subjects (checkboxes) और date of birth।
Solution देखें
HTML
<form method="post" action="https://httpbin.org/post" target="_blank">
<p><label>Student name <input name="student" required></label></p>
<p><label>Parent mobile <input type="tel" name="mobile"></label></p>
<p>Class: <label><input type="radio" name="class" value="9"> 9</label> <label><input type="radio" name="class" value="10"> 10</label>
<label><input type="radio" name="class" value="11"> 11</label> <label><input type="radio" name="class" value="12"> 12</label></p>
<p>Subjects: <label><input type="checkbox" name="subjects" value="maths"> Maths</label>
<label><input type="checkbox" name="subjects" value="it"> IT</label></p>
<p><label>Date of birth <input type="date" name="dob"></label></p>
<button type="submit">Submit</button>
</form>Task 2: action="https://www.youtube.com/results" और name="search_query" से YouTube search box (GET form) बनाएँ।
Solution देखें
HTML
<form action="https://www.youtube.com/results" method="get" target="_blank"> <label>Search YouTube <input type="search" name="search_query" value="html tutorial hindi"></label> <button>Go</button> </form>
Task 3: समझाएँ कि बिना name attribute वाला field server को कभी क्यों नहीं जाता।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Login form के लिए कौन सा method?
Password को URL से बाहर रखता है।
2. Radio buttons साथ तब होते हैं जब उनका एक ही…
एक name = एक group।
3. label for="email" किससे जुड़ता है?
for, id से मेल खाता है।
4. Phone पर type="tel" क्या दिखाता है?
Numbers जल्दी लिखे जाते हैं।
5. Form के अंदर बिना type वाला <button>…
Default type submit है।
Interview corner
💼 Interview Corner
GET vs POST?
GET data को URL में जोड़ता है (bookmark, cache, सीमित size) – searches और filters के लिए। POST data body में भेजता है – data बनाने या बदलने, logins और file uploads (enctype="multipart/form-data" के साथ) के लिए।
Labels क्यों ज़रूरी हैं?
ये screen readers के लिए field बताते हैं, click/tap का क्षेत्र बढ़ाते हैं, और placeholders के उलट typing के समय भी दिखते रहते हैं।
सारांश
- form का action + method तय करते हैं data कहाँ और कैसे जाए।
- हर field को name चाहिए; हर field को label मिलना चाहिए।
- Input types सही keyboard और अंदरूनी जाँच देते हैं।
- एक पसंद के लिए radios एक name साझा करते हैं; checkboxes कई; button types दें।
➡️ आगे
Day 7: select menus, textarea और built-in validation – form को गलती-रहित बनाएँ।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या form बिना server के चल सकता है?
भरा और validate हो सकता है, पर data store या e-mail करने के लिए server script (PHP, Node) या Google Forms, Formspree, Netlify Forms जैसी service चाहिए।
Files upload कैसे करें?
method="post", enctype="multipart/form-data" और <input type="file"> लें; upload server संभालेगा।
