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

يُعتبر مربع البحث أحد المكونات التي لا غنى عنها في أي موقع، وفي هذا الدرس سوف تتعلم كيف يمكنك إنشاء مربع بحث يظهر ويختفي عند النقر عليه. قد تعتقد أنّ القيام بذلك سيكون سهلًا جدًا ولكنك سوف ترى أنّ الأمر ليس كذلك، فسوف نحتاج إلى تطبيق بعض الخدع حتى نجعل كل شيء يعمل بشكل صحيح. هذه هي المتطلبات التي نريدها مبدئيًا: ما نريده مبدئيًا هو ظهور زر يحتوي على أيقونة بحث. عند النقر على ذلك الزر نريد أن يظهر مربع البحث. نريده أن يكون متجاوبًا مع جميع الأجهزة. عند كتابة أي شيء في مربع البحث نريد أن يقوم المربع بالقيام بالبحث فور النقر على مفتاح الدخول (enter) من لوحة المفاتيح أو النقر على الأيقونة نفسها. إذا كان مربع البحث ظاهرًا ولكنه كان فارغًا فإننا نريده أن يختفي عند النقر على أيقونة البحث (أي أننا إذا قمنا بالنقر على أيقونة البحث وكان المربع فارغًا فإننا لا نريده أن يقوم بالبحث وإنما يقوم بإخفاء مربع البحث). نريد أيضًا أن يختفي مربع البحث عند النقر خارجه سواء كان فارغًا أم لا. لو كانت الجافاسكربت معطلة لدى المستخدم فإننا نريد لمربع البحث أن يكون ظاهرًا (أي دون الحاجة إلى النقر على أيقونة البحث). نريد أيضًا أن ندعم الأجهزة التي تعمل باللمس. يمكنك معاينة النتيجة النهائية لهذا الدرس. بما أننا بتنا الآن نعرف ما نريد فلنقم بذلك. بنية ملف HTML كل ما نحتاجه من وسوم HTML هو حاوٍ رئيسي (main container) وسوف يكون عبارة عن وسم <div> وسوف نحتاج إلى وسم <form> وإلى حقلي إدخال (inputs)؛ واحد من نوع "text" والآخر من نوع "submit" وأخيرًا سوف نحتاج إلى وسم <span> ليحتوي على أيقونة البحث: <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span> </form> </div> لنبدأ الآن بتنسيق العناصر باستخدام CSS. تنسيقات CSS بناءً على المتطلبات التي ذكرناها سابقًا فإنه يجب في البداية أن يكون لدينا زر يحتوي على أيقونة بحث وباقي العناصر يجب أن تكون مخفية. دعونا الآن نتخيل ما الذي سيحصل عند تمدد مربع البحث وجعله ظاهرًا (الذي هو نفسه سيكون الحاوي الرئيسي الذي ذكرناه سابقًا). كيف نقوم بذلك؟ سوف نستخدم الخاصية overflow: hidden وتكبير العرض الخاص بالعنصر الحاوي (sb-search) يجب أن يقوم بإظهار حقل البحث. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن إذًا أول شيء نقوم به هو تنسيق العنصر الحاوي (sb-search) بحيث سوف نجعله يطوف إلى اليمين باستخدام الخاصية float: right ونعطيه الخاصية overflow: hidden، والعرض يجب أن يكون 60px ولكن بما أننا نريد أن يزيد العرض إلى 100% فإننا سنواجه بعض المشاكل في متصفحات iOS فهي لا تقبل التغيير من عرض يعتمد على الـpixels إلى عرض يعتمد على النسب المئوية. لذلك سوف نقوم بتعريف خاصية min-width بالقيمة 60px وخاصية width بقيمة 0%. يمكنك قراءة المزيد عن هذا الحل العبقري من خلال هذا الرابط. سوف نستعمل أيضًا الخاصية transition والخاصية webkit-backface-visibility: hidden- لتلافي بعض الآثار للحقول في متصفحات الهواتف iOS: .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } أي شيء يتجاوز/يفيض عن هذا المربع الصغير لن يكون ظاهرًا. لنقم الآن بموضعة حقل البحث. سوف نستعمل قيمة مئوية بالنسبة للعرض حتى نسمح للحقل بأن يتمدد مع تمدد العنصر الحاوي. ومع إضافة الارتفاع (height) وحجم الخط (font-size) والـpadding المناسبة يمكننا توسيط النص داخل العنصر (استعملنا padding بدل line-height لأن الخاصية line-height لا تعمل بشكل جيد في متصفح IE8). قد يبدو استعمالنا للخاصية position: absolute غير ضروري، ولكن استعمالها يقوم بحل مشكلة تظهر عند إغلاق مربع البحث بحيث يبدو الحقل وكأنه ظاهر في الجانب الأيمن لفترة قصيرة جدًا. .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; } قمنا أيضًا بإزالة التنسيقات الإفتراضية لحقل البحث في متصفحات WebKit. دعونا نقوم الآن بتعريف لون الخط بالنسبة للـplaceholder (الـplaceholder هو نص يظهر داخل حقل البحث قبل أن يقوم المستخدم بكتابة أي شيء بداخله حتى يُعطي المستخدم لمحة عما يجب عليه كتابته في ذلك الحقل): .sb-search-input::-webkit-input-placeholder { color: #efb480; } .sb-search-input:-moz-placeholder { color: #efb480; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #efb480; } دعونا الآن نقوم بتنسيق زر أيقونة البحث وحقل التأكيد/الإرسال (submit input)، فنحن نريدهما أن يظهرا في نفس المكان لذلك يجب أن نضعهما في الجانب الأيمن ونعطيهما نفس الأبعاد. وبما أنهما سيظهران فوق بعضهما فسوف نعطيهما الخاصية position: absolute: .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } نريد في بداية الأمر أن تكون الأيقونة قابلة للنقر، وعند فتح حقل البحث فإننا نريد لحقل التأكيد/الإرسال (submit input) أن يكون قابلًا للنقر. لذلك سوف نُعطي حقل التأكيد الخاصية z-index: -1 ونجعله شفافًا/مخفيًا حتى يمكننا رؤية أيقونة البحث: .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } لاحظ أننا لم نقم بجعل الخلفية شفافة وذلك لأن الأمر لا يعمل بشكل جيد في متصفح IE فالعنصر لا يكون قابلًا للنقر عند ذلك، لذلك قمنا باستعمال لون معين (الأبيض) وجعلنا الشفافية (opacity) تساوي صفر. وبما أننا نريد لأيقونة البحث أن تظهر فوق كل شيء فإننا سوف نقوم بإعطائها الخاصية z-index بقيمة عالية، وسوف نقوم باستخدام الفئة الزائفة ::before لإضافة الأيقونة: .sb-icon-search { color: #fff; background: #e67e22; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: "\e000"; } ودعونا لا ننسى إضافة خط الويب (web font) في بداية ملف الـCSS: /* Search icon by IcoMoon, made with http://icomoon.io/app/ */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } يمكننا الآن إعطاء العنصر الحاوي (sb-search) عرضًا بقيمة 100% وذلك في حالتين؛ الأولى عند النقر على أيقونة البحث وذلك عن طريق إضافة فئة (class) بالاسم "sb-search-open" باستخدام الجافاسكربت والثانية عندما لا يكون الجافاسكربت مفعّلًا لدى المستخدم: .sb-search.sb-search-open, .no-js .sb-search { width: 100%; } لنقم الآن بتغيير لون الخط الخاص بعنصر أيقونة البحث ونضعه أسفل حقل التأكيد/الإرسال وذلك عن طريق إعطائه قيمة z-index أقل من 90 (وهي القيمة التي أعطيناها للعنصر "sb-icon-search"): .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #da6d0d; color: #fff; z-index: 11; } وأخيرًا لنقم بإضافة الخاصية z-index لحقل التأكيد/الإرسال ولكن بقيمة أكبر من 11 حتى يمكننا النقر عليها: .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } انتهينا الآن من تنسيقات CSS وبقي علينا الجافاسكربت. بعض الجافاسكربت لنبدأ بإضافة وإزالة الفئة "sb-search-open". بحيث سوف يتم إضافة الفئة عند النقر على الحاوي الرئيسي (sb-search) وإزالته عند النقر على حقل التأكيد/الإرسال ولكن فقط إذا كان حقل البحث فارغًا، أمّا إذا لم يكن فارغًا فإننا نريد تأكيد عملية البحث. وحتى لا نقوم بإزالة الفئة عند النقر على الحقل (لأن الحاوي بأكمله قابل للنقر) فإننا نحتاج إلى منع حدث النقر (click event) من الانتشار على ذلك العنصر. هذا يعني أنّ النقر على الحقل لن يؤدي إلى إثارة حدث النقر على العناصر الحاوية له. ;( function( window ) { function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { classie.add( this.el, 'sb-search-open' ); }, close : function() { classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); سوف نحتاج أيضًا إلى إضافة الأحداث التي تقوم بإزالة الفئة "sb-search-open" عند النقر خارج مربع البحث، وحتى يعمل ذلك فإننا نريد أن نتعامل مع انتشار الأحداث (event bubbling) عند النقر على الحاوي الرئيسي. ;( function( window ) { function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); }; document.addEventListener( 'click', bodyFn ); }, close : function() { classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وشيء آخر علينا الاهتمام به وهو قصّ مصطلح البحث. عندما نقوم أيضًا بالنقر على أيقونة البحث فإننا نريد أن يكون الحقل مفعّلًا (focused)، ولأنّ هذا يسبب بعض المشاكل في متصفح iOS (لوحة المفاتيح تظهر في نفس الوقت) فإننا نريد تلافي ذلك في هذه الحالة، وعندما يتم إغلاق مربع البحث فإننا نريد أن يكون مربع البحث غير مفعل (blur). هذا سوف يحل بعض المشاكل في بعض الأجهزة التي تُظهر بأنّ المؤشر يومض حتى بعد أن يكون الحقل مغلقًا. ملاحظة جانبية: كلمة focus تدل على أنّ مربع البحث مفعّل (أي أنّ المؤشر بداخله) وكلمة blur تدل على عكس ذلك. ;( function( window ) { // http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }); function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); // trim its value self.inputEl.value = self.inputEl.value.trim(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // focus the input if( !mobilecheck() ) { this.inputEl.focus(); } // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); }; document.addEventListener( 'click', bodyFn ); }, close : function() { this.inputEl.blur(); classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وحتى يعمل كل شيء بشكل سلس في أجهزة الهواتف فإننا سوف نحتاج إلى إضافة أحداث اللمس (touch events). كما أنّ إضافة preventDefault في دالّة initSearchFn سوف يمنع حدث النقر واللمس من أن يتفعّلا مع بعضهما في أجهزة اللمس. ;( function( window ) { // http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }); function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); // trim its value self.inputEl.value = self.inputEl.value.trim(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { ev.preventDefault(); self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.el.addEventListener( 'touchstart', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } ); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // focus the input if( !mobilecheck() ) { this.inputEl.focus(); } // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); this.removeEventListener( 'touchstart', bodyFn ); }; document.addEventListener( 'click', bodyFn ); document.addEventListener( 'touchstart', bodyFn ); }, close : function() { this.inputEl.blur(); classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وأخيرًا، للأجهزة التي لا تدعم addEventListener وremoveEventListener فإننا سوف نستعمل polyfill. // EventListener | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (function () { function addToPrototype(name, method) { Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method; } var registry = []; addToPrototype("addEventListener", function (type, listener) { var target = this; registry.unshift({ __listener: function (event) { event.currentTarget = target; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function () { event.returnValue = false }; event.relatedTarget = event.fromElement || null; event.stopPropagation = function () { event.cancelBubble = true }; event.relatedTarget = event.fromElement || null; event.target = event.srcElement || target; event.timeStamp = +new Date; listener.call(target, event); }, listener: listener, target: target, type: type }); this.attachEvent("on" + type, registry[0].__listener); }); addToPrototype("removeEventListener", function (type, listener) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) { return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener); } } }); addToPrototype("dispatchEvent", function (eventObject) { try { return this.fireEvent("on" + eventObject.type, eventObject); } catch (error) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry[index].target == this && registry[index].type == eventObject.type) { registry[index].call(this, eventObject); } } } }); })(); خاتمة هذا كان كل شيء فيما يخص هذا الدرس، أتمنى أن تكون قد استفدت منه وتعلمت منه شيئًا جديدًا. ترجمة -وبتصرّف- للمقال Expanding Search Bar Deconstructed لصاحبته Mary Lou.

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