تعرف على نماذج HTML5 وخصائصها الجديدة

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

كما سنلاحظه طيله هذا المقال، ستسهل عليك هذه الخواص الجديدة مهمتك وستقدم تجربة أمتع للمستخدم، وفوق كل هذا يُمكنك الشروع في استخدامها من الآن. لكن دعونا نبدأ باستعراض سريع لتاريخ النماذج.

نبذة عن تاريخ نماذج HTML5

قبل أن تصبح نماذج HTML5 على النحو الذي نعرفه الآن كانت في السابق مُجرد مواصفات specification أُطلق عليها اسم Forms 2.0 والتي أضافت جُملة من العناصر والمُدخلات الجديدة إلى النماذج. هذه المواصفات أطلقتها Opera وتولى تحريرها Ian Hickson الذي كان يعمل لديها حينها، قبل أن يتم تقديمها إلى W3C بداية 2005. تم الشروع في العمل على هذه المواصفات تحت مظلة W3C ثم تم دمجها مع مواصفات Web Applications 1.0 لإنشاء قواعد ما أصبح يُعرف لاحقا بمواصفات HTML5 التابعة لـ WHATWG.

استخدام مبادئ تصميم HTML5

أحد أفضل ميزات النماذج الخاصة بـ HTML5 تتعلق بكونها قابلة للاستعمال ابتداءًا من الآن، ولا حاجة لك للاستعانة بأية حيل، Shivs أو طرق مُلتوية للقيام بذلك، لكن ذلك لا يعني بأنها مدعومة الآن، حيث أنها تعطي نتائج رائعة على المتصفحات الحديثة التي تدعمها وتوفر "تراجعا رشيقا" (graceful degradation) على المتصفحات التي لا تفهمها، وهذا راجع بشكل أساسي إلى مبادئ تصميم HTML5، ونقصد هنا بالتحديد التراجع الرشيق وهو ما يعني بأنه لا يوجد أي دافع لعدم استخدام هذه الخواص في مشاريعك الحالية.

خواص نماذج HTML5 الجديدة

هناك 14 خاصية جديدة مُتعلقة بنماذج HTML5 والتي سنقوم باستعراضها في هذا المقال وهي كالآتي:

• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• novalidate
• formnovalidate
• form
• formaction
• formenctype
• formmethod
• formtarget

placeholder

أول هذه الخواص هي placeholder والتي تسمح لنا بإضافة نص توضيحي بنفس الطريقة التي كنا نعملها مع خاصية value في نماذج HTML4. يجب استخدام هذه الخاصية مع النصوص التوضيحية القصيرة فقط، ويُفضل الاستعانة بخاصية title لكل النصوص التوضيحية الأطول. الاختلاف الحاصل مُقارنة بالطريقة المُتبعة مع نماذج HTML4 هو أنه لا يتم استعراض  النص إلا في حالة ما إذا كان الحقل فارغا ولم يستقبل "التركيز" Focus (يعني لم يتم اختياره بالنقر عليه مثلا أو بالانتقال إليه عبر Tab من حقل آخر)، وبُمجرد أن يستقبل الحقل التركيز فإن النص يختفي، وهو أمر مُشابه لحقل البحث الموجود على مُتصفح Safari مثلا.

دعونا نُلقي نظرة على طريقة استخدام placeholder:

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

هذا كل ما في الأمر. قد يقول قائل: "وما الرائع في هذا الأمر؟ ألِفتُ القيام بنفس الأمر عبر استخدام JavaScript طيلة السنوات الماضية" وذلك أمر صحيح، لكن مع HTML5 تأتي هذه الخاصية مدعومة بشكل مُضمن في المُتصفح، مما يعني أنها ستعمل من دون أية سكربتات إضافية، وتعمل على جميع المتصفحات حتى ولو كان JavaScript مُعطلا عليها.

ستقوم المتصفحات التي لا تدعم placeholder بتجاهله بكل بساطة، وبالتالي فإنها لن تقوم بإظهاره. باستخدامك لهذه الخاصية فإنك ستقدم تجربة مستخدم مُحسنة لزوار موقعك والذين تدعم مُتصفحاتهم هذه الخاصية، كما أنها تُعد موقعك للعمل وفق معايير المستقبل، بحكم أن كل المُتصفحات الحديثة تدعمها.

ملاحظة: حاليا لا وجود لأية pseudo-class رسمية للتحكم في مظهر placeholder رغم ذلك فإن كلا من Mozilla (مُطورة متصفح Firefox) و WebKitتوفران آليات للتعامل مع ذلك (vendor prefixed properties) ويتعلق الأمر بكل من -mozplaceholder  و –webkit-input-placeholder، وهو ما يُعطي الانطباع بأنه سيتم اعتماد pseudo-class للتحكم في مظهر placeholder في المُستقبل. لمعلومات أوفى حول الأمر يُمكنكم مُراجعة هذه الصفحة على القائمة البريدية الخاصة بـ WHATWG.

autofocus

تقوم autofocus تماما بالوظيفة الظاهرة من اسمها. إضافة هذه الخاصية لأي حقل من الحقول تُمكنه من الحصول على "التركيز" (Focus) بمجرد أن يتم تحميل الصفحة. ومثلما هو الحال مع placeholder فإنه كان بإمكاننا في السابق الوصول إلى نفس النتيجة التي نحصل عليها لدى استخدام autofocus إن نحن استعملنا بعض الـ JavaScript. إلا أن الطرق المُستعملة مع JavaScript تُعاني بعض النقائص، فعلى سبيل المثال لو شرع المُستخدم في ملء حقول النموذج قبل أن يتم تحميل السكربت فإنه سيتم إرجاعه (أو تحويل التركيز إلى الحقل الأول) بُمجرد أن يتم الفراغ من تحميل السكربت، وهذا ما يُرجح الكفة لصالح autofocus حيث أن هذه الخاصية (أي حصول أحد الحقول على التركيز) يتم بمُجرد الفراغ من تحميل الصفحة دون الحاجة إلى انتظار تحميل أي سكربتات إضافية. في المُقابل ننصح باستعمال خاصية autofocus بشكل حصري على الصفحات التي يكون النموذج محتواها الرئيسي فقط (مثل صفحة بداية مُحرك Google) وذلك لتفادي المشاكل التي قد تترتب عن ذلك والمُتعلقة بقابلية الاستخدام usability.

بما أن الأمر هنا يتعلق بخاصية منطقية boolean attribute (إن كان المُستند الذي تكتبه متوافقا مع XHTML5 فاقرأ الملاحظة أدناه) فإننا نستعملها على النحو التالي:

<input type="text" name="first-name" id="first-name" autofocus>

كل المتصفحات الحديثة تدعم خاصية autofocus ومثلما هو الحال مع placeholder فإنه لا يحدث أي شيء على المتصفحات التي لا تدعمها حيث أنها تقوم بتجاهله.

ملاحظة: العديد من خواص HTML5 الجديدة هي خواص منطقية (Boolean attribute)، وهو ما يعني بأنها خواص يتم أخذها بالحسبان إن كانت حاضرة ويتم تجاهلها إن لم تحضر. إلا أنه من المُمكن كتابتها بعدة طرق في HTML5 على النحو التالي:

autofocus
autofocus=""
autofocus="autofocus"

في المُقابل إن كان مُستندك متوافقا مع XHTML5 فإنه يجب عليك استعمال الصيغة التالية:

autofocus="autofocus"

autocomplete

تُساعد خاصية autocomplete المُستخدِمَ على ملء حقوله بناء على ما قام بإدخاله من قبل في نفس الحقل. هذه الخاصية ليست بالجديدة حيث كان بالإمكان استخدامها منذ IE5.5 وقد تم اعتمادها مؤخرا بشكل رسمي ضمن HTML5. الحالة القياسية (default state) لهذه الخاصية هو on وهو ما يعني بأنك لست في حاجة إلى استخدامها بشكل صريح في حقولك. في المُقابل إن أردت أن يقوم المُستخدم بملء حقوله بنفسه في كل مرة يتعامل فيها مع نموذجك (يعني أنك ترغب في أن  لا يتم ملء الحقول بشكل آلي) فإنه يجب عليك استخدام الخاصية على النحو التالي:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

إن توفرت خاصية autocomplete في حقل ما فإن المتصفح سيأخذ حالتها في الحسبان عوض حالة هذه الخاصية في عنصر form الذي يحتوي الحقل (بعبارة أخرى خاصية autocomplete في أي حقل تقوم بعمل override لنفس الخاصية إن كان form يستخدمها).

required

لا يبدو بأننا في حاجة لشرح ما الذي تقوم به هذه خاصية required حيث أنها تقوم تماما بالوظيفة التي نفهمها من اسمها. لدى إضافة هذه الخاصية لأي حقل من الحقول فإن المُتصفح سيطلب من المُستخدم ملء الحقل قبل أن يتمكن من إرسال النموذج، وهذا ما يسمح باستبدال آلية التحقق من الحقول التي عادة ما نقوم بها باستخدام JavaScript، وهو ما يُحسن من تجربة المُستخدم قليلا كما أنه يُجنبنا عناء التحقق من الحقول بأنفسنا. خاصية required هي خاصية منطقية ويتم استخدامها بنفس طريقة استخدام autofocus على النحو التالي:

<input type="text" id="given-name" name="given-name" required>

لا يدعم خاصيةَ required سوى المتصفحات التالية: Opera 9.5+، Firefox 4+، Safari 5+، IE10 و Chrome5+، وعليه فإنك قد تحتاج إلى كتابة سكربت للتحقق من المدخلات على المُتصفحات/الإصدارات التي لا تدعمها (خاصة IE).

تُظهر كلا من متصفحات Opera، Chrome وFirefox رسالة خطأ في حال جرب المُستخدم إرسال النموذج من دون ملء الحقول المطلوبة، وتظهر رسائل الخطأ هذه مكتوبة بنفس اللغة التي يستخدمها المُستخدم على المتصفح (يعني إن كنت تستخدم الإصدار الفرنسي من متصفحك المُفضل فتسظهر رسالة الخطأ بالفرنسية). لا يقوم مُتصفح Safari بإظهار رسالة خطأ، وإنما ينقل التركيز Focus إلى الحقل المعني بالخطأ.

يتحكم كل مُتصفح في مظهر رسالة الخطأ وبالتالي فإن شكلها يختلف من مُتصفح إلى آخر، لكنه من غير المُمكن حاليا التحكم في هذا المظهر عبر CSS، إلا أن Chrome تُوفر آلية للقيام بذلك والتي يُمكن التعرف عليها بقراءة هذا المقال. يبقى التحكم في مظهر الحقل المعني برسالة الخطأ مُمكنا باستخدام شبه الفئة required: إضافة إلى إمكانية تغيير رسالة الخطأ ومظهرها بالاستعانة بـ setCustomValidity الخاصة بـ JavaScript.

هناك أمر واحد يجب أخذه بالحسبان وهو أن عملية التحقق التي يقوم بها المُتصفح لدى استخدامك لهذه الخاصية لا تُغنيك من القيام بعملية تحقق على جانب الخادم من تطبيقك.

للمزيد حول التحكم في مظهر نماذج HTML5:

HTML5 Form Validation

On the styling of forms

pattern

هذه الخاصية من شأنها أن تثير اهتمام الكثير من المُطورين. تقوم خاصية pattern بالتحقق من توافق قيمة الحقل مع تعبير قياسي (regular expression) خاصة بـ Javascript. تسمح هذه الخاصية من التحقق من أنماط مُعينة مما يتيح مثلا التدقيق في معرفات مُنتجات، أرقام فواتير، أرقام هواتف وما إلى ذلك. يُمكنك استخدام pattern للتحقق من أي نمط تريده.

إليكم مثالا حول كيفية استخدامها:

<label>Product Number:
<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
</label>

النمط المُبين في هذا المثال ينص على أن مُعرف كل منتج يجب أن يبدأ برقم واحد متبوع بثلاث حروف كبيرة (uppercase letters). يُمكنك أن تجد قائمة بأكثر الأنماط شيوعا على موقع HTML5 Pattern.

مثلما هو الحال مع required فإن المتصفحات الوحيدة التي تدعم pattern هي: Opera 9.5+، Firefox4+ ،Safari5+، IE10 وChrome5+، لكن مع التطور السريع لسوق المتصفحات فإنه من المحتمل أن تدعمها باقي المتصفحات لاحقا.

خاصية list والعنصر datalist

تسمح خاصية list بربط حقل مُعين بقائمة من الخيارات. يجب أن تكون قيمة الخاصية list متطابقة مع خاصية ID المُتعلقة بالعنصر datalist الموجود في نفس الصفحة. تُعتبر datalist عنصرا جديدا في HTML5 والتي تُمثل قائمة من الخيارات التي يُمكن ربطها بأحد عناصر النموذج، والتي تُعطي نتيجة مشابهة لما يحدث لدى استخدامك لخانة البحث على مُتصفحك، حيث يتم عرض خيارات لدى كتابة الكلمات المُراد البحث عنها.

المثال التالي يُبين كيفية استخدام كلا من list وdatalist:

<label>Your favorite fruit:
<datalist id="fruits">
  <option value="Blackberry">Blackberry</option>
  <option value="Blackcurrant">Blackcurrant</option>
  <option value="Blueberry">Blueberry</option>
  <!-- … -->
</datalist>
If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

يُمكن توفير تراجع أكثر رشاقة (superior graceful degradation) من مُجرد توفير عنصر option وذلك عبر إضافة عنصر select داخل الـ datalist. هذه الطريقة التي ابتكرها Jeremy Keith تتوافق بشكل مثالي مع مبادئ تصميم HTML5 التي تحدثنا عنها من قبل:

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits">
</label>

المتصفحات التي تدعم List وdatalist هي: Opera 9.5+ (الصورة المُبينة أسفله)، Chrome 20+، IE10، وFirefox4+.

multiple

يُمكننا أن نُحسن المثال السابق عبر الاستعانة بخاصية multiple والتي تسمح للمستخدم باختيار أكثر من قيمة واحدة من الـ datalist، ليصبح المثال السابق كالتالي:

<label>Your favorite fruit:
<datalist id="fruits">
  <select name="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </select>
If other, please specify:
</datalist>
  <input type="text" name="fruit" list="fruits" multiple>
</label>

لا يقتصر استخدام multiple مع datalist فقط، بل يُمكن استخدامها مع عدة حالات أخرى خاصة إذا ما تعلق الأمر مثلا بإدخال عناوين بريد إلكتروني أو لدى رفع أكثر من ملف كما هو مُبين في المثال التالي:

<label>Upload files:
<input type="file" multiple name="upload"></label>

يدعم multiple المُتصفحات التالية: Firefox3.6+، Safari4+،  Opera11.5+، Internet Explorer 10 وChrome4+.

تعليق المُترجم: لم يتسن لي تجربة آلية عمل multiple مع غير الملفات (يعني الحقول النصية فقط)، إن كنت تعلم كيف يتم القيام بذلك فاترك تعليقا حول الأمر تُبين فيها ذلك.

novalidate وformnovalidate

تُشير الخاصيتان novalidate وformnovalidate بأنه  يجب على المُتصفح أن لا يقوم بالتحقق من محتويات حقول النموذج لدى إرساله. كلا الخاصيتين منطقيتان boolean. يُمكن استخدام formnovalidate مع كل من أزرار الإرسال submit أو حقول الصور، أما خاصية novalidate فلا يُمكن استخدامها سوى مع العنصر form.

قد تتساءل ما هي الفائدة المرجوة من عدم التحقق من محتويات الحقول لدى إرسال النموذج، يُمكن استخدام formnovalidate على زر لحفظ بيانات نموذج مُعين دون الحاجة إلى التحقق من محتوياته (لإكمال النموذج لاحقا على سبيل المثال)، في هذه الحالة سنتمكن من حفظ النموذج بالرغم من أنه غير مُكتمل الحقول رغم أن هذه الحقول مطلوبة required لدى القيام بإرسال النموذج للمعالجة النهائية.

أما فيما يخص novalidate فُيمكن استخدامها مثلا في الحالات التي نود أن لا يتم التحقق من حقول النموذج لكننا نود الاستفادة من التحسينات الخاصة بتجربة المُستخدم والتي تقدمها خواص HTML5 الجديدة (نود مثلا أن يتم إظهار لوحة مفاتيح رقمية للمستخدمين عبر الهواتف الذكية لدى انتقالهم إلى حقل مُعين لكن لا نود أن يتم اقتصار ما يقومون بإدخاله على الأرقام فقط).

المثال التالي يُبين كيفية استخدام formnovalidate:

<form action=”process.php”>
    <label for=”email”>Email:</label>
    <input type=”email” name=”email” required>
    <input type=”submit” formnovalidate value=”Submit”>
</form>

المثال التالي يخص حول استخدام novalidate:

<form action=”process.php” novalidate>
      <label for=”email”>Email:</label>
      <input type=”email”  name=”email”  required>
      <input type=”submit” value=”Submit”>
</form>

form

يتم استخادم خاصية form لربط كل من input ،select أو textarea بنموذج مُعين (النموذج الذي تتبعه). استخدام خاصية form يسمح للمكونات سابقة الذكر أن لا تكون ذُرّية مباشرة (direct children) للنموذج الذي تنتمي إليه، مما يسمح بوضعه في مكان آخر داخل نفس الصفحة. قد يكون الاستخدام الأكثر شيوعا لهذه الخاصية هو ربط الأزرار الموجودة داخل جداول بالنماذج.

<input type="button" name="sort-l-h" form="sort">

formaction، formenctype، formmethod وformtarget

لدى كل من Formaction، formenctype، formmethod وformtarget ما يُقابلها من خصائص form والتي سبق لك أن تعاملت معها في HTML4. تم استحداث هذه الخصائص بشكل أساسي لأنه من المُمكن أن نحتاج في نماذجنا actions مختلفة تختلف باختلاف الأزرار التي نقوم بإرسال النموذج من خلالها بدل أن نقوم بإنشاء أكثر من نموذج للقيام بذلك.

إليكم وصفا سريعا لهذه الخصائص الجديدة:

formaction

تحدد خاصية formaction  الملف أو التطبيق الذي سيتولى مهمة استقبال النموذج لدى إرساله حيث أنها تشغل نفس الوظيفة التي تشغلها خاصية action التي نضيفها إلى العنصر form. يقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image"). لدى إرسال النموذج يقوم المُتصفح بالتحقق أولا من وجود خاصية formaction وفي حال ما إذا لم يجدها يقوم بالبحث حينها على الخاصية action.

<input type="submit" value="Submit" formaction="process.php">

formenctype

تُحدد خاصية formenctype الطريقة التي يتم ترميز البيانات باستخدام POST. لهذه الخاصية نفس مفعول خاصية enctype الخاصة بالعنصر form ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image"). إذا لم يتم تضمين هذه الخاصية فإنه يتم اعتماد قيمتها القياسية application/x-www-formurlencoded .

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

Formmethod

تُحدد خاصية formmethod فعل HTTP المُستخدم لإرسال النموذج  (GET،  POST،  PUTأو  DELETE)، لهذه الخاصية نفس مفعول خاصية method الخاصة بالعُنصر form، ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image").

<input type="submit" value="Submit" formmethod="POST">

Formtarget

تُحدد خاصية formtarget النافذة التي ستظهر نتيجة النموذج، لهذه الخاصية نفس مفعول خاصية target الخاصة بالعُنصر form، ويقتصر استخدامها على الأزرار فقط سواء كانت submit أو صورا (type="submit"  أو  type="image").

<input type="submit" value="Submit" formtarget="_self">

خلاصة

استعرضنا في هذا المقال جُملة من الخصائص الجديدة التي تساعد على توفير تجربة مُستخدم أفضل للزائر وتساعدك على تقليص زمن كتابة نماذجك، لا تزال هناك بعضٌ من الخصائص الجديدة والتي سنتسعرضها في مقال قادم مع جُملة من أنواع المُدخلات الجديدة.

يُمكنك أن تجد نموذجا تجريبيا يستخدم بعضا من الأمثلة التي استعرضناها في هذا المقال هنا.

أشرنا خلال هذا المقال إلى المتصفحات التي تدعم الخواص التي استعرضناها، لكن مع الإصدارات الجديدة لكل متصفح والتي يتم إطلاقها بوتيرات متسارعة فإنه من الصعب معرفة ما الذي يدعمه هذا المتصفح وما الذي لا يدعمه ذاك المتصفح، لكن إن أردت البقاء على اطلاع فعليك زيارة المواقع التالية: can I use …، FindMeByIP ومحرك بحث Wufoo الخاص بالـ HTML5.

ترجمة –وبتصرف- للمقال HTML5 forms introduction and new attributes لصاحبه Richard Clark

هذا المقال عبارة عن مُقتطف من الفصل السادس من كتاب Beginning HTML5 and CSS3: The Web Evolved.

تعليق المترجم: قد تكون ترجمة بعض المُصطلحات التقنية في هذا المقال غير دقيقة، أو أن هناك ترجمات أفضل لها، إن لاحظت أيا منها فلا تتردد في مراسلتي أو الإشارة إليها في التعليقات.