هذا الدرس تابع لآخر درسين كتبتهم حول النماذج في XHTML وسأكمله عبر هذا الدرس كما هو واضح من العنوان كيفية تنسيق نموذج XHTML ، بالنسبة للنماذج كما نعلم فإن تقسيم الحقول إلى مجموعات يتم عبر الوسم fieldset ، يمكنك إستخدامه مرة واحدة متضمناً عدة حقول وأيضاً متضمناً مجموعة آخرى لحقول آخرى ، هناك أكثر من طريقة تستطيع تنسيق النموذج كما يحلو لك وبدون إستخدام الأوسمة fieldset ، legend ، label  .. هذا إذا أردت عمل شيء بسيط وسريع ولكن فضلنا إستخدام كتابة النماذج بطريقتها الأساسية كما بيّنت في الدروس الماضية حول النماذج ، نسقها مثل ما تريد سأوضح فقط بعض الطرق المستخدمة إضافةً لنمطين قمت بتصميمهم كمثال.

التسيق التقليدي للنموذج

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

نموذج تقليدي

إستخدمت الوسم label و input فقط إضافةً إلى قيمة block ضمن خاصية display ضمن الوسم label :

label { display: block; }

تنسيق الحقول في النموذج على مستوى واحد

أحب هذا النوع من الحقول 😀 وأقصد فيه وضع الحقول مع وصفها ضمن نطاق أو مستوى واحد ، فقط يتم فصل الحقول عن بعضها ، مثال على ذلك مع تنسيق CSS:

نموذج بريدي على مستوى واحد من الحقول

تم كتابة الشفرة بنفس الأوسمة التي كتبتها ضمن المثال الأول (التنسيق التقليدي) ، ولكن التغيير فقط في CSS حيث إستخدمنا الخاصية float وdisplay في تنسيق الحقول كما هو ملاحظ في الصورة ، أيضاً ستلاحظ الوسم em تم إعطاءه خاصية position وقيمة absolute وذلك لتثبيته في أي مكان نريده وبإستخدام الخاصية left قمت بتثبيته قرب الحقل أو الوسم input.

ولكن إذا قمت بتصغير أو تغيير قياس الشاشة سيتغير مكان الوسم em والسبب أن قيمة absolute تجعله يتحرك في أي مكان في مساحة الموقع إضافةً إلى الخاصية left ولهذا قمنا بإعطاء الوسم fieldset (ويمكن الوسم form) قيمة relative أي أن أي قيمة من قيم الخاصية position المندرجة ضمن الوسم fieldset ستقاس ضمن حدود الوسم fieldset نفسه أي قريب من أي عنصر من عناصره ، سأحاول شرح الخاصية position أكثر مع أفكار أخرى لطريقة عمله في تدوينه أخرى إن شاء الله.

طبعاً الشكل السابق غير منسق كما ينبغي حيث يمكنك تعديل مكان وصف الحقول إلى اليسار وهذه الطريقة تلفت الإنتباه والتركيز على الحقول مباشرةً بعد قراءتها أفضل من الطريقة السابقة ، وإستخدمت الخاصية text-align في CSS:

نموذج منسق على مستوى واحد

إستخدام القوائم في النموذج

يمكنك أن تستخدم قوائم XHTML في كتابة النموذج وسيسهل عليك الفصل بين الحقول بدون كثرة إستخدام خواص مثل margin أو padding أو display ، شفرة XHTML للنموذج:

<form>
<fieldset>
<legend>نموذج</legend>
<ol>
<li>
<label>...</label>
<input name="..." /></li>
<li>
...</li>
</ol>
</fieldset>
</form>

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

أشكال أخرى للنماذج

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

إستخدام الملاحظات وتعيين الحقول المهمة

وهذه النقطة مهمة إذا كانت هناك حقول مهمة وحقول إختيارية ، أو كتابة ملاحظات بجانب الحقول طريقة منسقة مثل إستخدامها جميعاً على مستوى واحد عن طريق إستخدام الخاصية float ، نعين الحقول المهمة بإستخدام الوسم em ومن خلال شفرة CSS تستطيع تنسيقه وتلوينه ووضعه في المكان الذي تريده ، إذا كنت تريد تحريكه في أماكن أبعد من الحقول مثل وضعه في اليسار بدلاً من اليمين بدون التأثير على مكان الحقل ، وذلك عن طريق إستخدام الخاصية position وخصائص أخرى مثل top ، left ، right ،  bottom كما بينتها سابقاً.

وإذا تغير موقع الوسم عند تعديل الشاشة قم بإعطاء الوسم fieldset أو form قيمة relative الموجودة في الخاصية position ، يمكنك وضع الملاحظات إما ضمن الوسم em أو span إذا أردت ذلك ، (يكثر إستخدام الوسم em).

مراعاة المسافات بين الحقول

أثناء تصميمك للنموذج يجب مراعاة المسافات بين الحقول وأيضاً وضع الملاحظات أو تعيين الحقول المهمة في أماكنها المناسبة فمثلاً في قابلية الإستخدام يفضل وضع تعيين الحقول المهمة إما عن طريق علامة النجمة الحمراء * (مو لازم تكون نجمة 😀 تستطيع وضع صورة أو شيء آخر يدل على أن الحقل مطلوب تعبئته) يجب أن تكون ما بين الحقول ووصفه أي قبل الحقل مباشرةً بدلاً أن يكون بعده:

موقع الوسم em

كيف يمكن معالجة مشكلة إزلاق زر التأكيد أو submit عن مكانه سواء كان عبر عدة متصفحات أو عند تكبير وتصغير الصفحة؟ يمكنك حلها عن طريق إعطاء الكلاس input#submit قيمة block ضمن الخاصية display ، إستخدام هذا الحل إن صادفتك مشكلة في متصفح الإكسبلورر ، ولكن إذا تكررت المشكلة قم بإعادة كتابة تنسيق الوسم input مرة أخرى.

مصادر أخرى تفيدك

مواضيع ودروس أخرى يمكنك الإستفادة منها حول النماذج وتنسيقها: