إستكملت عدة مواضيع سابقة تتحدث عن النماذج في XHTML/HTML وتطرقنا فيها إلى كتابة النماذج ثم تنسيق النماذج البريدي وأخيراً إلى تطبيق واحد حول هذا الموضوع، ويمكنك الرجوع إليها عبر هذه الروابط:

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

تحديد نمط التصميم

خلال عملك لنموذج HTML أكثر شيء يجب الإلمام به هو نمط التصميم الخاص بالنموذج، شكل النموذج سيعتمد على سهولة إستخدامه ومعرفة سهولة معرفة الحالات التي تظهر على المستخدم أثناء تعبئته للنموذج.

حالات التي يمكن تظهر مثل:

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

يمكن الإستفادة أكثر من هذه المواضيع وأنماط التصميم المعروضة في هذه المواقع:

نماذج موجودة في مواقع الويب

لدينا أمثلة كثيرة جداً على تأكيد النماذج وبعد التأكيدها مع الاخطاء الظاهرة وطريقة ظهور الأخطاء في النموذج، هذه عدة نماذج تابعة لمواقع مشهورة التي نعرفها جميعاً:

Yahoo

showcase_yahoo

Delicious

showcase-delicious

Digg

showcase-digg

mint

showcase-mint

Basecamp

showcase-basecamp

DeviantART

showcase-deviantART

تنسيق نموذج HTML

الآن سنتحدث عن أفكار لتنسيق نماذج HTML التي لم نذكرها في الدروس السابقة.

إخفاء اللون الأصفر من الحقل

هناك البعض وليس الكل ممكن يستخدمون إضافة Google Toolbar تظهر لهم حقول معينة باللون الأصفر وحتى لا يستطيع حلها بتنسيق CSS عادي وخاصة الحقول التي تحمل إسم name و email وphone وإحتمال وجود حقول أخرى، فقط لتوضيح المشكلة في البداية لاحظ بعض الحقول الحقول الملونة بالأصفر التي كنت أشاهدها:

yellow-input-problem

وحلها بسيط عن طريق CSS ولكن بهذه الطريقة التي تظهر في شفرة CSS:


input {
background: #FFFFFF !important;
}

فقط غير لون خلفية الحقل إلى اللون الذي تريده إضافةً إلى تأكيد لون الحقل بإضافة !important.

عدم إظهار الكلمات التي تم كتابتها مسبقاً

إذا أردت عدم إظهار الكلمات السابقة التي كتبت بإسم حقل معين مثل name أو email إضف خاصية autocomplete إلى الحقل، كما هي شفرة HTML:

<label>الإسم</label>
<input name="name" type="text" autocomplete="off" />

طريقة تأكيد حقول من نوع radio و checklist في تطبيق الويب

عند التعامل مع تطبيق ويب مكتوب بأي لغة برمجية أغلب الأحيان تجد صفحة إختيارات أو إعدادات موجودة في التطبيق (مثال على ذلك: حقل لإختيار إتاحة أو إغلاق التعليقات في مواضيع المدونة) مثل هذا الحقل يتم إستدعاء قيمته من قاعدة البيانات وعرضه كحقل من نوع radio ويمكن تطبيقه في حقل من نوع checklist أيضاً، شفرة HTML عادية لحقل إختياري من نوع radio:

<label>هل تريد الموافقة على التعليقات قبل نشرها؟</label>
<input type="radio" name="comment_case" value="yes" /> نعم
<input type="radio" name="comment_case" value="no" /> لا

الآن بعد عمل إستدعاء للمعلومات من قاعدة البيانات من نوع MySQL ضمن تطبيق ويب مكتوب بواسطة PHP، علماً بأن الشفرة السابقة موجودة ضمن التطبيق (حقل “هل تريد الموافقة على التعليقات قبل نشرها؟”)

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

<input type="radio" name="comment_case" value="yes" <?php if ($row['option_value'] == 'yes') echo "checked=\"checked\"" ?> /> نعم
<input type="radio" name="comment_case" value="no" <?php if ($row['option_value'] == 'no') echo "checked=\"checked\"" ?> /> لا

المتغير row يمثل قيم الحقول option_value، option_name وغيرها في أحد جداول قاعدة البيانات (مثل جدول options)، إذا كانت قيمة الحقل تساوي “yes” في قاعدة البيانات فيتم التأشير على حقل “نعم”، المثال بسيط جداً فقط أريد توضيح فكرة خاصية checked عند تأكيد حقل معين في تطبيق ويب، لهذا لم أدخل في تفاصيل شفرة PHP كاملة.

تصميم حقل من نوع submit (زر التأكيد)

عادةً يرغب أحدنا بتغيير شكل زر التأكيد الخاصة بالنموذج والذي يحمل الإسم submit (غالباً) وهو من نوع submit، الشكل التقليدي لهذا الزر يحتوي خصائص ثابتة مثل الحدود ولون الخلفية وتختلف من متصفح إلى آخر (حسب نوع محرك المتصفح)، ولكن يسهل تغييرها عبر خصائص CSS لدينا مثال بسيط هنا  وبسيط جداً وهو تغيير شكل الزر من ناحية الخلفية والحدود، شفرة CSS التالية هي تعديل لزر submit:

input[type=submit] {
border: 0; /* النتيجة هي عدم وجود حدود للزر */
background: url(submit.png) center no-repeat; /* إضافة صورة إلى الزر منسقة */
font: bold 15px Arial, Helvetica, sans-serif; /* وصف الخطوط المستخدمة في الزر */
color: #242424; /* لون النص في الزر */
}

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

يمكنك رؤية المثال السابق على تنسيق زر submit.

تصميم الحقل كامل

بالنسبة لتنسيق حقل نماذج الويب شرحت في درس سابق بعنوان تنسيق نموذج بريدي ولكن إضافةً إلى ذلك سنأخذ حركات بسيطة جداً يمكن الإستفادة منها عند التنسيق، الحركة الأولى هي عمل تأثير تمرير الفأرة على الحقل (تماماً مثل الروابط) كما هي في شفرة CSS هذه:

input { border: 1px solid #000000; }
input:hover { border: 1px solid #ffffaa; }

أما الحركة الأخرى وهي عند الضغط على الحقل كما هي في شفرة CSS:

input { border: 1px solid #000000; }
input:focus { border: 1px solid #ffffaa; }

يمكنك رؤية المثال السابق على التأثيرين.