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

سنكمل الآن ما تعلمناه في الدرس السابق عن السلاسل النصية. وقد كان محتوى الدرس الأول كالآتي: إنشاء والوصول إلى السلاسل النصية باستخدام $ و {}، واستخدام الدالة strlen()‎. البحث في السلاسل النصية باستعمال الدوال: strstr()‎ strpos()‎ و strrpos()‎ substr_count()‎ strpbrk()‎ الاستبدال في السلاسل النصية باستخدام الدوال: str_replace()‎ ()substr_replace ()strtr strtr()‎ التعامل مع حالات الحروف الكبيرة (uppercase) والصغيرة (lowercase) باستخدام الدوال: strtolower()‎ strtoupper()‎ ucfirst()‎ lcfirst()‎ ucword()‎ النسخ غير الحساسة لحالة الأحرف لجميع الدوال السابقة. أما هذا الدرس فسيحتوي على ما يلي: تنسيق السلاسل النصية باستخدام printf()‎، بما في ذلك تعيين دقة الأرقام العشرية. إزالة الفراغات (trimming) من أطراف السلاسل النصية باستعمال الدوال: trim()‎ ltrim()‎ rtrim()‎ إضافة حواشي (paddings) للنصوص باستعمال الدوال: str_pad()‎ STR_PAD_RIGHT STR_PAD_LEFT STR_PAD_BOTH التفاف (wrapping) النصوص عبر استعمال الدالة wordwrap()‎. تنسيق الأرقام باستخدام الدالة number_format()‎. الوقت والتاريخ. تنسيق السلاسل النصية الدالة printf()‎ الدالة printf()‎ هي أداةٌ قويةٌ تمكِّنك من تنسيق السلاسل النصية بطرقٍ مختلفة، تأخذ printf()‎ وسيطًا يُسمى سلسلة التنسيق (format string) يُتبَع عادةً بوسيطٍ اختياري أو أكثر يحتوي على السلسلة أو السلاسل التي ستوضع في السلسلة السابقة، ثم ستطبع هذه الدالة النتيجة النهائية. سلسلة التنسيق تحتوي على نصٍ عادي وفيه مُحدِّدات التنسيق (conversion specifications)، يتطلب وجود كل محدد تنسيق وسيطًا إضافيًا يُمرَّر إلى printf()‎، ومهمته هي تنسيق ذاك الوسيط ووضعه في سلسلة التنسيق، ثم بعد ذلك ستُعرَض السلسلة النهائية المُنسَّقة؛ تبدأ محددات التنسيق دومًا بإشارة النسبة المئوية (%)، ربما يبدو الأمر معقدًا للوهلة الأولى، لكن مثالًا بسيطًا كهذا سيجعل إيصال الفكرة أمرًا هينًا: <?php // الناتج: "Pi rounded to a whole number is: 3" printf( "Pi rounded to a whole number is: %d", M_PI ); ?> إن عبارة "Pi rounded to a whole number is: %d" هي سلسلة التنسيق، و "%d" ضمن السلسلة السابقة هي محدد للتنسيق، وفي هذه الحالة، يُخبِر هذه المحدد الدالة printf()‎ أن تقرأ الوسيط الإضافي وتضعه -بعد تنسيقه كعدد صحيح- في سلسلة التنسيق؛ الوسيط الإضافي هو الثابت M_PI الموجود في لغة PHP، التي يُمثِّل القيمة التقريبية للعدد π بعدد معيّن من المنازل العشرية (14 منزلة افتراضيًا)؛ أي أنَّ النتيجة النهائية لاستدعاء الدالة السابقة هي طباعة سلسلة التنسيق مع استبدال "%d" بقيمة الثابت π مُقرَّبًا إلى أقرب عدد صحيح. المزيد من المُحدِّدات: b: معاملة الوسيط كعدد صحيح (integer) وتنسيقه كعدد ثنائي. c: معاملة الوسيط كعدد صحيح وتنسيقه كمحرف بنظام ASCII الذي يحمل نفس القيمة العددية. d: معاملة الوسيط كعدد صحيح وتنسيقه كعدد عشري مع إشارة (signed). e: تنسيق الوسيط بالطريقة العلمية (مثلًا، 3.45e+2). f: تنسيق الوسيط كعدد ذو فاصلة عائمة (floating point)، آخذًا بالحسبان إعدادات «المحليّة» (locale) الحالية (على سبيل المثال، تستعمل بعض الدول الأوروبية الفاصلة كعلامة تفصل الأرقام الصحيحة عن الأرقام العشرية عوضًا عن النقطة؛ أي 3,14 بدلًا من 3.14). F: تنسيق الوسيط كعدد ذو فاصلة عائمة بغض النظر عن إعدادات المحليّة. o: معاملة الوسيط كعدد صحيح وتنسيقه كعدد بالنظامي الثماني. s: تنسيق الوسيط كسلسلة نصيّة. u: معاملة الوسيط كعدد صحيح وتنسيقه كعدد عشري دون إشارة (unsigned). x: معاملة الوسيط كعدد صحيح وتنسيقه كعدد بالنظام الست عشري بأحرفٍ ذات الحالة الصغيرة (lowercase). X: معاملة الوسيط كعدد صحيح وتنسيقه كعدد بالنظام الست عشري بأحرفٍ ذات الحالة الكبيرة (uppercase). %: إظهار إشارة النسبة المئوية (%)، لا يتطلب هذا المُحدِّد وجود وسيط إضافي. إضافة حواشي إلى المخرجات يمكنك إضافة محارف إلى يسار (افتراضيًا) أو إلى يمين الوسيط الذي يتم تنسيقه كي يُصبِح بعرضٍ معيّن، وهذا مفيدٌ إن أردت أن تُضيف أصفارًا تسبِق الأعداد، أو أن تحاذي عدِّة سلاسل نصية أفقيًا عبر إضافة فراغات على جوانبها. <?php // الناتج‏‎: "000123" printf( "%06d<br/>", 123 ); // الناتج‏‎: "004567" printf( "%06d<br/>", 4567 ); // الناتج‏‎: "123456" printf( "%06d<br/>", 123456 ); ?> دقة الأرقام عندما تُظهِر الأعداد ذات الفاصلة العائمة باستخدام المحدِّد f أو F، يمكنك استعمال مُحدِّد لدقة الأرقام لتعيين عدد المنازل العشرية التي سيُقرَّب (أو يدوَّر) إليها الرقم. لإضافة مُحدِّد دقة الأرقام، أضف نقطة (.) يلحقها عدد المنازل العشرية التي ستستخدم، قبل مُحدِّد النوع؛ انظر إلى المثال الآتي للتوضيح: <?php // الناتج‏‎: "123.456700" (الدقة الافتراضية) printf( "%f<br />", 123.4567 ); //الناتج ‏‎: "123.46" printf("%.2f<br />", 123.4567 ); // الناتج‏‎: "123" printf("%.0f<br />", 123.4567 ); // الناتج‏‎: "123.4567000000" printf("%.10f<br />", 123.4567 ); ?> يمكنك استخدام مُحدِّد الحاشية مع مُحدِّد الدقة، في حال أردت أن يكون طول الرقم معينًا (بما في ذلك الأرقام بعد الفاصلة العشرية، والفاصلة نفسها أيضًا): <?php // الناتج‏‎: "123.46" printf( "%.2f<br />", 123.4567 ); // الناتج‏‎: "000000123.46" printf( "%012.2f<br />", 123.4567 ); // الناتج‏‎: " 123.4567" printf( "%12.4f<br />", 123.4567 ); ?> إزالة الفراغات من أطراف السلاسل النصية قد لا ترغب في بعض الأحيان بوجود أيّة فراغات قبل أو بعد السلسلة النصية، وفي هذه الحالة نستعمل هذه الدوال: trim()‎: إزالة الفراغات (white-space) من بداية ونهاية السلسلة النصية. ltrim()‎: إزالة الفراغات من بداية السلسلة النصية فقط. rtrim()‎: إزالة الفراغات من نهاية السلسلة النصية فقط. انظر إلى ناتج المثال الآتي للتوضيح: <?php echo trim(" hsoub "); echo ltrim(" hsoub "); echo rtrim(" hsoub "); ?> إضافة حواشي إلى النصوص لقد رأينا سابقًا كيف يمكننا استخدام الدالة printf()‎ لإضافة حواشي إلى بداية أو نهاية سلسلة نصيّة؛ لكن لغة PHP توفِّر دالةً مخصصةً لهذا الأمر اسمها str_pad()‎، وهي أكثر مرونةً من printf()‎ وأسهل استخدامًا. لاستعمال الدالة str_pad()‎، مرِّر السلسلة التي ستتم إضافة الحواشي إليها، وعرض السلسلة النهائي، وستعيد الدالة السلسلة وقد تمت إضافة فراغات إلى يمينها (افتراضيًا): <?php echo '<pre>'; echo str_pad( "Hello, world!", 20 ); // الناتج‏‎: "Hello, world! " echo '</pre>'; ?> ولإضافة محارف أخرى غير الفراغ كحاشية، فمرِّر سلسلةً نصيةً كوسيطٍ ثالثٍ اختياري، لاحظ أنَّك تستطيع استخدام محرف وحيد أو أكثر من محرف؛ وفي الحالة الأخيرة، ستُكرَّر السلسلة النصية حسب العرض المُحدَّد: <?php // الناتج‏‎: "Hello, world!*******" echo str_pad( "Hello, world!", 20, "*" ) . "\n"; // الناتج‏‎: "Hello, world!1231231" echo str_pad( "Hello, world!", 20, "123" ) . "\n"; ?> يمكنك جعل الدالة str_pad()‎ تضع الحاشية على يسار السلسلة النصية، أو على يمنيها ويسارها معًا؛ وذلك بتمرير وسيط ثالث اختياري يحتوي على ثوابت الدالة المذكورين في الجدول الآتي: STR_PAD_RIGHT: إضافة الحاشية على اليمين (الحالة الافتراضية)، مما يحاذي السلسلة النصيّة إلى اليسار. STR_PAD_LEFT: إضافة الحاشية على اليسار، مما يحاذي السلسلة النصيّة إلى اليمين. STR_PAD_BOTH: إضافة الحاشية على الطرفين الأيمن والأيسر معًا، مما يؤدي إلى توسيط السلسلة النصية ما أمكن. مثال: (لاحظ وجود 3 محارف للحاشية على اليسار، و4 على اليمين؛ إذ لا يمكن توسيطها تمامًا): <?php // الناتج‏‎: "***Hello, world!****" echo str_pad( "Hello, world!", 20, "*", STR_PAD_BOTH ) . "\n"; ?> التفاف النصوص أحيانًا يكون عندك نصٌ طويلٌ مثل رسائل البريد الإلكتروني أو المقالات، وربما تريد أن تُقسَّم الأسطر بعرضٍ مختلف. تفعل الدالة wordwrap()‎ هذا الأمر؛ يمكنك تحديد عدد المحارف في السطر عبر هذه الدالة، انظر إلى هذا المثال أولًا: <?php $myString = "this is my string which is very long. it is containing five lines and a number of white spaces"; echo wordwrap ($myString); echo "<br><br><br>"; echo wordwrap ($myString, 40); echo "<br><br><br>"; echo wordwrap ($myString, 40, "<br />"); ?> لاحظ النتيجة بنفسك بفتح مصدر صفحة الويب ورؤية النتيجة لمختلف الجمل بقيمٍ مختلفة للوسيط الثاني (غير 40، مثل 10، أو 15، أو 20 ...إلخ.). تنسيق الأعداد تُستعمَل الدالة number_format()‎ لتنسيق الأعداد، وتستقبل وسيطًا أو وسيطين أو أربعة وسائط. أول وسيط هو العدد الذي سيُنسَّق الوسيط الثاني هو عدد المنازل العشرية الوسيط الثالث هو المحرف الذي سيفصل بين الأعداد الصحيحة والأرقام العشرية أما رابع وسيط، فيُحدِّد المحرف الذي سيفصل بين الآلاف في الأعداد الصحيحة يوضَّح ما سبق بالمثال الآتي: <?php $myNumber = 12344555.3453; // الناتج‏:‎ 1,23,44,555.3453 echo number_format($myNumber); echo "<br>"; // الناتج‏:‎ 1,23,44,555.34 echo number_format($myNumber,2); echo "<br>"; // الناتج‏:‎ 1 23 44 555,3453 echo number_format($myNumber,2,',',' '); echo "<br>"; ?> الوقت والتاريخ يلزم الحصول على الوقت والتاريخ وعرضه بطريقة مناسبة كثيرًا في تطوير الويب، ولهذا توفِّر PHP الأدوات اللازمة لذلك. أهم تلك الأدوات هي الدالة date()‎ التي تقبل سلسلةً نصيةً تُحدِّد تنسيق المخرجات، وتتألف من محارف التنسيق الآتية: d: يعيد رقم اليوم من الشهر، وتتراوح قيمته من 01 إلى 31. استخدام المحرف j للحصول على رقم اليوم دون 0 بادئة. m: يعيد رقم الشهر، وتتراوح قيمته من 01 إلى 12. استخدام المحرف n للحصول على رقم الشهر دون 0 بادئة. w: الحصول على رقم اليوم من الأسبوع، وتتراوح قيمته بين 0 الذي يشير إلى يوم الأحد، و6 ليوم السبت. h: الحصول على الساعة الحالية بنظام 12 ساعة. استخدم g للحصول على الساعة بنظام 24 دون 0 بادئة. استخدام a للحصول على am أو pm، و A للحصول على AM أو PM. H: الحصول على الساعة الحالية لكن بنظام 24 ساعة. استخدم G للحصول على الساعة بنظام 24 دون 0 بادئة. i: الحصول على الدقائق. s: الحصول على الثواني. Y: الحصول على السنة على هيئة أربعة أرقام. ويمكن تمرير وسيطٍ اختياري هو بصمة الوقت (timestamp) لكي تُعيد الدالة date()‎ قيمة التاريخ والوقت لها، لكن إن لم تُحدِّد بصمة الوقت، فستؤخذ القيمة من ناتج الدالة time()‎ التي تُعيد بصمة الوقت مقاسةً بالثواني منذ بداية وقت يونكس (Unix Time) (أي منتصف ليلة رأس السنة عام 1970). <?php // الناتج‎: 12:31:55 echo date('H:i:s'); // الناتج‎: 2015/12/23 echo date('Y/m/d'); ?> ملاحظة: يجدر بالذكر أنَّ الدالة mktime()‎ تنُشِئ بصمة الوقت لتاريخ معيّن كي تستعملها مع الدالة date، شكلها العام هو الآتي: mktime($hour, $minute, $second, $month, $day, $year); حيث أول وسيط هو الساعة، والثاني هو الدقيقة، والثالث هو الثانية، والرابع هو الشهر، والخامس هو اليوم من الشهر، والسادس هو السنة؛ مثالٌ عن استعمالها: <?php // الناتج هو مثلًا‏‎: 1450872238 $current_time = time(); echo $current_time; // ناتج بصمة الوقت هو‎: 1030134920 $past_time = mktime(22, 35, 20, 8, 23, 2002); echo $past_time; // الناتج هو‎: 12-23-2015 13:03 // يمكن أن نحذف الوسيط الثاني، لأن الدالة date ستعتمد الوقت الحالي المُعادة من الدالة time افتراضيًا echo 'current date is: ' . date ('m-d-Y H:i' , $current_time); // الناتج هو‎: 08-23-2002 22:35 // يمكن أن نحذف الوسيط الثاني، لأن الدالة date ستعتمد الوقت الحالي المُعادة من الدالة time افتراضيًا echo 'a date in the past: ' . date ('m-d-Y H:i' , $past_time); ?> تمرين اكتب برنامجًا يأخذ تاريخ ميلاد المستخدم ثم يُظهِر عمره بالسنوات والأشهر والأيام؛ مثلًا: 35 سنة، و 4 أشهر، و23 يومًا. المصادر مقال Strings in PHP part-2 لصاحبه Harish Kumar. صفحة sprintf، و date في دليل PHP وغيرها.

تطرقنا في المقال السابق إلى نبذة عن تاريخ نماذج 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.