More

[ دورة HTML5 ] الدرس الثالث عشر – أنواع المدخلات

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

تحتوي 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 : تحدد القيمة الافتراضية .
You may also like  هكر كروس فاير , Fap Cf Pack , افضل هكر كروس فاير , بتاريخ , 12 / 5 /2015

نوع المدخل :  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
You may also like  لعبة Fire Boy And Water Girl
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker