पूर्ण, सुलभ और प्रोडक्शन के लिए तैयार फ़ॉर्म बनाएं।
इस पाठ को Kodokon में खोलेंफ़ॉर्म वेब पर लगभग हर इंटरैक्शन का प्रवेशद्वार है: साइन-अप, सर्च, चेकआउट, संपर्क। आप पहले से जानते हैं कि एक पेज कैसे संरचित होता है; अब समय है व्यावहारिक होने का। सबसे पहले सुनहरे नियम को याद कर लें: हर फ़ील्ड में एक name एट्रिब्यूट होता है, क्योंकि यही वह चीज़ है जो सर्वर पर भेजी जाती है, न कि id।
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Sign up</button>
</form>label / input जोड़ी को देखें: label का for एट्रिब्यूट फ़ील्ड के id की ओर इशारा करता है। यह लिंक स्क्रीन रीडर के लिए अनिवार्य है। साथ ही type="email" पर ध्यान दें: ब्राउज़र मुफ़्त में फ़ॉर्मैट की जांच करता है और मोबाइल पर सही कीबोर्ड दिखाता है। अन्य टाइप रोज़ काम आते हैं: number, date, password, checkbox, radio।
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">-- Choose a country --</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select>
<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>आख़िरी खिलाड़ी: button। यह तीन टाइप स्वीकार करता है: submit (फ़ॉर्म भेजता है), reset (फ़ील्ड साफ़ करता है) और button (अपने आप कुछ नहीं करता - इसे JavaScript से जोड़ें)। मानसिक अभ्यास: एक ब्लॉग पोस्ट फ़ॉर्म में, आप एक "Preview" बटन जोड़ते हैं जिसे डेटा नहीं भेजना चाहिए। आप इसे कौन-सा टाइप देंगे? उत्तर: type="button"।
<form action="/contact" method="post">
<label for="topic">Subject</label>
<select id="topic" name="topic">
<option value="support">Technical support</option>
<option value="billing">Billing</option>
</select>
<button type="submit">Send</button>
<button type="button" id="preview-btn">
Preview
</button>
</form>