موضوعنا اليوم يتحدث عن النماذج(Forms) في XHTML ، النماذج لها إستخدامات كثيرة في الصفحات مثل نموذج مراسلة ، نموذج تسجيل أو تسجيل دخول ، .. إلخ .. سنتحدث عن كيفية كتابتها في XHTML وخاصة الأوسمة المتعلقة بها التي تستطيع عمل عناصر عن طريقها.

عند عمل نموذج في XHTML يكون ذلك في البداية عن طريق الوسم form والذي سيحتوي على بقية محتويات النموذج هناك طرق أسهل لعمل النماذج ولكن سنخصص هذا الموضوع بالتفصيل قليلاً سنشرح الخصائص المتعلقة بكل وسم نريده وأشكال لنماذج وكيفية عملها بإستخدام CSS ( سيأتي لاحقاً).

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

  • Method : وتعني الطريقة التي سترسل بها القيم وتتكون من get و post.
  • Action : الصفحة التي سترسل لها القيم مثل: post.php

وهذه شفرة XHTML الخاصة بالعنصر form:

<form action="#" method="post">
.. محتوى النموذج سيكون هنا ..
</form>

ما الأشياء التي تحوي العنصر form بالنسبة للشفرة السابقة؟ يمكننا عمل مجموعة حقول (أكثر من مجموعة حقول) فمثلاً لو كانت صفحة تسجيل ، نستطيع عمل مجموعة خاصة لحقول تتكون من حقل خاص بإسم المستخدم وحقلين لكلمة المرور وآخر للبريد الإلكتروني ومجموعة حقل أخرى إختيارية تتكون تاريخ الميلاد وإسم البلد ، ..إلخ ، نستطيع عمل مجموعة حقول عن طريق الوسم fieldset ويأتي تريجياً بعد العنصر form:

<form action="#" method="post">
<fieldset>
..
</fieldset>
</form></pre>
ثم نأتي بعدها لوضع عنوان خاص بهذه المجموعة التي تحتوي الحقول التي نريدها ويكون ذلك عن طريق الوسم legend:
<pre lang="xhtml"><form action="#" method="post">
<fieldset>
<legend>نموذج تسجيل</legend>
...
</fieldset>
</form>

الآن كتبنا الأشياء الرئيسية للنموذج نأتي بعدها لكتابة الحقول ، طبعاً يستطيع مصمم مواقع الويب أن يكتفي بكتابة حقل مع فقرة p ، ولكن سنضع طريقة أفضل وأساسية ، أولاً سنكتب إسم الحقل الذي نريده عن طريق الوسم label.

ويتكون هذا الوسم من خاصية بإسم for ويمكن وضع إسم الحقل الرئيسي في هذا المكان. (يمكن إعتباره كـ id خاص بإسم الحقل مثل ما نقوم بوضعه في أوسمه عدة كـ div ، input ، .. وغيره ، ولكن بدلاً من أن نضع id للوسم label نضع for )

بعدها مباشرةً نكتب الحقل عن طريق الوسم input والذي سيتم إدخال أي قيمة يريدها المستخدم عن طريقه يتكون هذا الوسم من خصائص مثل:

  • Name: نكتب إسم الحقل بداخله.
  • Type: نوع الحقل ويتكون من عدة قيم مثل text , checkbox , radio , hidden , .. وغيره ، سيتم شرحها لاحقاً.
  • Value: ويتكون من قيمة الحقل تستطيع إبقاءه فارغاً ، ولكن ستحتاج هذه الخاصية عند كتابة حقل من نوع submit.

شفرة الـ XHTML التي تتكون من الحقل بالكامل تكون بهذا الشكل:

<form action="#" method="post">
<fieldset>
<legend>نموذج تسجيل</legend>
<label for="username">إسم المستخدم</label>
<input id="username" class="text" name="username" type="text" />

<label for="password">كلمة المرور</label>
<input id="password" class="text" name="password" type="password" />

<label for="email">البريد الإلكتروني</label>
<input id="email" class="text" style="background-color: #ffffa0;" name="email" type="text" />
</fieldset>
</form>

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

روابط لها صلة في موضوع النماذج: