شرح شامل لعناصر الإدخال في HTML وطريقة استخدامها
في هذا الدرس، سنتعرف على مجموعة من عناصر الإدخال (Input Elements) في لغة HTML، والتي تُستخدم في تصميم النماذج (Forms) داخل صفحات الويب. سنستعرض أهم أنواع الحقول وكيفية تخصيص كل عنصر باستخدام الخصائص المختلفة (Attributes) مثل: النوع، النص التوضيحي، القيم الابتدائية، ومتطلبات الإدخال.
أنواع الحقول الأساسية (Input Types)
-
النصوص (Text):
نستخدم النوعtextلإدخال النصوص العامة. يمكن تخصيص هذا الحقل باستخدامplaceholderلعرض نص توضيحي داخل الحقل، وvalueلإدخال قيمة افتراضية. -
الأرقام (Number):
يمكن استخدام النوعnumberلإدخال أرقام فقط. من الخصائص المهمة هنا:-
min: لتحديد الحد الأدنى للقيمة. -
max: لتحديد الحد الأقصى. -
step: لتحديد مقدار الزيادة بين كل قيمة وأخرى.
-
-
كلمة المرور (Password):
نستخدم النوعpasswordلإدخال كلمات السر، حيث يتم إخفاء النصوص أثناء الكتابة. -
الإرسال (Submit) وإعادة التعيين (Reset):
-
submit: زر يستخدم لإرسال البيانات. -
reset: زر لإعادة تعيين البيانات داخل النموذج. -
يمكن تخصيص نص الأزرار باستخدام الخاصية
value.
-
ربط الحقول بتسميات توضيحية (Label)
لتحسين تجربة المستخدم، يُفضّل دائمًا ربط كل حقل إدخال بتسمية (label). يتم ذلك عن طريق:
-
إعطاء الحقل الخاصية
id. -
ثم استخدام الخاصية
forداخل وسمlabelبنفس قيمةid.
بهذه الطريقة، عند الضغط على التسمية، يتم تفعيل الحقل تلقائيًا.
الحقول المطلوبة (Required Fields)
لضمان تعبئة المستخدم للحقول الضرورية، يمكن استخدام الخاصية
required مع أي نوع من أنواع الإدخال. على سبيل
المثال:
<input type="text" required>
في حال محاولة الإرسال دون تعبئة هذا الحقل، سيظهر تنبيه للمستخدم.
إدخال البريد الإلكتروني (Email)
النوع email يُستخدم للتحقق من صحة البريد الإلكتروني
تلقائيًا. وعند إدخال نص غير صالح، يظهر تنبيه للمستخدم بأن التنسيق غير
صحيح.
رقم الهاتف (Tel)
لإدخال أرقام الهواتف، يمكن استخدام النوع tel. ويفضل
أن يتم تخصيصه باستخدام placeholder لتوضيح تنسيق الرقم
المطلوب.
اختيار لون (Color Picker)
النوع color يسمح للمستخدم باختيار لون من واجهة
رسومية. يمكن تخصيصه بتسمية (label) وتحديد قيمة
ابتدائية باستخدام value.
استخدام صورة كزر إرسال
يمكن استخدام النوع image لتحويل صورة إلى زر إرسال.
يتطلب هذا النوع الخاصيتين:
-
src: رابط الصورة. -
alt: نص بديل يظهر عند تعذر عرض الصورة.
مثال:
<input type="image" src="submit.jpg" alt="إرسال">
إرفاق ملفات (File Upload)
يُستخدم النوع file للسماح للمستخدم بإرفاق ملفات من
جهازه. يمكن تخصيصه ليكون مطلوبًا باستخدام
required.
شريط التمرير (Range Slider)
النوع range يُستخدم لإدخال قيمة رقمية عبر شريط
تمرير. ومن خصائصه:
-
min: أقل قيمة. -
max: أعلى قيمة. -
step: مقدار كل نقلة. -
value: القيمة الافتراضية.
حقل البحث (Search Field)
يمكن استخدام النوع search لتوفير حقل مخصص للبحث.
يتشابه مع النوع text لكنه يحتوي على خصائص إضافية مثل
إمكانية مسح النص بسهولة.
إدخال روابط (URL Field)
النوع url يُستخدم للتحقق من صحة الروابط المدخلة.
ويجب أن يكون التنسيق صحيحًا مثل:
https://example.com
الحقل المخفي (Hidden)
النوع hidden يُستخدم لإرسال بيانات لا يراها
المستخدم، مثل معرف المستخدم أو قيمة ثابتة. لا يظهر هذا الحقل في واجهة
المستخدم ولكنه يُرسل عند الضغط على زر الإرسال.
نصائح عند تصميم النماذج
-
احرص على استخدام التسميات التوضيحية لكل حقل لتسهيل الفهم.
-
تأكد من أن جميع الحقول الضرورية تحتوي على خاصية
required. -
استخدم
placeholderلتقديم تعليمات داخلية داخل الحقول. -
راجع التنسيقات والتصميم باستخدام CSS لتحسين المظهر.
الخاتمة
تعلمنا في هذا الدرس كيفية إنشاء عناصر مختلفة داخل النماذج باستخدام HTML، مع تخصيص كل عنصر بشكل يناسب وظيفته. هذه المهارات مهمة لأي مطور ويب يسعى لإنشاء نماذج تفاعلية واحترافية للمستخدمين. سيتم تناول كيفية إرسال هذه البيانات ومعالجتها في دروس لاحقة بإذن الله.