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

أنواع الحقول

بالنسبة للحقول وأنواعها ، تحتوي خاصية type على قيم عدة ولها إستخدامات عدة أيضاً والتي تتكون من هذه القيم:

  • buttom ، نوع الحقل عبارة عن زر عادي لا يؤثر أساساً في النموذج.
  • checkbox ، نوع الحقل عبارة عن صندوق صغير يمكن الإشارة إليه أو تركه.
  • file ، نوع الحقل مستخدم في تصفح ملفات ضمن الجهاز وإختيار ملف معين.
  • hidden ، نوع الحقل سيكون مخفي وقد يحتوي على قيم خاصة للإستفادة منها في الصفحة أو المرحلة القادمة.
  • password ، نوع الحقل عبارة عن مساحة محدودة لكتابة كلمة المرور.
  • radio ، نوع الحقل عبارة عن صندوق صغير ومكور يمكن الإشارة إليه والإشارة إلى قيمة واحدة من قيم متعددة متكونة من هذا النوع.
  • reset ، نوع الحقل عبارة عن زر لتفريغ الحقول السابقة.
  • submit ، نوع الحقل عبارة زر لتأكيد إستلام النموذج.
  • text ، نوع الحقل عبارة عن مساحة محدودة للكتابة.
  • image ، نوع الحقل عبارة عن صورة لإستخدامها في تأكيد إستلام النموذج ،يمكنك إستخدام submit بديلاً عنها وتنسيقها بواسطة CSS.

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

input-types

إنشاء مساحة نصية

هل تريد عمل مساحة واسعة يستطيع المستخدم عن طريقها كتابة ملاحظات أو رسالة أو حقل مخصص آخر مثلاً؟ يكون ذلك عن الوسم textarea ويمكنك التحكم بمساحته ( طوله وعرضه) إما عن طريق CSS أو عن طريق خصائصه مثل:

  • Name: إسم الحقل
  • Cols: الأعمدة أو بمعناه طول الحقل
  • Rows: الصفوف أو بمعناه في عرض الحقل.

وتتكون شفرة الـ HTML التي تحتوي عنصر textarea بالكامل بهذا الشكل:

<label for="comment">كتابة تعليق</label>
<textarea id="comment" name="comment"></textarea>

قائمة إختيارات

يمكنك توفير قائمة للخيارات لإستخدامها في أغراض عدة في النموذج مثل عرض قائمة بأسماء البلدان لتحديد البلد الذي تقيم فيه أو تحديد طرق معينة مثل طريقة الدفع وغيره ، نقوم بعملها عن طريق الوسم select ، وبعد كتابته كعنصر ستكتب الخيارات بواسطة الوسم option وتكتبها عدة مرات حسب قائمة الإختيارات التي تريد توفيرها ، شفرة HTML تكون هكذا:

<label for="selects">قائمة الخيارات: كيف تعرفت على الموقع؟</label>
<select name="wOptions" size="1">
<option value="searchEngine">محركات البحث</option>
<option value="newspapers">الجرائد أو المجلات</option>
<option value="byFriend">عن طريق أحد الأصدقاء</option>
</select>

خصائص أخرى

آخر نقطة لدينا وهي بعض الخصائص التي توفرها لنا XHTML في النماذج عدة أوسمة لها مثل textarea,select,input, .. تستطيع إستغلالها في أمور عدة ستعرفها عندما تجربها وسأقوم بكتابتها وكتابة نبذه عنها ومثال توضيحي بسيط لها.

checked ، نستخدم هذه الخاصية لتثبيت التحديد على إختيار من الإختيارات التي كتبناها بواسطة الحقول التي من نوع radio و checkbox.

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

disabled ، نستخدم هذه الخاصية لإلغاء التعديل على الحقل تقريباً نفس مهمة الخاصية السابقة.

multiple ، نستخدمها في إنشاء قائمة إختيارات بواسطة الوسم select ، ومهمتها إتاحة تحديد أكثر من خيار للمستخدم.

ستفهمها أكثر إذا طبقتها وأضفتها إلى كخصائص إضافية للحقول.

ملاحظات أخيرة

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

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

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