تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
تكمن أهمية العنصر <input> في تنوعه وظهوره بأشكال متعدده يمكننا استخدامها للعديد من أنواع البيانات المختلفة، في الغالب، لا يخلو أي نموذج من نوع من أنواع العنصر <input>.
أنواع العنصر <input> متشابه إلى حد كبير مع بعضها البعض، حيث يمكنك استخدام العنصر <input> ذات النوع text لإدخال اي نوع من البيانات.
لكن تذكر قاعدة الـ Semantic Code وهي أن كل عنصر لابد أن يحمل دلالة عن المحتوى الموجود بداخلة إن أمكن ذلك، وهذا ما توفره HTML 5، فعندما تقوم بإدخال بريد إلكتروني بصيغة خاطئة كأن تنسى مثلاً كتابة الرمز @ يقوم المتصفح بشكل إفتراضي بإظهار تنبيه يخبرك بأن البريد الذي أدخلته خاطئ، لذلك بدلاً من استخدام النوع text في ادخال البريد الإلكتروني، استخدم النوع email.
النوع text
يمكنك استخدام العنصر <“input type=”text> لإدخال البيانات التي لا تتعدى سطر واحد(الإسم الأول،الإسم الأخير، العنوان،..).
| 1 2 3 4 5 6 7 8 | <form> الإسم الأول:<br> <input type="text" name="firstname"><br> الإسم الأخير:<br> <input type="text" name="lastname"> </form> |
النوع password
يمكنك استخدام العنصر <“input type=”password> لتعريف حقل كلمة المرور، حيث يقوم المتصفح بإخفاء كلمات المرور بوضع دوائر صغيره أو نجوم بدلاً من الأحروف التي تدخلها.
| 1 2 3 4 5 6 7 8 | <form> إسم المستخدم:<br> <input type="text" name="username"><br> كلمة المرور:<br> <input type="password" name="psw"> </form> |
النوع submit
يقوم العنصر <“input type=”submit> بتعريف زر الإرسال، حيث ترسل البيانات إلى المستضيف (server) كي يتم معالجتها. ويتم تعين الجهة التي سترسل إليها البيانات من الخاصية action الموجودة مع العنصر form كما تم شرحه مسبقاً.
| 1 2 3 4 5 6 7 8 9 | <form> الإسم الأول:<br> <input type="text" name="firstname" value="أحمد"><br> الإسم الأخير<br> <input type="text" name="lastname" value="محمد"><br><br> <input type="submit" value="إرسال"> </form> |
يمكنك تعيين النص الذي سيظهر على زر الإرسال من خلال الخاصية value، وفي حالة حذف الخاصية value من العنصر <“input type=”submit> سيتم إظهار القيمة الإفتراضية وهي Submit.
النوع reset
أحياناً يحتاج الزائر إلى إعادة إدخال البيانات مرة ُثانية أثناء عملية الإدخال. فبدلاً من حذف البيانات من كل حقل منفرداً، يمكنك إضافة زر “إعادة تعين الحقول” للعودة إلى الوضع الإفتراضي لجميع الحقول الموجودة داخل النموذج.
| 1 2 3 4 5 6 7 8 9 10 | <form> الإسم الأول<br> <input type="text" name="firstname" value=""><br> الإسم الأخير: <br> <input type="text" name="lastname" value=""><br><br> <input type="submit" value="إرسال"> <input type="reset" value="إعادة التعيين"> </form> |
لاحظ أنه بعد الضغط على الزر reset سيتم العودة بالحقول إلى الوضع الإفتراضي وليس مسح جميع البيانات الموجودة في الحقول، فمثلاً إذا كان الحقل يحتوي على قيمة إفتراضية، مثل الحقل الأول value=”Mickey” وقمت أنت بتغيرها إلى كلمة أخرى، فسيتم العودة للقيمة الإفتراضية للحقل وهي Mickey.
النوع radio
يقوم العنصر <“input type=”radio> بتعريف أزارار radio، وتسمح لك أزرار radio بإختيار عنصر واحد فقط من عدد من الخيارات.
| 1 2 3 4 5 6 7 8 9 | <form> نوع سيارتك:<br> <input type="radio" name="car" value="volvo" checked> Volvo<br> <input type="radio" name="car" value="saab"> Saab<br> <input type="radio" name="car" value="fiat"> Fiat<br> <input type="radio" name="car" value="audi"> Audi </form> |
لاحظ أن جميع الحقول radio تأخذ نفس الإسم، لانه في النهاية سيتم إرسال قيمة واحده للحقل وهي في المثال السابق car = volvo.
النوع checkbox
يقوم العنصر <“input type=”checkbox> بتعريف عنصر الخيارات من متعدد. أي يمكنك اختيار قيمة واحدة أو أي عدد من القيم للعنصر الواحد، أو عدم أختيار شيئ إذا كان الحقل غير مطلوب.
| 1 2 3 4 5 6 | <form> <input type="checkbox" name="vehicle1" value="Bike"> أمتلك دراجة<br> <input type="checkbox" name="vehicle2" value="Car"> أمتلك سيارة </form> |
النوع button
يمكنك استخدم العنصر <“input type=”button> لتعريف زر قابل للنقر، يقوم بتفيذ بعض الأكواد عند الضغط عليه
| 1 2 3 4 5 | <form> <input type="button" onclick="alert('مرحباً أشرف')" value="إضغط هنا"> </form> |
النوع file
يستخدم النوع file لرفع الملفات من جهاز الحاسب الخاص بالزائر، عند الضغط على الحقل سيقوم بفتح نافذة اختيار الملف من جهازه الخاص.
| 1 2 3 4 5 6 | <form> رفع الصور:<br> <input type="file" name="img" multiple> <input type="submit"> </form> |
أنواع العنصر <input> التي توفرها HTML5
قامت HTML5 بإضافة أنواع جديدة للعنصر <input> يوضحها الجدول التالي أهم هذة الأنواع للإختصار:
| 1 2 3 | <"input type="email" name="email> |
يستخدم للحقول التي يجب أن تحتوي على بريد إلكتروني بصيغة صحيحة(xxx@xxx.xx).
Number
| 1 2 3 | <input type="number" name="points> |
يستخدم للحقول التي يجب أن تحتوي على أرقام فقط. (الأرقام باللغة الإنجليزية فقط)
Telephone
| 1 2 3 | <input type="tel> |
يستخدم للحقول التي يجب أن تحتوي على رقم هاتف بصيغة صحيح.
Color
| 1 2 3 | <input type="color" name="favcolor> |
يستخدم للحقول التي يجب أن تحتوي على كود اللون، يقوم بفتح عجلة الألوان المدعومة في نظام التشغيل لديك لإختيار اللون المناسب.
Date
| 1 2 3 | <input type="date" name="bday> |
يستخدم للحقول التي يجب أن تحتوي على تاريخ. ويقوم بفتح التقويم لإختيار التاريخ المحدد.
Range
| 1 2 3 | <input type="range" name="points" min="0" max="10> |
يستخدم للحقول التي يجب أن تحتوي على قيم عددية ذات حد أدنى وأقصى.
Search
| 1 2 3 | <input type="search" name="googlesearch> |
يظهر مثل النوع الإفتراضي text، ولكنه أفضل في حالة اتباع قاعدة الـ Semantic code
URL
| 1 2 3 | <input type="url" name="homepage> |
يستخدم للحقول التي يجب أن تحتوي على رابط لصفحات الويب.
