نظرة على أنواع مدخلات نماذج HTML5 التاريخ واللون والمدى

تم العثور على النماذج في كل مكان على مواقع الويب. فيسبوك وتويتر وجوجل - على سبيل المثال لا الحصر - يتطلب منا تسجيل الدخول أو التسجيل في الموقع من خلال نموذج ، في الواقع نحن نستخدم أيضًا نموذجًا للتغريد وتحديث الحالة في المواقع الاجتماعية. بالمختصر, النموذج جزء مهم للغاية لتكون قادرًا على التفاعل مع موقع ويب.

تم تصميم نموذج الويب مع المدخلات ، في الماضي ، لدينا فقط خيار قليل لأنواع المدخلات ؛ مثل نص, كلمه السر, راديو, مربع و خضع. الآن ، يأتي HTML5 مع تحسينات كبيرة ويقدم العديد من أنواع المدخلات الجديدة في المواصفات.

لذلك ، في هذا المنشور سوف نحفر في بعض القطع الجديدة المثيرة للاهتمام من نماذج HTML5 أننا نعتقد أنك يجب أن تجربهم ؛ دعونا التحقق منها.

منتقي التاريخ

أول شيء نود إلقاء نظرة عليه هو منتقي التاريخ. يعد تحديد التاريخ أمرًا شائعًا قد تجده في نموذج التسجيل ، خاصة في بعض المواقع أو التطبيقات مثل حجز الطيران والفنادق.

هناك العديد من مكتبات JavaScript لإنشاء منتقي التاريخ. الآن ، يمكننا أيضًا إنشاء واحدة بطريقة أسهل بكثير من خلال إدخال HTML5 تاريخ, على النحو التالي؛

ال منتقي التاريخ في HTML5 يعمل بشكل أساسي مشابه جدًا لكيفية عمل مكتبات JavaScript ؛ عندما نركز على الحقل ، سيظهر تقويم ، ومن ثم يمكننا التنقل خلال الأشهر والسنوات لتحديد التاريخ.

ومع ذلك ، كل المتصفحات التي تدعم حاليا تاريخ نوع الإدخال ، أي Chrome و Opera و Safari ، يعرض نوع الإدخال هذا بطريقة مختلفة قليلاً مما قد يؤدي إلى حدوث مشكلة عدم تناسق في تجربة المستخدم ، وفيما يلي الشكل.

بعض الاختلافات البارزة التي يمكنك رؤيتها في لمحة من لقطة الشاشة أعلاه ؛ استخدم الأوبرا الاختصار المكون من ثلاثة أحرف باللغة الإنجليزية لاسم الأيام - الأحد ، الاثنين ، الخميس ، وما إلى ذلك ، في حين استخدم Chrome لغتي المحلية ، يعمل Safari - من ناحية أخرى - غريبًا إلى حد ما ، فهو لا يعرض تقويمًا على الاطلاق.

هناك أيضا بعض الجديد إدخال أنواع ل حدد التاريخ أو الوقت بشكل أكثر تحديدًا. شهر, أسبوع, زمن, التاريخ والوقت و التاريخ والوقت المحلي, الذي نحن على يقين من أن الكلمة الرئيسية نفسها مضبوطة تمامًا لتوضيح ما تفعله.

يمكنك عرضهم جميعًا بشكل فعلي من الرابط أدناه ، ولكن تأكد من مشاهدته في Opera 11 والإصدارات الأحدث ، لأنه ، في وقت كتابة هذا التقرير ، هو المتصفح الوحيد الذي يدعم جميع أنواع المدخلات هذه.

• Datepicker التجريبي

لون المنتقى

منتقي الألوان غالبًا ما تكون هناك حاجة في بعض التطبيقات المستندة إلى الويب ، مثل مولد التدرج CSS3 هذا ، ولكن لا يزال مطورو الويب طوال هذا الوقت يعتمدون أيضًا على مكتبة JavaScript ، مثل jsColor ، للقيام بالمهمة. ولكن الآن يمكننا إنشاء منتقي ألوان للمتصفح الأصلي باستخدام HTML5 اللون نوع الإدخال

مرة أخرى ، تجعل المتصفحات ، في هذه الحالة Chrome و Opera ، نوع الإدخال مختلفًا قليلاً ؛

يقوم Opera أولاً بعرض خيار اللون الأساسي عند النقر بالإضافة إلى التنسيق السداسي للون الذي تم اختياره الحالي في قائمة منسدلة ، بينما يقوم Chrome مباشرة بإعداد لوحة الألوان في نافذة جديدة عند النقر فوقها..

وعلاوة على ذلك ، يمكننا أيضا ضبط اللون الافتراضي مع القيمة السمة ، على النحو التالي ؛

بهذه الطريقة ، عندما يتم عرضها في المتصفحات غير المدعومة ، فإن إدخال سوف تتحلل في حقل النص وستكون القيمة الافتراضية مرئية والتي يمكن أن تعطي نوعًا من التلميح للمستخدمين لما يجب إدخاله في الحقل.

عرض قيمة اللون

بدلا من فتح فوتوشوب فقط لنسخ عرافة تنسيق الألوان ، يمكنك في الواقع إنشاء أداة بسيطة على هذا النوع من المدخلات للقيام بالمهمة ، لأن اللون الذي تم إنشاؤه بالفعل في ست عشري سيكون هذا سهلاً حقًا ؛

أولا ، نضيف معرف colorpicker إلى المدخلات ونحن أيضا إضافة فارغة شعبة مع معرف hexcolor بجانبه لاحتواء القيمة.

نحن بحاجة إلى مسج مرتبطة في رئيس من وثيقتنا. ثم نقوم بتخزين قيمة اللون المضافة حديثا شعبة في متغير ، مثل ذلك ؛

 var colour = $ ('# colorpicker'). val ()؛ hexcolor = $ ('# hexcolor')؛ 

الحصول على القيمة الأولية من #colorpicker.

 hexcolor.html (لون)؛ 

... وأخيرًا قم بتغيير القيمة عند تغيير اللون المنتقى أيضًا ؛

 $ ('# colorpicker'). on ('change'، function () hexcolor.html (this.value)؛)؛ 

هذا هو؛ الآن دعونا نراها في العمل.

• Colorpicker التجريبي

نطاق

ال نطاق يتيح لنا نوع الإدخال إضافة شريط تمرير في المتصفح لاختيار الرقم في نطاق يمكننا العثور عليه أيضًا في jQuery UI.

المقتطف أعلاه هو الأساس لتنفيذ نطاق نوع الإدخال. يمكننا أيضًا تغيير اتجاه شريط التمرير إلى عمودي باستخدام CSS ، على النحو التالي ؛

 مدخلات [نوع = المدى] العرض: 20px ؛ الارتفاع: 200 بكسل ؛ - المظهر - المظهر: المنزلق العمودي.  

بالإضافة إلى ذلك ، يمكننا ضبط دقيقة و ماكس مجموعة من الأرقام ، على سبيل المثال ؛

في المقتطف أدناه ، قمنا بتعيين دقيقة إلى الصفر و 225 لأقصى حد. عندما لا يتم تحديدها بشكل صريح ، سيستغرق المتصفح بشكل افتراضي 0 للحد الأدنى ل 100 لأقصى حد.

عرض الرقم

هناك قيد واحد على الرغم من أن الرقم غير مرئي ، لا يمكننا رؤية الرقم / القيمة التي تم إنشاؤها من شريط التمرير في المتصفح. لعرض الرقم الذي نحتاجه لإضافة القليل من جافا سكريبت أو jQuery ، وهنا كيف نفعل ذلك ؛

أولا نضيف فارغة شعبة بجانب المدخلات ، على غرار شعبة بما فيه الكفاية بحيث يبدو وكأنه مربع.

ثم ضع الكود التالي الذي سيفعل نفس الكود أعلاه في pickcolor picker ، باستثناء نحصل الآن على القيمة من شريط التمرير.

 $ (function () var val = $ ('# slider'). val ()؛ output = $ ('# output')؛ output.html (val)؛ $ ('# slider'). change (function ( ) output.html (this.value)؛)؛)؛ 

الآن ، يمكنك أن ترى التجريبي. فقط للتذكير ، شاهد العرض التوضيحي في هذه المتصفحات - Chrome و Opera و Safari ، لأن Firefox و IE لا يدعمان نطاق نوع الإدخال في الوقت الحالي.

• المدى التجريبي

الكلمات الأخيرة

من الواضح أن HTML5 تجعل حياتنا أسهل كثيرًا عن طريق إدخال العديد من أنواع المدخلات الجديدة. ولكن مثل أي ميزات HTML5 أخرى ، فإن الدعم محدود للغاية ، خاصة في المتصفحات القديمة ، لذلك يجب علينا استخدام هذه الميزات الجديدة بحذر ، خاصة أنواع المدخلات الجديدة التي ناقشناها في هذا المنشور ؛ التاريخ واللون والمدى.

ولكن في نهاية المطاف نأمل أن يكون لديك الآن المزيد من التبصر نماذج HTML5. شكرًا لك على قراءة هذا المنشور ، ونأمل أن تستمتع به.

• عرض
• تحميل المصدر

قراءة متعمقة

فيما يلي بعض الروابط المفيدة التي يمكنك من خلالها البحث في نماذج HTML.

• ميزات النموذج الجديد في HTML5 - Opera Dev.
• الحالة الراهنة لنماذج HTML5 - Wufoo
• سمات نموذج HTML5 - w3school.org
• متى يمكنني استخدام نماذج HTML5؟ - CanIUse.com