شرح أنواع input: color، file، range، hidden، image في HTML
لو إنت بتتعلم HTML وبتكتب نماذج Forms، لازم تكون عارف إن فيه أنواع مختلفة من العناصر اللي ممكن تستخدمها داخل التاج <input>، كل نوع له وظيفة معينة وبيظهر بشكل مختلف للمستخدم.
في المقال ده، هنتكلم عن 5 أنواع مميزة ومهمة جداً:
- type="color"
- type="file"
- type="range"
- type="hidden"
- type="image"
1. type="color"
العنصر ده بيعرض أداة اختيار لون (Color Picker) للمستخدم، وبيتم استخدامه في التطبيقات اللي فيها اختيار ألوان زي تصميمات أو أدوات تعديل واجهات.
مثال:
<label for="favcolor">اختار لونك المفضل:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">شرح:
- value: اللون الافتراضي اللي هيظهر في الأداة.
- id / name: لتحديد العنصر داخل النموذج (form).
2. type="file"
العنصر ده بيتيح للمستخدم يرفع ملفات من جهازه سواء كانت صور، مستندات، أو أي نوع تاني.
مثال بسيط:
<label for="resume">ارفع سيرتك الذاتية:</label>
<input type="file" id="resume" name="resume">مثال بخصائص إضافية:
<input type="file" name="photos" accept="image/*" multiple>شرح:
- accept: لتحديد نوع الملفات المسموح بها (زي الصور).
- multiple: يسمح برفع أكتر من ملف في نفس الوقت.
3. type="range"
ده عنصر سلايدر (Slider) بيستخدم لاختيار قيمة عددية من نطاق محدد، وبيظهر كشريط تمرير.
مثال:
<label for="volume">مستوى الصوت:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">شرح:
- min: أقل قيمة مسموحة.
- max: أكبر قيمة ممكنة.
- value: القيمة الافتراضية اللي هيبدأ عندها السلايدر.
- step: ممكن تضيفها لو عايز تحدد مقدار الزيادة أو النقصان.
4. type="hidden"
العنصر ده مش بيظهر للمستخدم، لكنه بيكون موجود داخل النموذج. بنستخدمه علشان نبعت بيانات معينة للسيرفر من غير ما المستخدم يعرف.
مثال:
<input type="hidden" name="user_id" value="12345">شرح:
- name: اسم المتغير اللي هيتم إرساله مع النموذج.
- value: القيمة اللي هيتم إرسالها.
مثال: لو عندك مستخدم سجل دخولك بالفعل، ممكن تبعت الـ ID بتاعه وانت بتضيف تعليق أو طلب بدون ما يكتبه بنفسه.
5. type="image"
العنصر ده بيحول زر الإرسال إلى صورة، يعني المستخدم يضغط على صورة بدل ما يضغط على زر.
مثال:
<form action="/submit" method="post">
<input type="image" src="submit.png" alt="Submit" width="100" height="40">
</form>شرح:
- src: رابط الصورة اللي هتظهر.
- alt: نص بديل لو الصورة مش ظهرت.
- width / height: أبعاد الصورة.
النوع ده مفيد لو عايز تخلي شكل النموذج متناسق مع تصميم معين، وعايز زر الإرسال يكون جزء من تصميم جرافيكي.
الخلاصة:
العناصر دي بتديك تحكم كبير في شكل ووظيفة النماذج، ولازم تختار النوع المناسب حسب استخدامك:
- color: لاختيار الألوان.
- file: لرفع الملفات.
- range: لاختيار القيم الرقمية.
- hidden: لإرسال بيانات مخفية.
- image: لتحويل زر الإرسال إلى صورة.
بكده تكون فهمت الفكرة واستخدام كل نوع منهم، وده هيساعدك تبني نماذج احترافية في مشاريعك.