كلام في ال HTML5 [الجزء الثاني]

الجزء الأول هنا..

لنتحدث الآن عن بعض الأشياء الجديدة الأخرى في ال HTML5:

أي النماذج في ال HTML5.

كلنا يعرف النماذج في ال HTML. حيث دائما ما كنا نبدأ بإستخدام الوسم <From> نضع بعدها بعض كائنات ال <input type="Text"> ثم ننهي النموذج بال <input type=”submit”> و هذا كل شيئ!!

بشكل عام لم يتم إجراء تعديلات جذرية على طريقة عمل النماذج في ال HTML5، ولكن بإمكاننا الحديث بثقة عن العديد من الميزات الجديدة المدعومة في ال HTML5، و بشكل خاص أنواع مكونات الإدخال input.

أو النص البديل، وهي خاصية جديدة في الوسم <input> وهو عبارة عن نص يتم إظهارة داخل مكون الإدخال، لمساعدة المستخدمين على معرفة الشيئ الذي يجب عليه إدخاله. يكون النص البديل ظاهرا طالما أن أداة الإدخال فارغة و لا تحتوي على مؤشر الكتابة. عندما يقوم المستخدم بكتابة شيئ داخل أداة الإدخال (أو على الأقل وضع مؤشر الكتابة بداخلها) يتم إخفاء النص.

فكرة النص البديل موجودة مسبقا، و أعتقد أنك قد رأيتها (مربع البحث في الفيرفوكس و الإكسبلورر مثلا). ولكن عملية إضافتها إلى صفحة الإنترنت كانت تكلفنا 5-10 أسطر جافا سكربت. أما في الHTML5 فالحياة سهلة، كل ما عليك هو إعطاء قيمة للخاصية placeholder في الوسم <input>:

<form>
  <input name="q" placeholder="Search the Site">
  <input type="submit" value="Search">
</form>

و النتائج على الشكل التالي:

تم تنفيذ المثال بإستخدام ال Safari 4.0.4، المتصفحات التي لا تدعم هذه الخاصية سوف تقوم بتجاهلها ببساطة ولن تظهر نصا بديلا.

هل لاحظت يوما أنك عندما تقوم بفتح صفحة جوجل يكون بإمكانك الكتابة مباشرة داخل مربع البحث بدون الحاجة للضغط عليه؟؟

نعم هذه هي خاصية ال autofocus حيث يتم توجيه تركيز مؤشر الكتابة إلى أداة الإدخال المطلوبة بشكل مباشر. حيث يصبح بمجرد قيامك بفتح الصفحة بإمكانك الكتابة (الإدخال) في أداة الإدخال المطلوبة.

طبعا جوجل لا تستخدم ال HTML5 في صفحتها بعد، ولكن خاصية ال autofocus التي يتم وضعها داخل الوسم <input> سوف توفر علينا و على جوجل العديد من أسطر الجافا سكربت.

بهذه الطريقة نستخدم هذه الخاصية:

<form>
  <input name="q" autofocus>
  <input type="submit" value="Search">
</form>

النتيجة: بمجرد قيامك بفتح الصفحة ستجد أن مؤشر الكتابة ينتظرك داخل أداة الإدخال q.

ماذا تتوقع أن يحصل إن إستخدمناها مع خاصية ال placeholder؟؟ :wink:

كما قلنا أن الوسم input هو أكثر الوسوم في النماذج التي حصلت تعديلات و إضافات، و أكثر هذه التعديلات أهمية هي أنواع ال input التي من الممكن أن تأخذها.

بإمكانك إستخدام هذين النوعين للوسم input، من أجل عمل أداة إدخال تستقبل بريد إلكتروني أو رابط إنترنت.

مثال:

<form>
	<input type="email">
	<input type="submit" value="submit">
</form>

أو من اللمكن إستخدام القيمة “Url” بدلا من “Email” من أجل إستقبال رابط إنترنت.

ولكن ما الهدف من هذه الخيارات؟! قد لا تجد فرقا مرئيا عند تجربتك للمثال السابق، ولكن تأكد أن هنالك العديد من الفوائد من إستخدام هذه الأنواع. على سبيل المثال لا الحصر: بعض المتصفحات تقوم بإظهار أيقونه صغيرة بجانب أداة الإدخال تمثل البريد الإلكتروني أو رابط الإنترنت. من الممكن أيضا أن تقوم بعض المتصفحات بعمل تدقيق على القيمة المدخلة في هذه الأدوات هل هذا بريد إلكتروني صحيح، هل هذا رابط إنترنت صحيح. مثلا (example.example.com) ليس بريدا صحيحا.

فائدة أخرى نجنيها من هذه الأنواع، في بعض الأجهزة مثل أجهزة الموبايل (iPhone, Android...) التي تقوم بإظهار لوحة مفاتيح على الشاشة. من الممكن أن تقوم بتخصيص لوحة المفاتيح بحيث تقوم بإظهار بعض الرموز المتعلقة بأداة الإدخال الحالية. مثلا يمكن إظهار زر @ عندما تكون أداة الإدخال من النوع “email”. لاحظ الصور.

طبعا هذا ليس كل شيئ هناك العديد من الميزات التي بإمكانك أن تحصل عليها من هذه الأنواع. لسنا بصدد التطرق لها. ولكن من باب الإشارة، بإمكانك ربط أداة الإدخال هذه بالوسم datalist (الجديد في ال HTML5) من أجل إعطاء المستخدم قائمة بالإقتراحات مثلا.

نعم أقصد أدوات إدخال الأرقام.

وهل الأرقام تحتاج لأدوات إدخال؟؟!! نعم يا حبيبي، قد تحتاج الأرقام لأدوات الإدخال.

لنفترض أنك تريد من المستخدم أن يقوم بإدخال رقم زوجي بين ال 0 و ال 10. وقمت بإعطائه أداة إدخال عادية، ما هي القيم التي سوف يكون بإمكانه إدخالها؟؟ ببساطة أي رقم موجب او سالب بين ال –مالانهاية إلى الموجب مالانهاية. إذا مالحل؟ الحل هو أن تستخدم أداة Slider أو شريط تمرير، يقوم المستخدم بتمريره من أجل الحصول على القيمة المطلوبة، طبعا أنت سوف تكون قد حددت المدى الذي يستطيع هذا الشريط المرور عليه وقيمة الزيادة.

حسنا لنرجع لل HTML، بإمكانك إعطاء الوسم input في خاصية النوع القيمة “Number”، ما يعني أن أداة الإدخال تلك تتوقع إستقبال رقم، و بإمكانك أيضا إعطائها المزيد من الخصائص بحيث تستطيع الحصول على أداة لإختيار الأرقام، -التجربة خير برهان-: إليك المثال التالي:

<input type="number"
       min="0"
       max="10"
       step="2"
       value="4">

الخصاصية type معروفة، و هنا نخبر المتصفح اننا نريد أداة إدخال من النوع رقم. الخاصية min و max تمثل القيم العليا و الدنيا التي نريد إستقبالها من المستخدم. الخاصية step تمثل قيمة الإنتقال بين الأرقام، يعني (في مثالنا) لو كان الرقم الحالي 4 و إنتقلنا خطوة للأعلى يتم زيادة 2 و يصبح الرقم 6. الخاصية value أيضا معروفة و تمثل القيمة الإفتراضية.

حسنا على ماذا سأحصل؟ كل متصفح يقوم برسم النتيجة بشكل مختلف. و لكن الشكل المشترك هو ال spinbox وهو في ال Opera مثلا مربع صغير يحتوي على الرقم، بجانبه زرين واحد للأعلى وواحد للأسفل، يقومان بتغيير الرقم بناء على ضغطات المستخدم و خصائص أداة الإدخال:

متصفح ال iPhone مثلا تعطيك شيئ شبيه بذلك ولكن بما يتناسب مع لوحة المفاتيح الوهيمة و طبيعة الجهاز. المتصفحات التي لا تدعم هذه الخاصية بعد تقوم بإظهار مربع نص فارغ فقط.

هو أحد أنواع إدخال الأرقام أيضا، ولكن هنا سوف تحصل على شريط منزلق لكي تختار الرقم الخاص بك.

إستخدامه بنفس طريقة ال number فقط عليك تغيير ال type إلى “range”:

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

غالبية المتصفحات تدعم هذا النوع، حيث سوف تحصل على:

كل من صمم نموذج تسجيل مبني على أحد تقنيات الويب، إصطدم بموضوع أدوات إختيار الوقت و التاريخ في نموذجه، و كان يحتار بين عمل أدوات إختيار مبنية على الجافا سكربت أم على أحد تقنيات ال Server Side. الخبر الجميل و الجديد أن ال HTML5 أصبح يدعم أدوات الإدخال تلك، حيث اصبح بإمكانك و بكتابة سطر واحد الحصول على أداة لإدخال الوقت أو التاريخ.

حيث و من خلال الوسم input أصبح بإمكانك إستخدام في الأنواع التالية:

• type="date"
  
  
• type="month"
  
  
• type="week"
  
  
• type="time"
  
  
• type="datetime"
  
  
• type="datetime-local"
  
  

كل نوع واضح من الإسم الخاص به، دعنا نجرب المثال التالي في ال Opera:

<input type="datetime">
<input type="time">
<input type="week">

في ال Date Time ستحصل على:

في ال Time: سوف تحصل على:

و في ال Week سوف تحصل على:

بهذا سوف توفر علينا ال HTML5 الكثير من عمليات البحث و التنقيب عن أدوات لإدخال الوقت و التاريخ إلى مواقعنا.

كما هو الحال مع الوقت و التاريخ، يوفر لنا ال HTML5 نوع من أدوات الإدخال من أجل إختيار الألوان، حيث يقوم المتصفح بعرض لوحة الألوان ويمكن للمستخدم إختيار أحد هذه الألوان. لكن ولسوء الحظ هذه الميزة ليس مدعومة في أي متصفح بعد:(!!

بإمكانك إعطاء الوسم input القيمة “Search”، حيث يصبح بإمكان المتصفح الخاص بك معرفة أن هذا المربع موجود في أحد نماذج البحث.

<form>
  <input name="q" type="search">
  <input type="submit" value="Go">
</form>

في بعض المتصفحات لن تلاحظ أي إختلاف في النتيجة عنها لو كانت type=”text”، ولكن في البعض الآخر مثل ال Safari و ال Chrome سوف تحصل -عند كتابتك لشيئ داخل هذا المربع- على زر x صغير يقوم بمسح المحتويات. إذا كنت تستخدم نظام Mac سوف تلاحظ أن مربع الإدخال سوف يأتي بشكل مدور من الزوايا:

هذا كل شيئ في هذا الجزء.

في الجزء الثالث (و الأخير) سوف نتحدث عن ال Canvas بإذن الله.

يتبع...

خلدون خالد.