أنواع حقول HTML المتقدمة: date وnumber وcheckbox وradio
تعرف إلى أنواع input المناسبة لاختيار التاريخ والأرقام والخيارات المتعددة والاختيار الأحادي مع أمثلة واضحة.
اختيار نوع الحقل
يؤثر نوع input في لوحة المفاتيح على الأجهزة المحمولة وفي أدوات المتصفح للتحقق والتعامل مع البيانات. اختر النوع الذي يناسب المعنى الفعلي للبيانات، لا المظهر فقط.
التاريخ والأرقام
<label for="start-date">تاريخ البداية</label>
<input id="start-date" name="start-date" type="date" required>
<label for="seats">عدد المقاعد</label>
<input id="seats" name="seats" type="number" min="1" max="12" step="1">قد يختلف شكل منتقي التاريخ بين المتصفحات والأنظمة. لا تستخدم number للرموز أو أرقام الهاتف التي لا تُجرى عليها عمليات حسابية.
checkbox وradio
<fieldset>
<legend>طرق التواصل المفضلة</legend>
<label><input type="checkbox" name="contact" value="email"> البريد الإلكتروني</label>
<label><input type="checkbox" name="contact" value="phone"> الهاتف</label>
</fieldset>
<fieldset>
<legend>نوع الحساب</legend>
<label><input type="radio" name="account" value="personal" required> شخصي</label>
<label><input type="radio" name="account" value="business"> أعمال</label>
</fieldset>يسمح checkbox باختيار عدة قيم، أما radio فيستخدم الاسم نفسه للمجموعة كي يكون الاختيار واحدًا. يضيف fieldset وlegend سياقًا واضحًا للمجموعة.
قواعد التحقق
تساعد خصائص مثل min وmax وstep وrequired على التحقق في المتصفح، لكنها لا تغني عن التحقق على الخادم. اختبر الحالات الحدية ورسائل الخطأ بلوحة المفاتيح وعلى أحجام شاشة مختلفة.
مراجع موثوقة
تابع سلسلة HTML
تابع الدروس السابقة: ما هي HTML؟، بنية مستند HTML، العناوين والفقرات والروابط، القوائم والصور، وأساسيات النماذج.
اختيار نوع الحقل حسب المهمة
ابدأ من نوع البيانات التي يحتاجها المستخدم، لا من شكل الحقل فقط. استخدم email للبريد وnumber للكمية العددية وdate للتاريخ عندما يكون ذلك مناسبًا. أما أرقام الهاتف والرموز البريدية والمعرّفات التي قد تحتوي أصفارًا في البداية، فغالبًا ما تكون text أنسب من number لأنها ليست كميات للحساب.
<label for="quantity">الكمية</label>
<input id="quantity" name="quantity" type="number" min="1" step="1" required>
<label for="delivery-date">تاريخ التسليم</label>
<input id="delivery-date" name="deliveryDate" type="date" required>اختبار الحقول
- اختبر إدخال قيمة صحيحة وأخرى غير صحيحة وحدود min وmax.
- تحقق من وضوح التسمية والتعليمات على الهاتف ولوحة المفاتيح.
- لا تعتمد على التحقق في المتصفح وحده؛ أعد التحقق من البيانات في الخادم.
اختيار الحقل المناسب حسب البيانات
اختر نوع الحقل وفق معنى البيانات لا مظهره. يناسب type="number" القيم التي تدخل في عمليات حسابية، مع min وmax وstep عند الحاجة. أما رقم الهاتف أو الرمز البريدي الذي قد يبدأ بصفر فغالبًا يناسبه حقل نصي أو tel لأن قيمته ليست كمية حسابية.
<label for="quantity">الكمية</label>
<input id="quantity" name="quantity" type="number" min="1" max="20" step="1" required>
<fieldset>
<legend>طريقة التواصل</legend>
<label><input type="radio" name="contact" value="email" required> البريد</label>
<label><input type="radio" name="contact" value="phone"> الهاتف</label>
</fieldset>عناصر radio التي تمثل اختيارًا واحدًا تشترك في name، بينما تسمح checkbox بتحديد أكثر من خيار. امنح كل خيار value واضحًا واجمع الخيارات المترابطة داخل fieldset مع legend.
اختبارات قبل الاعتماد
- جرّب الحدود الدنيا والعليا والقيم غير الصالحة.
- تأكد من وجود
nameوقيمة واضحة لكل خيار. - اختبر الحقول بلوحة المفاتيح وعلى شاشة هاتف.
- تحقق من القيم مجددًا على الخادم؛ تحقق المتصفح قابل للتجاوز.
اختيار نوع input المناسب: حالات استخدام واختبارات
اختيار نوع الحقل ليس مجرد تفصيل شكلي؛ فهو يؤثر في لوحة المفاتيح التي تظهر على الهاتف، والتحقق المبدئي من القيمة، وتجربة الأشخاص الذين يستخدمون تقنيات مساعدة. ابدأ من نوع البيانات التي تحتاجها فعلًا، ثم اختبر الحقل في المتصفحات والأجهزة التي يستخدمها جمهورك.
| نوع الحقل | متى يناسب؟ | ملاحظات تطبيقية |
|---|---|---|
date | تاريخ واضح مثل موعد الحجز | لا تفترض أن شكل منتقي التاريخ متطابق في كل متصفح |
number | قيمة رقمية ذات حد أدنى أو أقصى | استخدم min وmax وstep عند الحاجة |
checkbox | اختيار مستقل أو عدة خيارات | اجعل كل خيار يحمل تسمية مفهومة |
radio | اختيار واحد من مجموعة | اجمع الخيارات المتصلة دلاليًا في fieldset |
مثال عملي: التحقق ليس بديلًا عن شرح المطلوب
إذا كان الحقل يتطلب عددًا بين 1 و12، يمكن استخدام min="1" وmax="12" وrequired، لكن ينبغي أن يوضح النص بجانب الحقل الوحدة والمعنى: هل الرقم عدد أشخاص أم شهور أم منتجات؟ لا تعتمد على placeholder وحده لأنه يختفي عند الكتابة ولا يقوم دائمًا مقام التسمية.
قائمة اختبار قبل نشر النموذج
- جرّب إدخال قيمة صحيحة، وقيمة أقل من الحد، وأعلى منه، وترك الحقل فارغًا.
- اختبر التنقل بلوحة المفاتيح وتأكد من ظهور التركيز بوضوح.
- تأكد أن رسائل الخطأ تشرح طريقة الإصلاح ولا تعتمد على اللون وحده.
- تحقق من القيم على الخادم أيضًا؛ إذ يمكن تجاوز التحقق في المتصفح.
للتفاصيل المعيارية راجع مرجع عنصر input في MDN ودليل WAI للنماذج سهلة الوصول. اختر أبسط عنصر أصلي يعبّر عن البيانات، ولا تضف JavaScript مخصصًا إذا كانت عناصر HTML المدمجة تحقق الغرض بصورة موثوقة.
حالات اختبار متقدمة لأنواع حقول HTML
لا تختبر النموذج بإدخال صحيح واحد فقط. لكل نوع حقل حالات طرفية قد تؤثر في تجربة المستخدم وفي البيانات التي يستقبلها التطبيق. بالنسبة إلى number، جرّب الحدود والقيم العشرية والقيمة الفارغة، وتحقق من أن وحدة القياس واضحة. وبالنسبة إلى date، اختبر إدخال تاريخ سابق أو لاحق للمدى المسموح، مع مراعاة أن واجهة اختيار التاريخ تختلف بين المتصفحات.
الاختيارات المستقلة والمجموعات
يُستخدم checkbox عادةً عندما يمكن اختيار أكثر من خيار أو تفعيل تفضيل مستقل، بينما يناسب radio مجموعة تتطلب اختيار قيمة واحدة. اجمع الخيارات المتصلة في fieldset مع legend يشرح السؤال العام. لا تجعل أسماء الخيارات متشابهة لدرجة يصعب تمييزها، وتأكد أن كل label ترتبط بالعنصر الصحيح.
القيم التي تصل إلى الخادم
قد لا يرسل checkbox غير المحدد قيمة مثل الحقل المحدد؛ لذلك يجب أن يميز الخادم بين عدم وجود الحقل وقيمة صريحة. لا تعتمد على قيمة افتراضية ضمنية دون توثيقها، ولا تفترض أن المتصفح أرسل القيمة المتوقعة لمجرد أن الواجهة أظهرت اختيارًا. تحقق من الصلاحيات والقيم على الخادم دائمًا.
اختبار واقعي قبل النشر
- جرّب كل حقل باستخدام الماوس ولوحة المفاتيح.
- تأكد من أن التركيز المرئي لا يختفي عند التنقل بين الخيارات.
- اختبر حجم النص على الهاتف وعند التكبير.
- أرسل بيانات صحيحة وخاطئة مباشرة إلى الخادم في بيئة اختبار.
- تحقق أن رسائل الخطأ تصف المشكلة وتوضح الخطوة التالية.
هذه الاختبارات تساعد على اكتشاف الفرق بين التحقق الشكلي وصحة البيانات الفعلية. استخدم مرجع input وإرشادات WAI لتجميع الحقول عندما تتوسع النماذج.
اختيار أنواع الحقول والتحقق من القيم عمليًا
يساعد اختيار نوع input الصحيح المتصفح على عرض لوحة مفاتيح مناسبة على الهاتف، لكنه لا يغني عن التحقق من البيانات في الخادم. استخدم email للبريد وurl للرابط وnumber للقيم الرقمية عندما يناسب ذلك طبيعة البيانات، لكن لا تفترض أن قبول المتصفح للقيمة يعني أنها صحيحة أو آمنة. يمكن تجاوز تحقق العميل، لذلك يجب على الخادم تطبيق قواعده الخاصة.
اجعل القيود مفهومة للمستخدم
استخدم required وmin وmax وstep عندما تصف القاعدة الحقيقية للحقل، ولا تضف قيودًا شكلية تمنع قيمًا مشروعة. إذا استخدمت pattern، اشرح صيغة الإدخال المتوقعة بلغة واضحة، وتأكد من أن النمط يقبل التنسيقات التي يدعمها المنتج. لا تجعل رسالة الخطأ الوحيدة لونًا أحمر أو أيقونة؛ اربطها بالحقل وقدّم نصًا يشرح كيفية التصحيح.
التعامل مع التاريخ والوقت والأرقام
قد تختلف طريقة عرض التاريخ والوقت بحسب المتصفح واللغة والمنطقة الزمنية. إذا كانت القيمة مرتبطة بموعد عالمي، فحدد كيف تُحوّل وتُخزّن، ولا تعتمد على النص المرئي وحده. وفي حقول المال، لا تستخدم أرقامًا عائمة دون سياسة واضحة للدقة والتقريب. اختبر الحدود الدنيا والعليا، والقيم السالبة أو الفارغة، والنسخ واللصق، والإدخال على لوحة مفاتيح الهاتف.
لا تنسَ الوصولية
امنح كل حقل تسمية مرتبطة به بواسطة label، واجعل تعليمات التنسيق قابلة للاكتشاف قبل الإرسال. عند فشل التحقق، انقل التركيز إلى أول حقل غير صالح أو قدّم ملخص أخطاء واضحًا، ولا تمسح القيم الصحيحة بلا سبب. اختبر النموذج باستخدام لوحة المفاتيح وقارئ شاشة، ثم تحقق من سلوك الإرسال عند الضغط على Enter.
راجع مرجع MDN لأنواع input وإرشادات WAI للتحقق من النماذج قبل اعتماد قواعد معقدة.
حالات طرفية ينبغي اختبارها في الحقول المتقدمة
تختلف تجربة الحقول بحسب المتصفح ونظام التشغيل وطريقة الإدخال. قد يستخدم الزائر لوحة مفاتيح فعلية أو لوحة لمس أو ميزة إملاء صوتي، وقد يلصق قيمة بدل كتابتها. لذلك اختبر الحقول مع المسح والتعديل وإعادة الإدخال، وتأكد من أن التحقق لا يمنع تصحيح القيمة بعد ظهور الخطأ. لا تستخدم أحداثًا مثل keypress وحدها لفرض تنسيق، لأنها لا تغطي جميع طرق الإدخال.
انتبه إلى الأرقام المحلية
في الواجهات متعددة اللغات، قد يختلف شكل الأرقام والفواصل العشرية وتنسيق التاريخ. حدد صيغة التخزين بوضوح، وافصلها عن طريقة العرض، ولا تفترض أن النص المرئي يطابق القيمة الداخلية. إذا كان الحقل يتطلب رمزًا أو رقمًا ذا أصفار بادئة، فقد يكون النص أنسب من number حتى لا تضيع هذه الأصفار أو تُجرى عمليات حسابية غير مقصودة.
لا تجعل التحقق حاجزًا غير مفهوم
عندما ترفض قيمة، اشرح السبب بلغة واضحة وقدم مثالًا صالحًا إذا كان ذلك يساعد. اختبر أن رسالة الخطأ لا تختفي قبل أن يستطيع المستخدم قراءتها، وأنها لا تغطي الحقل أو تخرج عن الشاشة. وأخيرًا، طبق القواعد نفسها في الخادم، لأن التحقق داخل المتصفح هدفه تحسين تجربة الاستخدام وليس فرض الثقة أو حماية البيانات بمفرده.
الخلاصة
الخلاصة: اختر نوع input بحسب طبيعة البيانات، ووضح الوحدة والتسمية وحدود القيمة، ثم اختبر حالات صحيحة وخاطئة على المتصفح والخادم. عناصر HTML الأصلية بداية جيدة لكنها لا تغني عن التحقق الآمن.