Theory
चुप Portfolio
आपने अपने coding skills दिखाती एक शानदार online portfolio बनाई है। एक recruiter आपकी site पर आता है, आपके projects पसंद करता है, और आपको hire करना चाहता है। पर एक बड़ी समस्या है: आपका page एकतरफ़ा रास्ता है। वे केवल आपका text पढ़ सकते हैं, पर वे आपसे बात नहीं कर सकते। उनके पास अपना नाम type करने, अपना email छोड़ने, या एक message छोड़ने का कोई तरीक़ा नहीं। हम एक निष्क्रिय पढ़ने वाले webpage को एक interactive portal में कैसे बदलें जो user data इकट्ठा करता है?
Theory
Bank Deposit Slip
एक bank में एक physical deposit slip के बारे में सोचिए। इसमें आपके account number, नाम, और cash amount के लिए designated rectangular boxes हैं। इसमें यह भी निर्देश है कि इसे कहाँ submit करना है। अगर आप अपना नाम cash box में लिखते हैं, teller इसे अस्वीकार करता है। एक HTML form बिल्कुल इस paper slip की तरह काम करता है। यह ख़ास data types के लिए समर्पित ख़ाली slots देता है और पक्का करता है कि इकट्ठा किए सारे details एक server को सौंपे जाने से पहले ठीक से bundle हों।
Theory
एक HTML Form की Anatomy
web development में, एक HTML form एक document का section है जिसमें user data इकट्ठा करने के लिए interactive controls हैं। यह wrapper <form> tag इस्तेमाल करके परिभाषित होता है। यह दो अहम attributes पर निर्भर करता है: action, जो destination URL निर्दिष्ट करता है जहाँ data भेजा जाता है, और method, जो data transfer करने के लिए इस्तेमाल HTTP protocol (आमतौर पर GET या POST) परिभाषित करता है। इस wrapper के अंदर, हम text, selections, या button clicks पकड़ने के लिए विभिन्न input elements रखते हैं।
At a glance
ज़रूरी HTML form components और control elements।
| Input Element or Type | Primary Attribute | Purpose |
|---|---|---|
| <input type="text"> | name="username" | regular alphanumeric input के लिए एक single line text box बनाता है। |
| <input type="email"> | required | emails पकड़ता है और अपने-आप formatting standard सत्यापित करता है। |
| <textarea> | rows="4" | लंबे feedback messages के लिए उपयुक्त एक multiline text area देता है। |
| <input type="submit"> | value="Send" | form submission process trigger करता है और action URL को data भेजता है। |
Practical
एक Validated Portfolio Contact Form
<form action="submit_contact.php" method="POST">
<label>Your Full Name:</label>
<input type="text" name="fullName" placeholder="Enter name" required>
<label>Email Address:</label>
<input type="email" name="userEmail" placeholder="name@email.com" required>
<label>Your Message:</label>
<textarea name="userMessage" rows="4" placeholder="Write your message here"></textarea>
<input type="submit" value="Send Message">
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
आप एक college assignment के लिए एक contact form बना रहे हैं। जब आप submit button click करते हैं, page refresh होता है पर text inputs से कोई data server script को नहीं भेजा जाता। आप शायद क्या शामिल करना भूल गए?
- input tags के अंदर placeholder attribute
- हर input tag के अंदर name attribute
- textarea tag के अंदर text type attribute
- label tags के अंदर value attribute
Show the answer
हर input tag के अंदर name attribute
server अपने ख़ास name attribute इस्तेमाल करके data fields पहचानता है। एक name="username" attribute बिना, browser type किए characters इकट्ठा करता है पर transmission के दौरान उन्हें कौन सा label जोड़ना है यह नहीं जानता, input data को पूरी तरह नज़रअंदाज़ करते हुए।
Think first
Validation Behavior का अनुमान
मन में evaluate कीजिए क्या होता है अगर एक user type="email" के रूप में परिभाषित एक input field में बस 'hello' type करने की कोशिश करता है और submit click करता है। tap करने से पहले सोचिए।
Show the answer
browser submission process तुरंत रोक देगा। type="email" में built-in native validation rule के कारण, यह एक '@' symbol और एक valid domain format की उम्मीद करता है। यह form को submit होने देने से पहले user को formatting ठीक करने का निर्देश देता एक built-in pop up warning दिखाएगा।
Watch out
Ghost Submission का जाल
university practical evaluations में विफल होने वाली एक बड़ी error name attributes बिना inputs बनाना, या id और name को मिलाना है। Students अक्सर सोचते हैं id काफ़ी है क्योंकि यह CSS के ज़रिए element style करता है। याद रखिए: id client side styles और scripts के लिए है, पर name server side data collection के लिए अनिवार्य है। name बिना एक input एक ghost control है: यह screen पर बिल्कुल सही दिखता है पर बिल्कुल कुछ नहीं भेजता!
Formula
Exam Answer Recipe: Form Architecture
जब एक theory exam में एक validated form code करने को कहा जाए, अपने response को इन चार components से structure कीजिए:
- Container: explicit
actionऔरmethod="POST"attributes के साथ<form>wrapper परिभाषित कीजिए। - Identity: हर एक user control element के लिए एक unique
nameattribute दीजिए। - Validation: संबंधित input tags से सीधे
requiredयाtype="email"जैसे constraints जोड़िए। - Trigger: submission process करने के लिए एक explicit
<input type="submit">control के साथ form ख़त्म कीजिए।
Summary
Key takeaways
<form>tag को destination के लिए एक action attribute और transmission के लिए एक method attribute चाहिए।- Input elements अपने structural behaviors बदलने के लिए text या email जैसे ख़ास type attributes इस्तेमाल करते हैं।
- backend server द्वारा data सफलतापूर्वक पकड़े जाने के लिए name attribute बिल्कुल अनिवार्य है।
- required और placeholder जैसे attributes तुरंत browser validation और सहायक user hints देते हैं।
- Memory Hook: action set up करो, हर control का नाम रखो, validation जोड़ो, और submit आपका लक्ष्य है।