الدرس 13 : أنواع المدخلات في HTML5

أنواع المدخلات في 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

الأحد، 1 أكتوبر 2017