تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
من أهم عناصر النماذج في HTML هو العنصر <input> كما ذكرنا من قبل، وتكمن قوته في امكانية ظهوره بأشكال متعدده، هذا جيد.. لكنه ليس كل شيئ..هناك المزيد..
لان العنصر <input> عنصر منغلق ذاتياً self-colsing أي لا يحتوي على وسم إنغلاق <input/> وبالتالي لا يوجد محتوى داخل العنصر، فهنا يأتي دور الخصائص، حيث يمكن للعنصر أن يأخذ ما يحتاجه من معلومات عن طريق الخصائص.
من خلال الخصائص، يمكننا إضافة المزيد من القوة للعنصر <input>،حيث تعمل على جمع البيانات بدقة أكبر بوضع قيود على البيانات التي سيتم إدخالها في الحقل.
الخاصية value
من خلال الخاصية value يمكنك تحديد القيمة الإفتراضية للعنصر <input>:
| 1 2 3 4 5 6 7 | <form> إسم الشركة:<br /> <input type="text" name="companyname" value="TieLabs" /> <input type="submit" value="إرسال" /> </form> |
الخاصية readonly
الخاصية readonly تكتب هكذا بدون قيمة، ومن اسم الخاصية، يكون الحقل للقراءة فقط، أي لا يمكنك تغير القيمة الموجودة في الحقل.
| 1 2 3 4 5 6 | <form> إسم الشركة:<br /> <input type="text" name="companyname" value="TieLabs" readonly/> </form> |
الخاصية disabled
الخاصية disabled تجعل الحقل غير مُفعل، أي غير مستخدم، غير قابل للنقر، ولن يتم إرسال القيمة الموجودة في الحقل عندما تقوم بإرسال البيانات بالنقر على زر إرسال.
| 1 2 3 4 5 6 | <form> إسم الشركة:<br /> <input type="text" name="companyname" value="TieLabs" disabled/> </form> |
وغالباً ما تستخدام الخاصية disabled مع الأزرار <“input type=”submit> ، فيظل زر الإرسال في حالة عدم التفعيل حتى تقوم بملئ جميع الحقول بصورة صحيحة، ثم بعد ذلك يتم إلغاء حالة عدم التفعيل، أي يتم حذف الخاصية disabled بإستخدام الجافاسكريبت.
الخاصية size
تقوم الخاصية size بالتحكم في عرض الحقل، أي كم حرف يمكن أن يظهروا في المساحة المرئية للحقل:
| 1 2 3 4 5 6 | <form action=""> الإسم الأول:<br> <input type="text" name="firstname" value="TieLabs" size="40"> </form> |
الخاصية maxlength
تقوم الخاصية maxlength بوضع حد أقصى لعدد الحروف التي يمكنك إدخالها في الحقل:
| 1 2 3 4 5 6 7 | <form> إسم الشركة:<br /> <input type="text" name="companyname" value="TieLabs" maxlength="15"/> <input type="submit" value="إرسال" /> </form> |
الخاصية maxlength لن تظهر لك أي تنبيه عندما تبلغ الحد الأقصى، فقط ستجد المؤشر لا يتعدى عدد الحروف المحدده، ومن الأفضل هنا إظهار رسالة تنبيه تخبر المستخدم بأنه لن يستطيع تجاوز الحد الأقصى (مثل رسائل تويترـ لن تستطيع تجاوز ٢٨٠ حرف) لذلك نستخدم جافاسكريبت لإظهار هذا التنبيه.
الخاصية required
بإضافة الخاصية required للعنصر <input> لا يمكنك إرسال البيانات داخل النموذج بدون ملئ هذا الحقل، أي أن الحقل مطلوب ولن تستطيع تجاوزه.
| 1 2 3 | Username: <input type="text" name="usrname" required> |
الخاصية multiple
في حالة استخدام العنصر <input type=“file”> الذي يمكنك من رفع الملفات من جهاز الحاسب، يمكنك استخدام الخاصية multiple لتتمكن من تحديد أكثر من ملف مرةً واحدة في هذا الحقل.
| 1 2 3 | Select images: <input type="file" name="img" multiple> |
الخاصية placeholder
من أشهر الخصائص التي تستخدم دئماً مع الحقل input، حيث يمكنك إظهار نص توضيحي في الحقل ليوضح للمستخدم نوع البيانات المطلوبة, وعند بدء الكتابة في الحقل يختفي النص التوضيحي تلقائياً:
| 1 2 3 4 5 6 7 | <form> إسم الشركة:<br /> <input type="text" name="companyname" placeholder="TieLabs"/> <input type="submit" value="إرسال" /> </form> |
