أنشئ نماذج كاملة وسهلة الوصول وجاهزة للإنتاج.
افتح هذا الدرس في 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: سمة for في الوسم label تشير إلى 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 (لا يفعل شيئًا بذاته - اربطه بجافاسكريبت). تمرين ذهني: في نموذج مقال مدونة، تضيف زر "معاينة" يجب ألا يرسل البيانات. أي نوع تعطيه له؟ الجواب: 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>