أنواع المدخلات في HTML5

تحتوي HTML5 على العديد من المدخلات الجديدة الخاصة بالنماذج forms . و التي تسمح بالتحكم التام بحقول المدخلات .


المدخلات الجديدة هي

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

ملاحظة : على الرغم من أنها مدخلات جديدة الا أنها ليست مدعومة من قبل جميع المتصفحات و على كل حال يمكنك استخدامها و اذا كان المتصفح لايدعمها عندها ستظهر بشكل نص عادي و لن تأثر على حقول المدخلات الاخرى .


نوع المدخل : اللون color

يستخدم اللون في حقل المدخلات و الذي يجب أن يحتوي على لون .
مثال : يمكنك اختيار أحد الألوان

اختر لونك المفضل : <input type="color" name="favcolor" />

نوع المدخل : التاريخ Date

يسمح للمستخدم تحديد التاريخ .

مثال

حدد تاريخ الميلاد : <input type="date" name="bday" />

نوع المدخل : التاريخ و الوقت datetime

تسمح datetime للمستخدم باختيار التاريخ و الوقت ( مع الوقت العالمي ) .

مثال

اختر الميلاد التاريخ و الوقت <input type="datetime" name="bdaytime" />

نوع المدخل : التاريخ و الوقت المحلي datetime-local

يستخدم هذا النوع من المدخلات datetime-local للمساح للمستخدم بتحديد التاريخ و الوقت محلياً حسب توقيت بلده .
مثال

اختر الميلاد التاريخ و الوقت  <input type="datetime-local" name="bdaytime" />

نوع المدخل : email

يستخدم المدخل email للحقل الذي يتطلب ادخال بريد الكتروني .
مثال

البريد :  <input type="email" name="usremail" />

ملاحظة : يدرك المتصفح سفاري و iPhone نوع البريد الالكتروني كما يمكنه التنبه بالبريد الغير فعال مثل يجب اضافة اشارة @ او .com للبريد .


نوع المدخل : month

يسمح للمستخدم باختيار الشهر و السنة .
مثال

اختر الميلاد التاريخ و الوقت <input type="month" name="bdaymonth" />

نوع المدخل number

يستخدم المدخل number لإضافة أرقام في حقل الادخال و التي يجب أن تكون قيم عددية حصراً .
مثال
القيمة يجب أن تكون من 1 حتى 5 فقط

<input type="number" name="quantity" min="1" max="5" />

اذا أردت استخدام تقييد حول استخدام الأرقام يمكنك استخدام التالي :

  • max : تحدد القيمة العظمى المسموحة .
  • min : تحدد القيمة الدنيا المسموحة .
  • step : تحدد الرقم الصحيح المدخل .
  • value : تحدد القيمة الافتراضية .

نوع المدخل :  range

يستخدم هذا النوع من المدخلات لادخال عدد معين من القيم . كما يمكن تحديد هذه القيم و تقييدها لعدد الأرقام المقبولة .
مثال

<input type="range" name="points" min="1" max="10" />

اذا أردت استخدام تقييد حول استخدام الأرقام يمكنك استخدام التالي :

  • max : تحدد القيمة العظمى المسموحة .
  • min : تحدد القيمة الدنيا المسموحة .
  • step : تحدد الرقم الصحيح المدخل .
  • value : تحدد القيمة الافتراضية .

نوع المدخل : البحث search

يستخدم الحقل بحث للحقول الخاصة لصنع محرك بحث .
مثال

ابحث في جوجل :  <input type="search" name="googlesearch" />

نوع المدخل :  tel

تعريف حقل معين لادخال رقم هاتف .
مثال

الهاتف :  <input type="tel" name="usrtel" />

نوع المدخل :  time

تسمح للمستخدم بتحديد الوقت .
مثال

اختر الوقت : <input type="time" name="usr_time" />

نوع المدخل :  url

يستخدم النوع url  للمدخلات التي تحتوي على روابط خارجية .
يتم تفعيل قيمة الرابط التشعبي url عند ارسال النموذج .
مثال

اضافة رابط الموقع : <input type="url" name="homepage" />

ملاحظة : يدرك المتصفح سفاري و iPhone نوع الرابط التشعبيurl  كما يمكنه التنبه بالرابط الغير فعال مثل يجب اضافة .com


نوع المدخل :  week

تسمح للمستخدم باختيار الاسبوع .
مثال

اختر الاسبوع <input type="week" name="week_year" />

المتصفحات الداعمة لعناصر المدخلات الجديدة

Opera

Safari

IE

Chrome

Firefox

نوع المدخل

نعم

لا

لا

لا

لا

color

نعم

نعم

لا

نعم

لا

date

نعم

نعم

لا

نعم

لا

datetime

نعم

نعم

لا

نعم

لا

datetime-local

نعم

لا

لا

نعم

نعم

email

نعم

نعم

لا

نعم

لا

month

نعم

نعم

لا

نعم

لا

number

نعم

نعم

لا

نعم

لا

range

لا

نعم

لا

نعم

لا

search

لا

لا

لا

لا

لا

tel

نعم

نعم

لا

نعم

لا

time

لا

لا

لا

نعم

نعم

url

نعم

نعم

لا

نعم

لا

week