<label>: تسمية حقل الإدخال • ربطه بالحقل يتم بصفة for تساوي id الحقل • الضغط على التسمية يُركّز الحقل (UX رائع) • إلزامي للوصولية — قارئات الشاشة تقرأه • يمكن وضع الـ input بداخله مباشرةً (ربط ضمني)
<textarea>: منطقة نص متعددة الأسطر • ليس عنصراً فارغاً — له وسم ختامي • rows: عدد الصفوف المرئية • cols: عدد الأعمدة المرئية • resize: يمكن تحديد اتجاه التمدد بـ CSS • يقبل نفس صفات input (required, minlength, maxlength, placeholder) • القيمة الافتراضية تُكتب بين الوسمين (لا في value)
| 1 | <!-- label بالربط الصريح (الأفضل) --> |
| 2 | <label for="username">اسم المستخدم</label> |
| 3 | <input type="text" id="username" name="username"> |
| 4 | |
| 5 | <!-- label بالربط الضمني --> |
| 6 | <label> |
| 7 | البريد الإلكتروني |
| 8 | <input type="email" name="email"> |
| 9 | </label> |
| 10 | |
| 11 | <!-- textarea أساسي --> |
| 12 | <label for="message">رسالتك</label> |
| 13 | <textarea |
| 14 | id="message" |
| 15 | name="message" |
| 16 | rows="5" |
| 17 | cols="50" |
| 18 | placeholder="اكتب رسالتك هنا..." |
| 19 | minlength="20" |
| 20 | maxlength="1000" |
| 21 | required |
| 22 | ></textarea> |
| 23 | |
| 24 | <p>المتبقي: <output id="char-count">1000</output> حرف</p> |
مثال 1: نموذج تواصل
| 1 | <form action="/contact" method="POST"> |
| 2 | <div class="form-group"> |
| 3 | <label for="contact-name">الاسم الكامل *</label> |
| 4 | <input |
| 5 | type="text" |
| 6 | id="contact-name" |
| 7 | name="name" |
| 8 | placeholder="أحمد محمد" |
| 9 | required |
| 10 | autocomplete="name" |
| 11 | > |
| 12 | </div> |
| 13 | |
| 14 | <div class="form-group"> |
| 15 | <label for="contact-email">البريد الإلكتروني *</label> |
| 16 | <input |
| 17 | type="email" |
| 18 | id="contact-email" |
| 19 | name="email" |
| 20 | placeholder="ahmed@example.com" |
| 21 | required |
| 22 | autocomplete="email" |
| 23 | > |
| 24 | </div> |
| 25 | |
| 26 | <div class="form-group"> |
| 27 | <label for="subject">الموضوع</label> |
| 28 | <input type="text" id="subject" name="subject" placeholder="موضوع رسالتك"> |
| 29 | </div> |
| 30 | |
| 31 | <div class="form-group"> |
| 32 | <label for="contact-message">الرسالة *</label> |
| 33 | <textarea |
| 34 | id="contact-message" |
| 35 | name="message" |
| 36 | rows="6" |
| 37 | placeholder="اكتب رسالتك التفصيلية هنا..." |
| 38 | minlength="10" |
| 39 | maxlength="2000" |
| 40 | required |
| 41 | style="resize: vertical;" |
| 42 | ></textarea> |
| 43 | </div> |
| 44 | |
| 45 | <button type="submit">إرسال الرسالة</button> |
| 46 | </form> |