أنواع مدخلات HTML5: أين هم الآن؟
نشرت: 2022-03-10 كانت إحدى الميزات الرئيسية البارزة في HTML5 للعديد من المصممين والمطورين هي إضافة عدد من الأنواع الجديدة من مدخلات النموذج التي يمكن استخدامها. لسنوات ، كنا مقيدًا باستخدام مدخلات نصية أحادية السطر ( type="text" ) ووضع تعليمات JavaScript والمستخدم لمحاولة التقاط بيانات صحيحة بدقة من أنواع مختلفة من خلال هذا الحقل غير المتطور.
جلبت HTML5 معها قيمًا جديدة لسمة type التي مكنتنا من أن نكون أكثر تحديدًا بشأن أنواع البيانات التي نحتاجها لالتقاطها من خلال الحقل ، مع الوعد بأن المتصفح سيوفر بعد ذلك الواجهة والتحقق المطلوب لإكراه المستخدم في استكمال المجال بدقة.
من عناوين URL إلى رسائل البريد الإلكتروني ، ومن حقول البحث إلى التواريخ ، كان الأمل هو أنه بدلاً من الحاجة إلى كتابة JavaScript مرهقة لمحاولة التحقق من صحة هذه الحقول ، يمكننا ترك الأمر للمتصفح للقيام بهذا العمل الشاق لنا. علاوة على ذلك ، من خلال إضافة ما يعرفه عن سياق المستخدم (نوع الجهاز ، ونوع التفاعل ، والمناطق الزمنية ، وما إلى ذلك) ، سيكون المتصفح قادرًا على القيام بعمل أفضل بكثير في تصميم الواجهة لتلبية احتياجات المستخدم التي كنا نتمتع بها على الإطلاق. يمكن كمؤلفي الصفحة.
يوصى بقراءة : UX و HTML5: دعنا نساعد المستخدمين على ملء نموذج هاتفك المحمول
يعد وجود عناصر جديدة في المواصفات شيئًا واحدًا ، لكنه لا يعني كثيرًا ما لم تكن المتصفحات التي يستخدمها جمهورنا تدعم هذه الميزات. تتمتع هذه القيم الجديدة لسمة type بميزة كبيرة تتمثل في الرجوع إلى type="text" إذا لم يكن المتصفح يدعم ، ولكن قد يكون هذا أيضًا على حساب إزالة ضرورات صانعي المتصفحات عندما يتعلق الأمر بتنفيذ تلك الجديدة أنواع في منتجاتهم.
إنها بداية عام 2019 ، وكان HTML5 هو الإصدار الحالي من HTML الآن لأكثر من أربع سنوات. أي من هذه الأنواع الجديدة تم تنفيذه ، وما الذي يمكننا استخدامه ، وهل هناك أي نوع يجب تجنبه؟
- البحث في الحقول
- حقول رقم الهاتف
- حقول URL
- حقول البريد الإلكتروني
- عدد الحقول
- نطاق الحقول
- حقول اللون
- حقول التاريخ
1. حقول البحث
الغرض من إدخال type="search" هو استخدامه لحقول البحث. من الناحية الوظيفية ، هذه هي نفسها حقول النص الأساسية ، ولكن وجود نوع مخصص يمكّن المتصفح من تطبيق أنماط مختلفة. يكون هذا مفيدًا بشكل خاص إذا كان نظام التشغيل الخاص بالمستخدم لديه نمط محدد لحقول البحث ، حيث يتيح ذلك للمتصفح تصميم حقول البحث على صفحات الويب لمطابقتها.
تنص المواصفات على أن الاختلاف بين search text أسلوبي بحت ، لذلك قد يكون من الأفضل تجنب ذلك إذا كنت تنوي إعادة تصميم الحقل باستخدام CSS على أي حال. يبدو أنه لا توجد ميزة دلالية لاستخدامها.
توصية
استخدم type="search" إذا كنت تنوي ترك نمط حقل البحث للمتصفح.
2. حقول رقم الهاتف
يتم استخدام إدخال type="tel" لإدخال أرقام الهواتف. هذه مثل أسماء المستخدمين الفريدة التي يستخدمها Whatsapp. إذا لم تكن متأكدًا ، فاسأل أجدادك.
على الصعيد الدولي ، تتخذ أرقام الهواتف العديد من التنسيقات المختلفة ، لأسباب فنية وأسباب متعلقة بالترجمة. نتيجة لذلك ، لا يحاول إدخال tel التحقق من صحة تنسيق رقم الهاتف. يمكنك الاستفادة من أدوات التحقق المرتبطة مثل سمة pattern على العلامة ، أو طريقة setCustomValidity() JavaScript لفرض تنسيق إذا لزم الأمر.
على متصفحات سطح المكتب ، يبدو أن استخدام حقول الهاتف له تأثير ضئيل. ومع ذلك ، يمكن أن تكون مفيدة حقًا على الأجهزة المزودة بلوحات مفاتيح افتراضية. على سبيل المثال ، في نظام iOS ، يؤدي تركيز الإدخال على حقل الهاتف إلى إظهار لوحة مفاتيح رقمية جاهزة لإدخال رقم. بالإضافة إلى ذلك ، تعمل آليات الإكمال التلقائي للجهاز وتقترح أرقام هواتف يمكن تعبئتها تلقائيًا بنقرة واحدة.
توصية
استخدم type="tel" لأي حقول لرقم هاتف. إنه مفيد جدًا عند تنفيذه ، ولا يأتي بدون تكلفة عندما لا يكون كذلك.
3. حقول URL
يمكن استخدام الحقل type="url" لالتقاط عناوين URL. يمكنك استخدام هذا عند مطالبة المستخدم بإدخال عنوان موقع الويب الخاص به في دليل الأعمال ، على سبيل المثال. الشيء المثير للفضول حول حقل عنوان URL هو أنه لا يأخذ سوى عناوين URL الكاملة والمطلقة . لا يوجد خيار لتتمكن من التقاط اسم مجال فقط ، أو مجرد مسار ، على سبيل المثال. هذا يقيد فائدته في بعض النواحي ، كما أتخيل أن CMS ومطوري تطبيقات الويب قد وجدوا الكثير من الاستخدامات للحقل الذي يقبل المسارات النسبية ويتحقق منها.
بينما سيكون هذا عنوان URL مطلقًا صالحًا:
https://twitter.com/drewmكلاهما لن يجتاز التحقق من صحة الحقل:
smashingmagazine.com /2019/01/css-multiple-column-layout-multicol/ يبدو الأمر وكأنه فرصة ضائعة حيث لا يمكن تحديد أجزاء مختلفة من عنوان URL ، ولكن هذا ما لدينا. يعد دعم المتصفح رائعًا في جميع المجالات ، حيث توفر أجهزة لوحة المفاتيح الافتراضية بعض التخصيص لإدخال عنوان URL. يقوم iOS بتخصيص لوحة المفاتيح الخاصة به باستخدام ملفات . و / وزر الإكمال التلقائي لنطاقات TLDs الشائعة مثل .com وللإعدادات المحلية الخاصة بي ، .co.uk هذا مثال جيد على قدرة المتصفح على تقديم خيارات أكثر ذكاءً مما يمكننا كمطوري ويب.
توصية
استخدم type="url" متى احتجت إلى جمع عنوان URL كامل ومطلق. يعد دعم المتصفح رائعًا ، ولكن تذكر أنه ليس جيدًا لمكونات عناوين URL الفردية.
4. حقول البريد الإلكتروني
من المحتمل أن يكون أحد الخيارات الجديدة الأكثر استخدامًا هو type="email" لعناوين البريد الإلكتروني. مثلما رأينا مع أرقام الهواتف وعناوين URL ، فإن الأجهزة المزودة بلوحات مفاتيح افتراضية تخصص المفاتيح (لتضمين أشياء مثل @ أزرار) وتمكين الملء التلقائي من قاعدة بيانات جهات الاتصال الخاصة بهم.
تستفيد متصفحات سطح المكتب من هذا أيضًا ، حيث يتيح Safari على macOS أيضًا إمكانية الملء التلقائي لحقول البريد الإلكتروني ، بناءً على البيانات الموجودة في تطبيق جهات اتصال النظام.
غالبًا ما تبدو عناوين البريد الإلكتروني وكأنها تتبع تنسيقًا بسيطًا للغاية ، لكن الاختلافات تجعلها في الواقع معقدة للغاية. يمكن أن تؤدي محاولة ساذجة للتحقق من صحة عناوين البريد الإلكتروني إلى تصنيف عنوان جيد تمامًا على أنه غير صالح ، لذلك من الرائع أن تكون قادرًا على الاعتماد على طرق التحقق الأكثر تعقيدًا واختبارها جيدًا في المتصفح للتحقق من التنسيق.
بشكل مفيد ، يمكن إضافة السمة multiple إلى حقول البريد الإلكتروني لتجميع قائمة بعناوين البريد الإلكتروني. في هذه الحالة ، يتم التحقق من صحة كل عنوان بريد إلكتروني في القائمة بشكل فردي.
<input type="email" multiple> توصية
استخدم type="email" لحقول عنوان البريد الإلكتروني كلما أمكن ذلك.
5. عدد الحقول
تم تصميم حقل type="number" للقيم الرقمية ، وله بعض السمات المفيدة جدًا جنبًا إلى جنب مع شكل min و max و step . يجب أن تكون القيمة الصالحة للحقل الرقمي عبارة عن رقم فاصلة عائمة بين أي قيمة دنيا وأقصى قيمة محددة بواسطة min و max .
إذا تم تعيين step ، فإن القيمة الصالحة قابلة للقسمة على قيمة الخطوة.
<input type="number" min="10" max="30" step="5"> سيكون الإدخال الصالح للحقل أعلاه هو 10 و 15 و 20 و 25 و 30 ، مع رفض أي قيمة أخرى.
دعم المستعرض واسع ، مرة أخرى مع لوحات المفاتيح الافتراضية غالبًا ما تتخلف عن وضع الإدخال الرقمي لإدخال القيم.
تضيف بعض متصفحات سطح المكتب (بما في ذلك Chrome و Firefox و Safari ، ولكن ليس Edge) أزرار تبديل لدفع القيم لأعلى ولأسفل بقيمة step ، أو إذا لم يتم تحديد خطوة ، تظهر الخطوة الافتراضية على أنها 1 في كل تنفيذ.
توصية
استخدم type="number" لأي أرقام فاصلة عائمة ، حيث إنها مدعومة على نطاق واسع ويمكن أن تساعد في منع الإدخال غير المقصود.
6. نطاق الحقول
أقل وضوحًا في الاستخدام أن بعض الأنواع الأخرى ، يمكن اعتبار type="range" بديلاً type="number" حيث لا يهتم المستخدم بالقيمة الدقيقة.
تأخذ حقول النطاق ، وغالبًا ما تستخدم ، نفس سمات min و max و step مثل حقول الأرقام ، وتعرض المتصفحات بشكل عام تقريبًا هذا على شكل شريط تمرير رسومي. لا يتمكن المستخدم بالضرورة من رؤية القيمة الدقيقة التي يضبطها.
قد تكون حقول النطاق مفيدة لتلك الأنواع من الأسئلة في نماذج مثل "ما مدى احتمالية أن توصي صديقًا بهذا؟" مع "محتمل" في أحد طرفيه و "غير محتمل" في الطرف الآخر. يمكن للمستخدم تحريك شريط التمرير إلى أي مكان يعتقد أنه يمثل رأيه ، وتحت الغطاء الذي يتم تقديمه كقيمة عددية يمكنك تخزينها ومعالجتها.
دعم المتصفح جيد ، على الرغم من اختلاف المظهر بين التطبيقات.
توصية
قد تكون استخدامات type="range" مناسبة قليلاً ، لكن الدعم جيد ويوفر شريط التمرير طريقة إدخال سهلة الاستخدام عند الاقتضاء.
7. حقول اللون
حقل type="color" هو تصميم لالتقاط ألوان RGB بتدوين سداسي عشري ، مثل #aabbcc . تسمي مواصفات HTML هذا "التحكم الجيد في اللون" ، بهدف أن يوفر المستعرض منتقي ألوان سهل الاستخدام من نوع ما.
توفر بعض المتصفحات ذلك ، ولا سيما Chrome و Firefox ، حيث يوفر كلاهما الوصول إلى منتقي ألوان النظام من خلال حامل ألوان صغير.
لا يوفر IE ولا Safari أي دعم هنا ، مما يترك للمستخدم اكتشاف أنه من المفترض أن يدخل رقمًا سداسيًا مكونًا من 7 أرقام بمفرده.
قد تجد حقول الألوان مفيدة في التخصيص وفي استخدام نظام إدارة المحتوى ، ولكن ما لم يكن المستخدمون تقنيًا بدرجة كافية للتعامل مع رموز الألوان السداسية ، فقد يكون من الأفضل عدم الاعتماد على المتصفح الذي يوفر واجهة مستخدم لطيفة لهذه.
توصية
ما لم تكن تعلم أن المستخدمين سيكونون سعداء بالعودة إلى إدخال رموز الألوان السداسية العشرية ، فمن الأفضل عدم الاعتماد على المتصفحات التي تدعم type="color" .
8. حقول التاريخ
قدم HTML5 عددًا من قيم type المختلفة لإنشاء مدخلات للتواريخ والأوقات. وشملت هذه date time والتاريخ datetime-local month week .
للوهلة الأولى ، يبدو أنها مرسلة من السماء ، لأن جمع التواريخ في نموذج يعد تجربة صعبة لكل من المطور والمستخدم ، وهي مطلوبة بشكل متكرر.
الوعد هنا هو أن أنواع الحقول الجديدة تمكن المتصفح من توفير واجهة مستخدم موحدة ويمكن الوصول إليها ومتسقة لالتقاط التواريخ والأوقات من المستخدم بسهولة. هذا مهم حقًا ، نظرًا لأن تنسيقات التاريخ والوقت تختلف في جميع أنحاء العالم بناءً على كل من اللغة والإعدادات المحلية ، وبالتالي فإن واجهة متصفح سهلة الاستخدام تترجم تحديدًا سهل الاستخدام للتاريخ إلى تنسيق تاريخ تقني لا لبس فيه تبدو حقًا الحل المثالي .
على هذا النحو ، فإن الإدخال الصالح للحقل type="date" هو قيمة واضحة للسنة والشهر واليوم مثل 2019-01-16 . مثل هؤلاء المطورين ، لأنهم يرسمون إلى حد كبير تنسيق التاريخ ISO 8601 ، والذي يستخدم في معظم السياقات الفنية. لسوء الحظ ، يستخدم عدد قليل من الأشخاص العاديين تنسيق التاريخ هذا ومن غير المحتمل أن يصلوا إليه عندما يُطلب منهم تقديم تاريخ في حقل نصي واحد فارغ.
وبالطبع ، فإن حقل النص الفارغ الوحيد هو ما يتم تقديمه للمستخدم إذا كان متصفحه لا يوفر واجهة مستخدم لاختيار التواريخ. في هذه الحالات ، يصبح من الصعب جدًا على المستخدم إدخال قيمة تاريخ صالحة ما لم يكن على دراية بالتنسيق المطلوب أو تم التعليق على الإدخال بتعليمات واضحة.
ومع ذلك ، توفر العديد من المتصفحات واجهة مستخدم جيدة لاختيار التواريخ. يحتوي Firefox على منتقي تاريخ ممتاز حقًا ، ويحتوي Chrome و Edge أيضًا على واجهات جيدة جدًا. ومع ذلك ، لا يوجد دعم في IE القديم الفقير ولا يوجد أي دعم في Safari ، مما قد يمثل مشكلة.
توصية
بالرغم من أنه ملائم حيث يعمل ، فإن وضع الفشل من type="date" وأنواع التاريخ والوقت المرتبطة به رديئة للغاية. هذا يجعله خيارًا محفوفًا بالمخاطر قد يترك المستخدمين يكافحون من أجل تلبية معايير التحقق من الصحة.
خاتمة
لقد تغير الكثير في مشهد المتصفح في السنوات الأربع منذ أن أصبحت مواصفات HTML5 توصية. يعد دعم الأنواع الأحدث من المدخلات قويًا إلى حد ما - لا سيما في الأجهزة المحمولة التي تحتوي على لوحات مفاتيح افتراضية مثل الأجهزة اللوحية والهواتف. في معظم الحالات ، تكون هذه المدخلات آمنة للاستخدام وتوفر بعض الفوائد الإضافية للمستخدم.
هناك بعض الاستثناءات البارزة ، وأسوأها حقلا التاريخ والوقت ، والتي لا تفتقر إلى الأداة المساعدة فحسب ، بل تحتوي أيضًا على دعم متصفحات غير مكتمل. عندما لا يتوفر الدعم ، يكون الوضع الاحتياطي لهذه الحقول ضعيفًا. في هذه الحالات ، قد يكون من الأفضل الالتزام بالحلول المستندة إلى JavaScript لتحسين type="text" .
إذا كنت ترغب في قراءة المزيد ، فإنني أوصي تمامًا باستخدام مستندات الويب MDN على أنواع الحقول هذه ، وكذلك مواصفات W3C دائمًا.