البحث في الموقع

تعرّفنا في الدّرس السّابق على جداول التّقطيع Hash وكيفيّة التعامل معها والدوال الخاصّة بها. سنتعرّف في هذا الدّرس على نوع آخر من المجموعات Collections وهو المجالات Ranges. تعدّ المجالات شكلًا آخر من المصفوفات Arrays التي تحدّثنا عنها في الدّرس الخامس إلا أنّها متسلسلة على نحوٍ محدّد وأسهل بكثير من حيث الإنشاء عن المصفوفات. أمثلة على المجالات، الأعداد من 0 لـ 9، الأيّام من السبت إلى الجمعة وغيرها من الأمثلة التي تقدّم مجالات محدّدة ومتسلسلة. إنشاء مجال سنتعرّف الآن على كيفيّة إنشاء المجالات في سطر أوامر روبي التفاعليّ. يمكن استخدام المجال لتمثيل متسلسلة من القيم بترتيب معيّن. ربّما تكون قد لاحظت استخدامنا للمجالات في دروس سابقة مثلما فعلنا عند البحث عن مصفوفة جزئيّة Subset من مصفوفة أخرى في درس المصفوفات. أوّلاً إحدى طرق إنشاء مجال هي نفس الطريقة التي استخدمناها لإنشاء مصفوفات وجداول التّقطيع من قبل عن طريق استخدام دالّة new. numbers = Range.new(1, 10) انتبه إلى أنّ دالّة new في حالة المجالات يجب أن تستقبل معطيات تمثّل بداية ونهاية المجال ولا يمكن إنشاء مجال فارغ مثلما كان ممكنًا إنشاء مصفوفات أو جداول تجزئة فارغة. جرّب كتابة الأمر السّابق مع عدم إعطاء روبي بداية ونهاية المجال، ماذا حدث؟ طبعت روبي رسالة خطأ Error تخبرك بأنّ عدد المعطيات خاطئة حيث أنّك زوّدت الدّالّة بلا شيء رغم انتظارها لمعطيين أو ثلاثة. المعطى الثالث exclude_end وهو لإخبار روبي هل عليها تضمين نهاية المجال بالمجال أم لا. إذا لم نعطي روبي ذلك المعطى الثّالث أو كانت قيمته false فستقوم روبي بتضمين النهاية بالمجال، أمّا في حالة غير ذلك فسيتمّ عدم تضمين النهاية. يمكنك إنشاء مجال عن طريقة الفصل بين بداية المجال ونهايتها باستخدام نقطتين كالتّالي: numbers = 1..10 سيقوم الأمر السّابق بإنشاء مجال من كلّ الأرقام الموجودة بين 1 و 10 مشتملة على 1 و 10 أيضًا وتعيينها إلى المتغيّر numbers. على الجانب الآخر فإنّه إذا استخدمنا ثلاث نقاط بدلاً من اثنتين ستقوم روبي بإنشاء مجال من العناصر من 1 إلى 9 مع تجاهل 10. 1...10 إذا فنستخدم النقطتان إذا أردنا أن يشتمل المجال على نقطة النّهاية وثلاث نقاط إذا لم نرده ذلك. يسمّى النّوع الأوّل Inclusive والثّاني Exclusive. يمكننا أيضًا إنشاء مجال محدّد من الأحرف. فمثلاً يمكننا إنشاء مجال للأبجديّة الإنجليزيّة مكوّن من الأحرف الصغيرة Lower Case ثمّ تعيينها إلى المتغيّر alphabet عن طريق كتابة الشيفرة البرمجيّة أدناه: alpahabet = "a".."z" إذًا لدينا المتغيّر alphabet والذين قمنا بتعيين المجال إليه. ومجالنا المحدّد هنا هو الأحرف من a إلى z مع تضمين z في المجال. الوصول إلى قيم بالمجال لاحظ كيف قامت روبي في كلّ مرّة بإرجاع المجال بالشّكل التي أُنشئت عليه دون طباعة عناصر المجال. هذا هو أحد الأمور المثيرة للاهتمام حول المجالات، فمتى أردت إظهار المجال حتّى ولو باستخدام الأمر puts فلن تحصل على شيء غير الهيئة التي أنشأت المجال عليها. قد تتساءل ولكن ماذا لو أردت استخدام عناصر المجال؟ للأسف لا يمكنك الوصول إلى العناصر أو القيم الموجودة في المجال مثلما كان بإمكانك مع المصفوفات والتجزئات. فمثلاً إذا أردت معرفة ما هو الحرف الموجود في الموقع الثّاني من المجال وكتبت [alphabet[2 مثلما كنت تفعل مع المصفوفة ستقوم روبي بإرجاع رسالة خط إليك. لأنّ هذه الدّالّة ليست دالّة للوصول إلى قيم مفردة في المجال. ولكن لحسن الحظ فهناك دالّة تسمّى to_a والتي تعني To Array. يمكن لهذه الدّالّة تحويل المجال الخاصّ بنا إلى مصفوفة ومن ثمّ يمكننا الوصول إلى العناصر بسهولة. alphabet_array = alphabet.to_a إذًا الآن لدينا المتغيّر alphabet_array والذي سيحتوي على المصفوفة الجديدة الناتجة عن تحويل المجال alphabet إلى مصفوفة باستخدام دالّة to_a. لاحظ كيف قامت روبي بإرجاع مصفوفة تحتوي على جميع الأحرف من a إلى z على هيئة عناصر من نوع سلسلة String. الآن يمكنك استخدام جميع الدوال الخاصّة بالمصفوفات والتي من بينها الوصول إلى العناصر. alphabet_array[2] ستقوم روبي بعد تنفيذ هذا الأمر بإرجاع "c". هذا لأنّه كما ذكرنا سابقًا أنّ المصفوفات تقوم بالعدّ بدءًا من 0 وليس 1. إذًا فباستخدامنا 2 فإنّنا قد قمنا بالبحث عن العنصر الثالث في المصفوفة. لمعرفة إذا كان المجال يحتوي على قيمة معيّنة أو لا يمكننا استخدام الدّالّة المنطقيّة ?include. numbers.include?(5) # true ستقوم روبي بإرجاع true حيث أنّ المجال (قمنا بإنشائه سابقًا في البداية) يحتوي بالفعل على القيمة 5. فأنت هنا تسأل روبي هل القيمة 5 موجودة في المجال numbers؟ لمعرفة إذا كان المجال الخاصّ بنا يتضمّن نهاية المجال مع القيم أم لا يمكننا فعل ذلك عن طريق دالّة ?exclude_end حيث تقوم بإرجاع true إذا لم يشتمل المجال على النّهاية وfalse إذا كان العكس. numbers.exclude_end? استخدامات المجالات تستخدم المجالات في كثير من الأحيان في المقارنة أو التكرار. مثال على المقارنة، التحقّق من وجود قيمة معيّنة في مجال محدّد من القيم. مثال على التكرار، تنفيذ حلقة Loop لفعل أمر ما 10 مرّات. يمكن إنشاء مجال باستخدام أيّ نوع من البيانات ولكن في أغلب الأحيان ستجد نفسك تستخدم المجالات من نوع السلاسل أو الأرقام فقط. السبب وراء ذلك هو قدرة روبي على ترتيب القيم في هذين النّوعين. فمثلاً، من السّهل إنشاء مجال 1 إلى 10، التحقّق من ما إذا كانت قيمة معيّنة موجودة في هذا المجال وأيضًا من السّهل طباعة كلّ رقم في المجال. الأمر ذاته مشابه مع السلاسل. تعرّفنا سابقًا أنّه بإمكاننا إنشاء مجال من الأرقام الصحيحة Integer من 0 إلى 10. الأمر الجيّد أيضًا أنّه بإمكاننا إنشاء مجالات من الأعداد العشريّة Float فمثلاً لو أردنا إنشاء مجال لنظام المعدّل التراكمي GPA فيمكننا إنشاؤه كالتّالي: gpa = 0.0..4.0 الآن إذا أردنا معرفة إذا كانت قيمة عشريّة معيّنة موجودة في هذا المجال أو لا (لنفرض مثلاً 2.5) فيمكننا فعل ذلك باستخدام دالّة ?include كالتّالي: gpa.include?(2.5) تطبيق عملي لا يبدو مثال المعدّل التراكمي السّابق مفيدًا كثيرًا، أليس كذلك؟ يمكننا جعله أكثر إفادة بتحديد مجال من 0 إلى 2 بحيث يكون هذا المجال هو مجال الإنذار كالتّالي: gpa_warning = 0.0..2.0 الآن لنطبّق ما تعلّمناه في درس العبارات الشرطيّة يمكننا إنشاء برنامج لاستقبال المعدّل التراكمي للطالب ومن ثمّ معالجة البيانات وطباعة معلومات عنها. افتح ملفًّا جديدًا واحفظه باسم gpa.rb أو أيّ اسم من اختيارك مع التأكّد من وجود rb. في نهاية اسم الملفّ. لنبدأ أوّلاً بطباعة التعليمات الخاصّة بالبرنامج، سنطلب من المستخدم إدخال المعدّل التراكمي الخاصّ به واستقبال المعدّل التراكمي كالتّالي: gpa_warning = 0.0...2.0 puts "Please Enter your GPA (0.0 to 4.0)" gpa_entry = gets.to_f في السّطر الأوّل قمنا بتعريف متغيّر باسم gpa_warning وقمنا بتعيين المجال 0 إلى 2 إليه، حيث هذا المجال هو مجال التنبيه لأيّ طالب حاصل على معدّل تراكمي بين 0 و2. بعد ذلك في السطر الثّاني طبعنا رسالة على الشّاشة تسأل المستخدم أن يدخل قيمة المعدّل التراكمي الخاصّ به بين 0 و 4. في السطر الثّالث أنشأنا متغيّر باسم gpa_entery وهو المتغيّر الذي ستقوم روبي بحفظ القيمة التي سيدخلها المستخدم إلى البرنامج به. أمر gets يتيح للمستخدم إدخال بيانات، دالّة to_f تستخدم لتحويل المُدخلات Inputs من سلاسل إلى أرقام عشريّة، حيث أنّ أيّ مدخل يتمّ اعتباره افتراضيًّا أنّه سلسلة (اسم الدّالّة نفسها هو اختصار لـ get string). قد تتساءل هنا، لماذا لم نضِف دالّة chomp إلى gets لحذف السطر الذي تضيفه روبي إلى المدخل عند الضغط على Enter؟ الإجابة هي أنّ السطر الزائد يتمّ حذفه بالفعل عند تحويل المُدخل إلى عدد عشري. الآن لدينا ما نحتاج للحصول على مُدخل من المستخدم. الجزء الثّاني من البرنامج هو أن نقوم بالتعامل مع هذه البيانات بحيث تقوم بطباعة شيء محدّد بناءً على ما يدخله المستخدم. if (gpa_entry < 0.0 || gpa_entry > 4.0) puts "False entery. Please enter a numberic value between 0 and 4." elsif (gpa_warning.include?(gpa_entry)) puts "Your GPA is too low! You need to do something about it." else puts "Congratulations! Your GPA is good. No warnings." end ماذا فعلنا هنا؟ أوّلاً، عبارة if الأولى تقوم بالتحقّق إذا كان ما أدخله المستخدم أصغر من 0 أو أكبر من 4 وهذه حالات غير متوقّعة في المعدّل التراكمي. إذا كان المُدخل يحقّق أحد الشرطين سيقوم البرنامج بإخبار المستخدم أنّ عليه إدخال رقم ما بين 0 و 4. عبارة elsif تتحقّق هل يحتوي المجال الموجود في المتغيّر gpa_warning على قيمة المتغيّر gpa_entery والذي هو القيمة التي أدخلها المستخدم. إذا تحقّق شرط العبارة فهذا يعني أن المعدّل التراكمي الذي تمّ إدخاله سيكون بين 0 و2 وفي هذه الحالّة سيقوم البرنامج بطباعة رسالة التنبيه للمستخدم. في حالة إذا كان المعدّل التراكمي غير ذلك، أي أنّه ليس أقل من 0 أو أكبر من 4. وأيضًا ليس بين 0 و2 فسيقوم البرنامج بإخبار المستخدم أنّ معدّله التراكمي جيّد وأنّه لا توجد أيّ تنبيهات له. الآن إذا قمت بتجربة البرنامج ستجده يعمل بشكلٍ جيّد ولكن ماذا يحدث عندما تُدخل سلسلة نصيّة؟ يقوم البرنامج بطباعة رسالة التنبيه بأنّ المعدّل التراكمي منخفض، أعلم أنّك لم تتوقّع ذلك. تقوم دالّة t_f بتحويل ما نستدعيها عليه إلى عدد عشري وإذا كان المُدخل هو نصّ عادي فتقوم بتحويل قيمته إلى 0.0 وهي القيمة الموجودة لدينا بالفعل في المجال. والآن حان دورك، هل يمكنك حلّ هذه المشكلة بحيث أنّه عند إدخال المستخدم أحرفًا وقيمًا ليست بالأرقام يطبع له البرنامج أنّ عليه إدخال أرقام؟ خاتمة تعرّفنا في هذا الدّرس والدّروس الماضية على أنواع المجموعات المختلفة في روبي مثل المصفوفات، جداول التّقطيع والمجالات. يمكنك قراءة توثيق روبي حول المجالات لمعرفة المزيد عنها. جرّب تحسين البرنامج الموجود بقسم التطبيق العملي بأن يقوم بطباعة بيانات أخرى حول المعدّل التراكمي بناءً على إدخال المستخدم وموقع هذا المعدّل بالنسبة للمجال المحدّد. إذا كنت تودّ إضافة معلومة عن المجالات أو واجهتك مشاكل أو لديك تساؤل حول الدّرس فلا تتردّد في السؤال بقسم التعليقات أدناه.

تطرقنا في المقال السابق إلى نبذة عن تاريخ نماذج HTML5 إضافة إلى جُملة من خصائصها الجديدة. سنتطرق في هذا المقال إلى أنواع الحقول الجديدة التي أضافتها HTML5 إلى النماذج. مثلما سنلاحظه طيلة هذا المقال أيضا فإن هذه المميزات الجديدة ستُسهل المهمة على المُطورين وستقدم تجربة أفضل للمستخدم. وكما سبق وأن أشرنا إليه في المقال السابق فإنه يُمكن الشروع في استخدام كل هذه الميزات منذ الآن. أنواع الحقول الجديدةأضافت HTML5 13 نوعا جديدًا من الحقول، سنقوم باستعراضها أولا ومن ثم سنشرح لماذا يجب عليك الشروع في استخدامها في مشاريعك. لاستخدام هذه الحقول الجديدة فائدتان، أولاهما هو تقليص زمن التطوير الذي تحتاجه لإنهاء تطبيقك، وثانيهما هو تقديم تجربة استخدام أفضل. الحقول الجديدة التي سنستعرضها في هذا المقال هي كالتالي: searchemailurltelnumberrangedatemonthweektimedatetimedatetime-localcolorsearchلا يوجد أفضل من هذا الحقل للشروع في استعراض خواص هذه الحقول الجديدة. ليس المقصود بالبحث هنا المحركات الشهيرة كـ Google، Yahoo أو Bing، بل نقصد حقل البحث الذي استعملته على أحد مواقع التجارة الإلكترونية، على ويكيبيديا أو على مُدونتك الشخصية. وقد تكون هذه الحقول (حقول البحث بشكل عام) هي الحقول الأكثر استعمالا على الويب، إلا أننا نستعملها بشكل لا يدل فعليا على وظيفتها، حيث أننا ألفنا إنشاء حقول البحث على النحو التالي: <input type="text" name="search"> لكن ماذا لو كان بإمكاننا القيام كتابتها على النحو التالي: <input type="search" name="search"> وهو ما يُمكن فعلا القيام به باستخدام HTML5، وهو ما يبدو أفضل بكثير، أليس كذلك؟ تظهر المُتصفحات حقول البحث بنفس مظهر الحقول النصية إلى غاية أن تشرع في الكتابة فيها، وحينها ستظهر علامة x صغيرة على الجانب الأيمن للحقل، والذي يسمح لك بمسح الحقل بمجرد النقر عليه، وهو أمر مماثل لما يحدث مع حقل البحث في مُتصفح Safari. حقل البحث كما يظهر على مُتصفح Safari على نظام Windows.الوضع على الهواتف الذكية أفضل بكثير، ألق نظرة على الصورة التالية والتي تُظهر حقل بحث على هاتف iPhone. لدى انتقال التركيز Focus إلى خانة البحث فإن لوحة مفاتيح خاصة تظهر، لاحظ زر search في الزاوية اليُمنى أسفل الشاشة، والتي تُعوض زر Go لما يكون الحقل نصيا فقط. حقل البحث على هاتف iPhoneكما سبق وأن لاحظناه مع الخصائص الجديدة في المقال السابق فإن المُتصفحات التي لا تفهم/تدعم هذا الحقل تُوفر تراجعا رشيقا له graceful degradation، وهو ما يحدث مع جميع الحقول التي سنتطرق إليها في هذا المقال. إذا لم يستطع المُتصفح فهم type="search" فإنه سيقوم بتعويضه بـ type="text"، وهو ما يعني بأنك لن تخسر أي شيء باستخدامك لهذا الحقل، بل العكس كل العكس، حيث أنك تُوفر تحسينا تدريجيا progressive enhancement وتُوفر لزوار موقعك تجربة مُستخدم أفضل. كما نعلم جميعا فإن ملء حقول نموذج ليس بالأمر المُمتع وبالتالي فإن أي تحسين يُمكن أن ندخله عليها مُرحب به. emailمن حيث المظهر لا يملك التفريق ما بين حقل email وما بين الحقول النصية العادية، ويستعمل هذا الحقل لإدخال عنوان بريد إلكتروني (أو أكثر). لكن من حيث الاستخدام ولدى إضافة خاصية required إلى هذا الحقل فإن المُتصفح سيقوم حينها من التحقق من أن النص الذي تم إدخاله هو فعلا عُنوان بريد إلكتروني صحيح من حيث بُنيته. بطبيعة الحال التحقق الذي يقوم به المُتصفح هو مُجرد تحقق بدائي حيث يتحقق من وجود كل من @ و النقطة في العنوان كما أنه لا يسمح بوجود المسافات. يدعم هذه الخاصية كل من Opera 9.5+، Firefox 4+، IE10 وChrome 5+، وتُظهر المُتصفحات رسالة خطأ إن كان العنوان الذي تم إدخاله غير صحيح البُنية. بإمكانك التحكم في مظهر الحقل بعد ملئه وذلك باستخدام أشباه الفئة :valid و :invalid أو :required مثلما يشرحه هذا المقال. <input type="email" name="email" required>رسالة خطأ في حقل email كما يظهر على مُتصفح Opera.تُشير مواصفات HTML5 إلى أنه يُمكن إدخال أكثر من عنوان بريد إلكتروني في هذا الحقل، مما يعني بأن يُمكنك استخدام خاصية multiple مع حقول البريد الإلكتروني (type="email") أيضا، وهو ما يذكرك بمقدار شفرات JavaScript التي كان يتوجب عليك كتابتها بنفسك لو كنت تقوم بعمليات التحقق هذه بنفسك. لمزيد من التفاصيل حول التحكم في مظهر حقول النماذج بالاستعانة بأشباه الأصناف pseudo-classes يُرجى الاطلاع على هذا المقال على موقع A List Apart. ملاحظة: لدى كتابة هذه السطور لا تزال بعض المُتصفحات تُعاني من نقائص لدى التحقق من عناوين البريد الإلكتروني التابعة لأسماء نطاقات تستعمل حروفا غير لاتينية (كبعض أسماء النطاقات اليابانية)، حيث أن بعض المُتصفحات تعتبرها غير صحيحة البُنية. خذ على سبيل المثال التالي: <input type="email" name="email" value="gordo@日本.jp">والتي تعتبرها كل من متصفحات Firefox (تم تصحيح الوضع في Firefox)، Safari، IE أو Chrome غير صحيحة البُنية (يقبل مُتصفح Opera هذا العنوان)، إلا أن Kyle Barrow وجد طريقة لحل هذا المُشكل وذلك باستخدام حقل نصي عادي والاستعانة بخاصية pattern على النحو التالي: <input type="text" name="email" value="gordo@日本.jp" pattern="[^ @]*@[^ @]*">هناك حل آخر إن أردت الإبقاء على type="email" وذلك باستخدام formnovalidate مع زر إرسال النموذج على النحو التالي (هذه الطريقة ستضمن بأن المُتصفح لن يقوم بالتحقق مما يتم إدخاله في حقل البريد الإلكتروني وهو ما أمر قد لا ترغب فيه): <form action="process.php"> <label for="email">Email:</label> <input type="email" name="email" value="gordo@日本.jp"> <input type="submit" formnovalidate value="Submit">كما يُمكن استخدام خاصية novalidate مع النموذج على النحو التالي: <form action="process.php" novalidate> <label for="email">Email:</label> <input type="email" name="email" value="gordo@日本.jp"> <input type="submit" value="Submit">دعونا من هذه المشكل ولنعد إلى ما سبق وأن تحدثنا عنه بخصوص منافع حقول HTML5 الجديدة، والتي هي –كما سبق ذكره أيضا- تقليص وقت التطوير وتحسين تجربة المُستخدم. ألقوا نظرة على المثال السابق لكن باستخدام iPhone مثلا، سيظهر لك أمر مماثل للصورة التالية: يُظهر iPhone لوحة مفاتيح خاصة مع حقول البريد الإلكترونيهل لاحظت الاختلاف هذه المرة؟ ركز على السطر السُفلي في لوحة المفاتيح ستجد بأن هناك زرا خاصا بـ @ وآخر خاصا بالنقطة . وهما زران ستحتاجهما لدى كتابة عناوين بريد إلكتروني. وكما سبق ذكره مع حقول search فإنه لا يوجد أي جانب سلبي لاستخدام هذا الحقل (type="email") من الآن، حيث أن المُتصفحات التي لا تدعمه ستقوم بتعويضه بحقل نصي عادي (type="text")، وفي باقي المُتصفحات سيحصل الزائر على تجربة مستخدم أفضل. urlتُخصص حقول url مثلما قد تتوقعه لعناوين الويب. تقبل هذه الحقول استخدام خاصية multiple معها للسماح بإدخال أكثر من عنوان واحد. ومثلما هو الحال مع حقول البريد الإلكتروني فإن المُتصفحات تقوم بعملية تحقق بسيطة من مُحتوى هذا الحقل، ومن ثم تعرض رسالة خطأ إن كان بُنية العنوان غير صحيحة، ويتم ذلك عبر التحقق من وجود بعض المحارف الخاصة كـ / ، النقاط، المسافات مع إمكانية التحقق من لاحقة العنوان top-level domain كـ .com مثلا. يتم استخدام حقول url على النحو التالي: <input type="url" name="url" required>ومن جديد سنلقي نظرة على نتيجة صفحة تحتوي هذا الحقل باستخدام iPhone. مثلما تلاحظونه في الصورة التالية فإن المُتصفح يُظهر لوحة مفاتيح خاصة ليسهل مهمة الكتابة على المُستخدم، حيث تم استبدال زر المسافة بأزرار لكل من الـ /، النقطة و زر خاص بـ .com (يكفي الضغط مطولا عليه لتظهر لواحق أُخرى كـ .org أو .net). يُظهر iPhone لوحة مفاتيح خاصة مع حقول عناوين الويبtelتختلف حقول tel عن حقول email أو url بكونها لا تعتمد أي نمط مُعين بحكم أن أرقام الهواتف تختلف باختلاف بلدانها وهو ما يجعل من مهمة التحقق من الأرقام في غاية الصعوبة، عدى السماح باستخدام الأرقام فقط مع إمكانية استخدام مُحرف +. بطبيعة الحال يبقى بإمكانك التحقق من رقم الهاتف إن أردت إن كنت تعرف بأن الأرقام التي سيتم إدخالها تتبع نمطا مُعينا، لكن يجب عليك القيام بذلك على جانب الخادوم من تطبيقك. يتم استخدام حقول tel على النحو التالي: <input type="tel" name="tel" id="tel" required>من جديد فإن هواتف iPhone تتعرف على حقول أرقام الهواتف لكن هذه المرة يستعرض المُتصفح لوحة مفاتيح مُختلفة كُلية، حيث يتم استخدام لوحة أرقام الهواتف، وهو ما يحدث أيضا على بعض هواتف Android (مثل هاتف HTC Desire والذي يظهر في الصورة أدناه). ظهور لوحة أرقام الهاتف ستمكن المُستخدم من إدخال رقم هاتفه بشكل أسرع. يقوم iPhone وبعض هواتف Android بتغيير لوحة المفاتيح بشكل كبير لدى استخدام حقول أرقام الهواتف.numberمثلما هو ظاهر من اسمه، يتم استخدام حقل number مع الأرقام. ومثلما هو عليه الحال مع أغلب هذه الحقول الجديدة فلقد كان مُتصفح Opera السباق في دعمها. يظهر هذا الحقل على كل من Opera، Safari وChrome على هيئة spinbox حيث أنه يمكن النقر على سهمي فوق وتحت لتغيير قيمة الحقل. أما على Firefox وIE10 فيظهر الحقل كمجرد حقل نصي عادي. حقل number كما يظهر على مُتصفح Operaيُمكن استخدام خصائص min، max وstep مع الحقول الرقمية ما يسمح بالتحكم في القيم القصوى والدنيا للحقل إضافة إلى "الخطوة" التي يتم الانتقال بها لدى النقر على زري فوق وتحت، إضافة إلى إمكانية التحكم في القيمة القياسية عبر استخدام خاصية value. المثال التالي يُوضح كيفية القيام بذلك: <input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">في هذا المثال يُمثل min القيمة الدنيا المُمكنة التي يُمكن للحقل قبولها، max تُمثل القيمة القصوى المُمكنة. لدى الوصول إلى هاتين القيميتن فإنه سيتم تعطيل السهم المسؤول عن ذلك وبالتالي فإنه لا مجال للذهاب أعلى القيمة القُصوى أو أدنى من القيمة الدنيا*. أما step فهي الخُطوة التي يتم الانتقال بها لدى النقر على السهمين والتي تأخذ 1 كقيمة قياسية، وهو ما يعني بأنه يمكن استخدام قيم سالبة أو استخدام خطوات مثل 0.5 أو5**. أما value فهي خاصية ألفنا استخدامها مع HTML4. كل هذه الخواص ليست إجبارية. *: لم يتم تعطيل الأسهم لدى تجربتي للحقل على كل من Safari وOpera. **: لدى تجربتي لقيم سالبة قام كل من Opera وSafari باستخدام القيمة القياسية 1 للخطوة بدل القيمة السالبة. في مقابل طريقة عرض Opera للحقول الرقمية، لا يقوم كل من iPhone و بعض هواتف Android بعرضها سوى كحقول نصية عادية، لكن يقوم كلاهما باستخدام لوحة مفاتيح خاصة. حقل number كما يظهر على كل من iPhone وHTC Desireلجعل iPhone يستخدم لوحة أرقام الهواتف مثلما رأينا مع حقول الهواتف، اكتشف Chris Coyier صاحب موقع CSS Tricks خدعة تساعد في القيام بذلك، حيث أنه بدل استخدام type="number" فإنه يكفي استخدام حقل نصي type="text" وإضافة خاصية pattern بحيث نجعله لا يقبل سوى الأرقام مثلما هو موضح في المثال التالي. هذا الحل ليس مثاليا، لكنه يحل الُمشكل. يُمكنكم الإطلاع على نتيجة ذلك في هذه الفيديو القصيرة. <input type="text" pattern="[0-9]*" name="shoe-size">هذه التقنية من شأنها أن تصبح "مهجورة" obsolete بعد اعتماد خاصية inputmode والتي تمت إضافتها مؤخرا إلى مواصفات HTML5. هذه الخاصية من شأنها أن تُحدد طريقة ملء الحقل الأنسب للمستخدم. لدى استخدام هذه الخاصية فإنه سيصبح بالإمكان الاختيار ما بين الأرقام، الحروف اللاتينية، عناوين البريد الإلكتروني أو Kana (والتي يبدو بأنها خاصة باللغة اليابانية). rangeحقل range مُشابه لحقل number مع نكهة إضافية، حيث أنه يُمثل قيمة عددية محصورة ضمن نطاق مُعين (range). قد تتساءل عن الفرق ما بين هذين الحقلين، الفرق بسيط وهو أن قيمة الحقل ليست بتلك الأهمية التي هي عليها قيمة الحقل مع number، كما أن المُتصفح يوفر آلية أكثر سهولة في التحكم فيه. يتم إظهار حقل range على كل من مُتصفحات Opera، Safari، IE10 وChrome على هيئة slider (انظر الصورة أدناه). يُظهر مُتصفح IE10 لدى تحريك زر الحقل القيمة التي تم اختيارها. يقوم مُتصفح Opera بإظهار الـ slider بشكل عمودي إن تم إعطاء قيمة للطول أكبر من قيمة العُرض له في ملف CSS. المثال التالي يُوضح كيفية استخدام حقل rang للقيام مثلا بتحديد مدى مهارة المُستخدم في مجال مُعين على سُلم من 1 إلى 100، حيث نقوم بتحديد القيم الدنيا والقُصوى من خلال الخاصيتين min وmax. بإمكاننا أيضا تحديد قيمة قياسية لهذا الحقل بالاستعانة بخاصية value. <input id="skill" type="range" min="1" max="100" value="0">حقل range على مُتصفح Chromeملاحظة: إن كنت تبحث عن طريقة لتوفير تراجع رشيق لحقول rang على المُتصفحات التي لا تدعمها، فيُمكنك القيام بذلك باستخدام هذه الطريقة التي أتى بها Remy Sharp. dates و timesإن سبق لك أن حجزت أو اشتريت تذاكر على الإنترنت فإنك من دون شك قد تعاملت مع data picker لاختيار التاريخ الذي توده، وربما قد سبق لك وأن استخدمت ذلك في أحد مشاريعك. عادة ما يتم توفير ذلك باستخدام JavaScript وبالتحديد مكتبة jQuery، Dojo أو YUI. قد يكون تحميل مكتبة بأكملها وإحدى إضافاتها من أجل القيام بذلك قرارًا غير صائب، لكن مع HTML5 فإنه يُمكن القيام بذلك من دون أية إضافات. ليس هذا فحسب فما تُقدمه HTML5 لا تسمح باختيار التاريخ فقط، بل يُمكن أيضا اختيار الأسبوع، الشهر، الوقت، التاريخ، وحتى التاريخ التابع لمنطقة زمنية مُعيّنة. يُمكن القيام بذلك على النحو التالي: <input id="dob" name="dob" type="date">يُمكنك الذهاب إلى أبعد من ذلك باستخدام خاصيتي min وmax لتضمن بأن التاريخ الذي يختاره المُستخدم يقع ضمن نطاق تقوم بتحديده. <input id="startdate" name="startdate" min="2012-01-01" max="2013-01-01" type="date">وكما حول الحال مع العديد من أنواع الحقول فإن مُتصفح Opera يتميز عن غيره بدعمها لهذا الحقل بشكل جيد. دعونا نلقي نظرة على الكيفية التي تظهر فيها هذه الحقول على مُتصفح Opera: dateالصورة التالية تُبين الحالة التي يظهر عليها حقل date على الإصدار 10.5 من مُتصفح Opera لا يقتصر استخدام هذا الحقل على الأجهزة المكتبية فقط، تقوم أجهزة BlackBerry ومتصفح Chrome على نظام Android باستخدام date pickerالخاص بها لدى استخدام حقل date. monthالصورة التالية توضح كيف تظهر حقول month على مُتصفح Opera والتي يُمكن استخدامها مثلا لإدخال شهر انتهاء صلاحية بطاقة دفع إلكتروني. يُمكن استخدام حقل month على النحو التالي: <input id="expiry" name="expiry" type="month" required> weekيُمكن أيضا تمكين المُستخدم من اختيار أسبوع مُعين في الشهر على النحو التالي: <input id="vacation" name="vacation" type="week">لاحظوا في الصورة التالية كيف يقوم مُتصفح Opera بإبراز/تظليل الأسبوع الذي يتم اختياره. timeالصورة التالية تُبين الحالة التي يظهر عليها حقل time على متصفح Opera والذي يُمكن استخدامه على النحو التالي: <input id="exit-time" name="exit-time" type="time"> datetimeيُمكن دمج كلا من حقلي date وtime لينتج لنا حقل datetime والذي يُستعمل لتحديد التاريخ والوقت معا على النحو التالي: <input id="entry-day-time" name="entry-day-time" type="datetime"> datetime-local وأخيرا وليس آخرا، تظهر الصورة التالية كيف يسمح HTML5 لنا بالتحكم بشكل أدق في آلية اختيار التاريخ والوقت ضمن المنطقة الزمنية المحلية باستخدام datetime-local على النحو التالي: <input id="arrival-time" name="arrival-time " type="datetime-local"> مشاكل مع date و timeهناك على الأقل مشكلان رئيسيان مع حقول الوقت والتاريخ. الأول يخص عدم التمكن من كتابة التاريخ يدويا بشكل مباشر (على المتصفحات التي تدعمها) رغم أنه يمكن التحكم في هذه الحقول باستخدام لوحة المفاتيح، حيث أنه وفي الحالات التي يقوم المستخدم بملء نفس النموذج عدة مرات فإنه هذه العملية ستكون أسرع لو تم تمكينه من كتابة التواريخ يدويا. المشكل الثاني يكمن في عدم مقدرتنا في التحكم في مظهر الـ data Picker. الاعتقاد السائد هو أن هذا الأمر محمود، حيث سيحصل المستخدم على نفس تجربة المستخدم ونفس المظهر على جميع المواقع التي يزورها، إلا أن الشركات -ومن دون شك- سترغب في توفير Data Picker خاص بها. قامت كل من Safari5 و Chrome5 بدعم هذه الحقول إلا أن مظهرها ليس جيدا. يجب أن تكون حقول date على الشكل التالي: YYYY-MM-DD وحقول datetime على الشكل الغريب التالي: YYYYMM-DDT00:00Z. ومثلما هو عليه الحال مع باقي أنواع الحقول الأخرى تقوم المتصفحات التي لا تدعم هذه الحقول بتجاهلها وتعويضها بحقول نصية عادية type="text". colorتسمح حقول color باختيار لون مُعين وإرجاع قيمته الست عُشرية Hex value. من المفترض أن يكون المُستخدم قادرا على إدخال قيمة اللون الذي اختاره أو أن يقوم باختيار اللون من لوحة Color Picker والتي يمكن أن تكون إما لوحة اختيار الألوان الخاصة بنظام التشغيل أو لوحة اختيار الألوان الخاصة بالمُتصفح. قام مُتصفح Opera 11 بدعم حقل الألوان بتوفيره جملة من الألوان القياسية إضافية إلى زر يوفر إمكانية اختيار ألوان أخرى، والذي -بمجرد النقر عليه- يُظهر لوحة اختيار الألوان الخاصة بنظام التشغيل. <input id="color" name="color" type="color">حقل الألوان على مُتصفح Opera على اليسار ونتيجة النقر على زر other على اليمين.في المقابل توفر بعض أجهزة BlackBerry دعما لحقول color حيث تقوم بإظهار لوحة اختيار الألوان المُبنية في الصورة التالية: خلاصةباستخدامك للحقول الجديدة الخاصة بـ HTML5 فأنت تقدم تجربة مستخدم أفضل لزوار موقعك، تحضر موقعك للعمل حسب معايير المستقبل، وتسهل من مهمة التطوير عليك. بطبيعة الحال ليس من المُمكن أن نتجاهل المُتصفحات التي لا تدعم هذه الخواص، إلا أنه من الممكن توفير دعم لها باستخدام JavaScript (ستجد تفاصيل حول الأمر بقراءتك للفصل السادس من كتاب Beginning HTML5 and CSS3). يُمكن لك أن تجد نموذجا تجريبيا يستخدم بعضا من الأمثلة التي استعرضناها في هذا المقال هنا. أشرنا خلال هذا المقال إلى المتصفحات التي تدعم كل من الحقول التي استعرضناها، لكن مع الإصدارات الجديدة لكل متصفح والتي يتم إطلاقها بوتيرات متسارعة فإنه من الصعب معرفة ما الذي يدعمه هذا المتصفح وما الذي لا يدعمه ذاك المتصفح، لكن إن أردت البقاء على اطلاع على ذلك فإنه يُمكنك ذلك عبر المواقع التالية: can I use …، FindMeByIP ومحرك بحث Wufoo الخاص بالـ HTML5. إذا فاتتك قراءة المقال السابق الذي يتحدث عن مختلف الخصائص الجديدة في نماذج HTML5 فيُمكن إيجاده هنا. ترجمة –وبتصرف- للمقال HTML5 forms input types لصاحبه Richard Clark.