HTML Input Types أنواع المدخلات

أنواع عناصر الإدخال (Input Types) في HTML

عنصر <input> في HTML يدعم مجموعة متنوعة من أنواع الإدخال (Input Types)، واللي بتحدد شكل وسلوك الحقل اللي بيظهر للمستخدم.

---

✅ أشهر أنواع <input>:

النوع (type)	الوصف
text	حقل إدخال نصي عادي (سطر واحد)
password	يُستخدم لإدخال كلمات المرور – النص يكون مخفي
email	يتحقق من أن القيمة المدخلة هي بريد إلكتروني صحيح
number	يسمح بإدخال أرقام فقط – يمكن تحديد الحد الأدنى والأقصى
date	يُظهر تقويم لاختيار تاريخ
checkbox	مربع اختيار – يمكن تحديد أكثر من خيار
radio	زر اختيار – يُستخدم لاختيار واحد من عدة خيارات
submit	زر لإرسال النموذج
reset	زر لإعادة تعيين القيم الافتراضية للنموذج
file	يُستخدم لاختيار ورفع ملف من الجهاز
color	يعرض أداة لاختيار لون
tel	يُستخدم لإدخال أرقام هواتف
url	يتحقق من أن القيمة المدخلة هي رابط (URL)
range	شريط تمرير لاختيار قيمة بين حدين
hidden	حقل غير ظاهر للمستخدم – يُستخدم لنقل بيانات مخفية

---

🧪 أمثلة عملية:

<form>

  <input type="text" name="username" placeholder="Enter your name"><br><br>

  <input type="email" name="email" placeholder="Enter your email"><br><br>

  <input type="password" name="password" placeholder="Enter password"><br><br>

  <input type="date" name="birthdate"><br><br>

  <input type="checkbox" name="subscribe"> Subscribe to newsletter<br><br>

  <input type="submit" value="Register">

</form>

---

📌 ملاحظات مهمة:

• نوع input يؤثر في طريقة التفاعل مع الحقل وسلوك التحقق (validation).
• يمكنك الجمع بين الأنواع المختلفة في نموذج واحد.
• بعض الأنواع قد لا تُعرض بنفس الشكل في كل المتصفحات، لكن معظمها مدعوم في الإصدارات الحديثة.