لوحة المتصدرين

تُعَدّ الأشياء التي تشتّت انتباهك ألدّ أعدائك ككاتبٍ مستقل. وهي مشكلةٌ فعلًا لأنّ العمل من المنزل يعني أنّك محاطٌ بالكثير من الأشياء التي تسترعي انتباهك. وقد تمرّ بوقتٍ عصيب إذا لم تضبط الأمور. على الرّغم من أنّ تعامل المستقل مع التسويف أمرٌ صعب، إلّا أنّه ممكن. يواجه الجميع هذه المشكلة، كلٌّ بطريقته الخاصّة، لذا عليك أن تجد الطّريقة التي تناسبك وتتمسّك بها. لنتحدّث عن الأشياء التي تساعدني في محاربة التسويف في الكتابة الحرّة، سأوضح لك ما يجعلها مناسبةً لي، وآمل أن تساعدك أيضًا. 1. طوّر روتينًا خاصًا بالعمل عندما أقول أنّني مستقل، يقول الآخرون دائمًا لا بدّ أنّه أمرٌ ممتع أن أعمل من المنزل وأن آخذ إجازةً في أيّ وقتٍ أريد. ثمّ ينظرون إليّ كما لو أنّني مجنون عندما أقول لهم أنّ لديّ جدول عمل، مثلهم تمامًا. والمشكلة هي أنّ فكرة العمل في أيّ وقتٍ تريد قد تبدو رائعة، لكنّ تنتج عنها عاداتٌ سيّئة من النّاحية العمليّة. وإذا لم تجبر نفسك على بدء العمل، فسوف تواجه الكثير من الأمور التي تشتّت انتباهك. أبدأ العمل في هذه الأيّام بين السّاعة 8-10 صباحًا، بهدف الانتهاء من العمل عندما تصبح السّاعة 4 بعد الظّهر. وبهذه الطّريقة، يكون لديّ طاقةٌ كافية لبقيّة اليوم، ويمكنني الذّهاب إلى النّادي الرّياضي والتّسكّع مع الأصدقاء إذا رغبت في ذلك. والأهمّ هو أنّ وجود برنامجٍ محدّد يعني أنّني أعرف أنّ عليّ تجنّب التسويف خلال ذلك الوقت. يناسبني هذا الأسلوب، لكنّني أنصحك أن تجرّب عدّة إجراءات روتينيّة مختلفة إلى أن تصل إلى الرّوتين المناسب لك. وعندما تتوصّل إلى روتينٍ تحبّه، التزم به وستدرك أنّ مواجهة تشتيت الانتباه قد أصبحت أسهل بكثير. 2. احجب المواقع المشتِّتة وأبعد هاتفك الذّكي عنك يُعتبر الإنترنت حليفًا لك ككاتبٍ مستقل لأنّه يُمَكّنك من إيجاد مشاريع، وكسب العيش، والقيام بجميع أبحاثك. لكنّه في الوقت نفسه ألدّ أعدائك لأنّه يحتوي على الكثير من الأمور المشتّتة للانتباه، أكثر ممّا تتصوّر. عندما كنت أكتب هذا المقال، تشتّت انتباهي بزيارة موقعٍ Reddit، واستغرق ذلك حوالي 20 دقيقة. وعلى الرّغم من أنّه قد لا يبدو وقتًا طويلًا، لكن عندما تبدأ بإضافة جميع الأمور المشتّتة للانتباه إليه، تدرك أنّك تضيع ساعاتٍ من وقت العمل كلّ يوم. وبالنّسبة لي، فإنّ حجب المواقع التي تشتّت انتباهي من البداية أمرٌ مفيدٌ للغاية. ولتحقيق ذلك، أستخدم إضافة لمتصفّح كروم اسمها Strict Workflow، وتستند إلى تقنيّة Pomodor. وعندما أضغط عليها، تحجب الإضافة جميع تلك المواقع المزعجة التي تضيع الوقت لفتراتٍ تمتدّ 25 دقيقة، لئلا يكون لديّ خيارٌ سوى العمل: بالنّسبة إلى هاتفي الذّكي، فأنا أتركه في غرفةٍ أخرى عندما ينبغي عليّ أن أعمل. وبهذه الطّريقة، إذا كنت أريد تضييع الوقت، ينبغي عليّ النّهوض، والخروج من المكتب، والحصول عليه. والأمر ليس متعلّقًا ببذل الجهد على الإطلاق، إلّا أنّ هذه الخطوات الإضافيّة تذكّرني أنّ عليّ الالتزام بالعمل. 3. غيّر المشهد المحيط بك من وقتٍ لآخر كنت في الماضي أقسّم وقتي بين المنزل ومساحة عملٍ مشتركة عندما يحين وقت الكتابة. لكنّني أبدأ عادةً بالشّعور بالملل بعد بضعة أشهرٍ من الرّوتين نفسه. واستغرق ذلك منّي بعض الوقت، لكنّني أدركت أنّني أحبّ تغيير المشاهد المحيطة بي عندما أعمل. واليوم لديّ قائمةٌ بالمقاهي، ومساحات العمل المشتركة، والمكتبات التي أعرف أنّني سأشعر بالرّاحة فيها وأنّني سأتمكّن من التّركيز فيها. وعندما لا أشعر برغبةٍ في العمل من المنزل، أختار إحداها وأذهب إلى هناك. على الرّغم من أنّ برنامج عملي يبقى نفسه، إلّا أنّ النّشاط البسيط المتمثّل في الذّهاب إلى مكانٍ جديد يساعدني في التّركيز أكثر على عملي، ويُخرج ما لديّ من إبداعات. بالإضافة إلى ذلك، يُحضِر لك الآخرون قهوتك بدلًا من أن تصنعها بنفسك، لذا فالأمر مفيدٌ من جميع الجوانب. 4. كافئ نفسك على الحفاظ على تركيزك على الرّغم من جميع الأساليب التي أستخدمها للحفاظ على تركيزي، لكن في بعض الأحيان، يكون الشيء الوحيد الفعّال أن أَعِدَ نفسي بمكافأةٍ للحفاظ على تركيزي. وعادةً ما تكون تلك المكافأة متعلقةً بالطّعام. إذا كان هنالك الكثير من العمل الذي ينبغي عليّ إنجازه خلال اليوم، فقد أقول لنفسي أنّني عندما أنتهي فإنّني أستحقّ طلب بيتزا، تناول القليل من الكعكة بالشّوكولا، أو تناول المثلّجات. لا يمكنك طبعًا أن تكافئ نفسك دائمًا بالبيتزا أو المثلّجات، فبالإضافة إلى أنّه مكلفٌ ماديًا، سيؤثّر على صحّتك أيضًا. لكنّ هذا الأسلوب يصنع المعجزات بالنّسبة لي عندما يكون لديّ يومٌ حافل بشكلٍ خاص وينبغي أن يبقى تركيزي منصبًا على العمل. 5. حاول أن تتواصل مع مستقلّين آخرين يمكن أن يساعدوك في مواصلة العمل يُعتَبَر عدم وجود ضغطٍ من الزّملاء لإنجاز العمل من أبرز الجّوانب السلبيّة للعمل من المنزل. لا يمكنك التسكّع طوال اليوم حين تعمل في مكتب، لأنّك ستُطرَد بسرعةٍ إذا فعلت ذلك. أمّا في البيت، لن يهتمّ أحدٌ إذا توقّفت عن العمل لساعةٍ لمتابعة ما فاتك من قائمة الانتظار الخاصّة بك في Netflix. إنّ العمل في أيّ مكانٍ خارج المنزل خطوةٌ أولى هامّة. لكن أنصحك أن تجرّب التّعرّف على مستقلّين آخرين ليكون لديك زملاء في العمل يمكن أن يساعدوك في الحفاظ على تركيزك. إنّ الحديث عن اجتماع المستقلّين أسهل من القيام به، لأنّنا نتنقّل كثيرًا ونعمل بمفردنا. ومن تجربتي، هنالك ثلاث طرقٍ رائعة للتّواصل إذا لم تكن تعرف أيّ مستقلّين آخرين في منطقتك: ابحث عن ملتقيات حول مساحات العمل المشتركة، وهي رائعة لتكوين الصّداقات. احضر المناسبات الاجتماعيّة التي تقدّمها مساحة العمل المشتركة المفضّلة لديك. حاول إقناع بعض أصدقائك بأن يصبحوا مستقلّين. والطّريقة الأخيرة فعّالة إذا كان أصدقائك يفكّرون في تجربة العمل الحر فقط. وبالنّسبة لي، كانت أوّل طريقتين مفيدتين للغاية عندما بدأت العمل من مدينةٍ جديدة. إنّ الحصول على صديقٍ أو صديقين تعمل إلى جانبهم بين الحين والآخر ليس أمرًا صعبًا، وستزداد إنتاجيّتك بشكلٍ كبير عندما تحصل عليهم. الخلاصة إذا كنت مثلي، فأنت أشبه بالآلة عندما تكون مركّزًا بشكلٍ كامل. لكنّ المشكلة هي أنّ الدّخول في هذه المرحلة ومحاربة المماطلة في الكتابة المستقلّة أصعب بكثير ممّا تتخيّل. يتطلّب الأمر الانضباط، لكن يمكن أن تصبح أكثر إنتاجيّةً ممّا تتوقّع من خلال بعض العمل. وإليك ما يفعله الانضباط لي بالنّسبة لمحاربة التسويف ككاتبٍ مستقل: الالتزام بروتين العمل التخلّص من العمل السّهل في البداية حجب المواقع المشتِّتة وإبعاد الهاتف تغيير المشاهد التي تحيط بي بين الحين والآخر مكافأة نفسي على الحفاظ على تركيزي التواصل مع مستقلّين آخرين يمكن أن يساعدوني في مواصلة العمل هل لديك أيّ أساليب أخرى تستخدمها للتّغلّب على التسويف ككاتبٍ مستقل؟ شاركها معنا من خلال التّعليقات أدناه. ترجمة -وبتصرّف- للمقال [ 5 Tips to Beat Procrastination as a Freelance Writer] لصاحبه Alexander Cordova

مما لا شك فيه هو أنك تتعامل على الأقل مع نموذج واحد على الويب كل يوم، سواء كان ذلك خلال استخدامك لمحرك بحثك المُفضل، تسجيلك للدخول إلى بريدك الإلكتروني، أو حتى الدخول إلى فيس بوك. يُعتبر التعامل مع النماذج 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 والتي سنقوم باستعراضها في هذا المقال وهي كالآتي: placeholderautofocusautocompleterequiredpatternlistmultiplenovalidateformnovalidateformformactionformenctypeformmethodformtargetplaceholderأول هذه الخواص هي placeholder والتي تسمح لنا بإضافة نص توضيحي بنفس الطريقة التي كنا نعملها مع خاصية value في نماذج HTML4. يجب استخدام هذه الخاصية مع النصوص التوضيحية القصيرة فقط، ويُفضل الاستعانة بخاصية title لكل النصوص التوضيحية الأطول. الاختلاف الحاصل مُقارنة بالطريقة المُتبعة مع نماذج HTML4 هو أنه لا يتم استعراض النص إلا في حالة ما إذا كان الحقل فارغا ولم يستقبل "التركيز" Focus (يعني لم يتم اختياره بالنقر عليه مثلا أو بالانتقال إليه عبر Tab من حقل آخر)، وبُمجرد أن يستقبل الحقل التركيز فإن النص يختفي، وهو أمر مُشابه لحقل البحث الموجود على مُتصفح Safari مثلا. حقل البحث على متصفح Safari مع وبدون التركيز focusدعونا نُلقي نظرة على طريقة استخدام placeholder: <input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">هذا كل ما في الأمر. قد يقول قائل: "وما الرائع في هذا الأمر؟ ألِفتُ القيام بنفس الأمر عبر استخدام JavaScript طيلة السنوات الماضية" وذلك أمر صحيح، لكن مع HTML5 تأتي هذه الخاصية مدعومة بشكل مُضمن في المُتصفح، مما يعني أنها ستعمل من دون أية سكربتات إضافية، وتعمل على جميع المتصفحات حتى ولو كان JavaScript مُعطلا عليها. دعم خاصية placeholder على متصفح Chrome مع ظهوره في الصورة الأولى واختفائه في الثانيةستقوم المتصفحات التي لا تدعم 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 إلى الحقل المعني بالخطأ. حقل يملك خاصية required ورسالة الخطأ التي تطالب بملئه على مُتصفح operaيتحكم كل مُتصفح في مظهر رسالة الخطأ وبالتالي فإن شكلها يختلف من مُتصفح إلى آخر، لكنه من غير المُمكن حاليا التحكم في هذا المظهر عبر 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 والتي تُمثل قائمة من الخيارات التي يُمكن ربطها بأحد عناصر النموذج، والتي تُعطي نتيجة مشابهة لما يحدث لدى استخدامك لخانة البحث على مُتصفحك، حيث يتم عرض خيارات لدى كتابة الكلمات المُراد البحث عنها. اقتراحات محرك بحث Google على متصفح Safariالمثال التالي يُبين كيفية استخدام كلا من 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+. عُنصر datalist كما يظهر على مُتصفح Operamultipleيُمكننا أن نُحسن المثال السابق عبر الاستعانة بخاصية 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. تعليق المترجم: قد تكون ترجمة بعض المُصطلحات التقنية في هذا المقال غير دقيقة، أو أن هناك ترجمات أفضل لها، إن لاحظت أيا منها فلا تتردد في مراسلتي أو الإشارة إليها في التعليقات.