Header Ads

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



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



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


  1. color
  2. date
  3. datetime
  4. datetime-local
  5. email
  6. month
  7. number
  8. range
  9. search
  10. tel
  11. time
  12. url
  13. 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



يتم التشغيل بواسطة Blogger.