HTML النماذج

مفهوم النموذج

النموذج ( Form ) في العادة عبارة عن مجموعة عناصر توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها.
من الأمثلة الشائعة التي نتعامل فيها مع نماذج, هي صفحات تسجيل الدخول, صفحات إنشاء حساب جديد, إضافة تعليق, إضافة منشور إلخ..

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

في هذا الدرس سنتعرف على الخصائص التي يمكن وضعها في النموذج و دور كل منها.


معلومة تقنية

ترتيب العناصر التي نريد من المستخدم تعبئة المعلومات فيها بداخل نموذج له عدة فوائد ستتعرف عليها مستقبلاً حين تتعلم لغة جافا سكريبت حيث ستقوم بالتشييك على كل المعلومات المدخلة في النموذج قبل إرسالها للمكان الذي سيتم حفظها.كمثال بسيط, ستقوم بإعلام المستخدم الذي يحاول إنشاء حساب جديد أن كلمة المرور التي أدخلها غير مقبولة في حال وجدت أنه أدخل 5 احرف فقط و إعلامه بأنها يجب أن تتألف من 8 أحرف على الأقل.

إضافة نموذج في الصفحة

بشكل عام نستخدم الوسم <form> على النحو التالي لإضافة نموذج في الصفحة.

<form>
	<!-- هنا يجب إضافة كل العناصر التابعة للنموذج -->
</form>
	

في المثال التالي قمنا بإضافة نموذج يتضمن مربع نصي لإدخال إسم المستخدم و مربع نصي لإدخال كلمة المرور و زر لإرسال المعلومات التي تم إدخالها للموقع.
ملاحظة: هذا مجرد تصميم المراد منه إعطاءك فكرة عامة كيف ترتب العناصر بداخل النموذج.

مثال

<form>
	Username<br>
	<input type="text"><br><br>
	Password<br>
	<input type="password"><br><br>
	<input type="button" value="Login">
</form>
		

جرب الكود

إضافة زر لإرسال محتوى النموذج

كل نموذج تقوم بإنشائه يجب أن تضع فيه زر واحد نوعه submit على النحو التالي <input type="submit"> بهدف إعلام المتصفح أن هذا الزر مخصص لإرسال البيانات المدخلة في النموذج إلى الموقع.


معلومة تقنية

إفتراضياً, عند النقر على زر نوعه submit يتوقع المتصفح أنه يجب عرض صفحة جديدة للمستخدم نسبةً للبيانات التي تم تمريرها للنموذج.
في حال لم يتم تحديد الصفحة التي سيتم نقل المستخدم إليها فإن المتصفح سيقوم بفتح الصفحة الحالية من جديد في الصفحة التي يوجد فيها النموذج.

طريقة تحديد الصفحة التي سيتم إرسال البيانات لها سنتعلمها بعد قليل و لكن الآن ركز فقط على فكرة زر إرسال المحتوى.


في المثال التالي قمنا بإضافة زر لإرسال بيانات النموذج مع الإشارة إلى أننا قمنا بإظهار الكلمة Login عليه.
ملاحظة: عند النقر على زر الإرسال ستلاحظ أن المتصفح سيقوم بإعادة عرض كامل الصفحة مكان ظهور الصفحة الحالية و سبب ذلك أننا لم نحدد الصفحة التي نريد الإنتقال إليها عند إرسال بيانات النموذج.

مثال

<form>
	Username<br>
	<input type="text"><br><br>
	Password<br>
	<input type="password"><br><br>
	<input type="submit" value="Login">
</form>
		

جرب الكود

تحديد أسلوب إرسال بيانات النموذج

عند إرسال بيانات النموذج, يجب تحديد الأسلوب الذي سيتم إعتماده لنقل البيانات و هنا يوجد أسلوبين أساسيين هما post و get.
لتحديد أسلوب إرسال البيانات في النموذج نضيف الخاصية method و نمرر لها إما القيمة get و إما القيمة post كالتالي.

<!-- get إذا كنا سنستخدم أسلوب -->
<form method="get">

<!-- post إذا كنا سنستخدم أسلوب -->
<form method="post">
	


معلومات حول أسلوب get

  • البيانات المدخلة في النموذج يتم إضافتها لرابط الصفحة التي سيتم إرسالها لها.
  • رابط الصفحة محدود بعدد الأحرف حيث لا يمكن أن يتجاوز حجم الرابط 2048 حرفاً.
  • بما أن كل البيانات التي يتم إرسالها تكون مرئية في الرابط فإن هذا الأسلوب لا يصلح في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.
  • هذا الأسلوب ممتاز في حال كنت تريد إتاحة حفظ الصفحة كمرجع ( Bookmark ).


معلومات حول أسلوب post

  • البيانات المدخلة في النموذج يتم إرسالها بشكل لا يراه المستخدم العادي.
  • يمكنك إرسال ما شئت من البيانات بدون القلق حول حجم البيانات التي سيتم إرسالها.
  • هذا الأسلوب جيد في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم أو معلومات بطاقته الإئتمانية.
  • هذا الأسلوب غير مفيد في حال كنت تريد إتاحة حفظ الصفحة كمرجع ( Bookmark ).


ملاحظة

كمصمم صفحات ( Web Designer ) لا يهمك إطلاقاً معرفة الفرق بين أساليب إرسال البيانات لأن هذا الأمر يقع على عاتق مطور الموقع ( Web Developer ) الذي يتولى برمجته و بالطبع ستفهم ذلك بدقة أكثر حين تبدأ مستقبلاً بتعلم برمجة المواقع.

إعطاء أسماء للوسوم الموضوعة في النموذج

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

مثال

<form>
	<!-- "username" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
	<input type="text" name="username">
	
	<!-- "password" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
	<input type="password" name="password">
	
	<!-- لأننا لن ندخل قيمة فيه name هذا الوسم لا يحتاج أن نضيف فيه الخاصية -->
	<input type="submit">
</form>
		

الكلمة name المعطاة للوسوم لا تظهر أمام المستخدم و لكنها تجعل المتصفح يقوم بتخزين ما يدخله المستخدم في المربع الأول بإسم username و ما يدخله في المربع الثاني بإسم password بحيث تصبح كل معلومة تم إدخالها تملك قيمة مفتاحية تميزها عن غيرها.

هنا إذا إفترضنا أن المستخدم أدخل القيمة Mhamad في أول مربع نص و القيمة 1234 في ثاني مربع فإنه سيخزّن القيم برمجياً على هذا الشكل البسيط.

[
	username: "Mhamad",
	password: "1234"
]
	


معلومة تقنية

عندما يتم إعطاء الوسم إسم بواسطة الخاصية name فإنك تجد المتصفح يصبح قادر على عرض إقتراحات لك عندما تقوم بملئه.
كمثال بسيط, عندما تحاول تسجيل الدخول في أي موقع تجده يظهر لك المعلومات السابقة التي استخدمتها لتسجيل الدخول فيه في حال أردت اختيارها نفسها.

تحديد أين سيتم إرسال محتوى النموذج

لتحديد أين سيتم إرسال محتوى النموذج عند النقر على الزر الذي نوعه submit نقوم بإضافة الخاصية action و تمرير رابط الموقع الذي سيتلقى البيانات منها.


معلومة تقنية

الموقع يمكنه أن يعرض البيانات كما هي بداخل صفحة أخرى و يمكنه إجراء تعديل عليها و حفظها في قاعدة بيانات إلخ..
هذه الأمور ستتعلمها حين تتعلم كيفية تطوير موقع كامل و ليس الآن لأنك حالياً تتعلم الجزء الخاص بتصميم الصفحات فقط.


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

مثال

<form action="/tryit/submitted" method="post">
	Username<br>
	<input type="text" name="username"><br><br>
	Password<br>
	<input type="password" name="password"><br><br>
	<input type="submit" value="Login">
</form>
		

جرب الكود

تفعيل الإكمال التلقائي في النموذج

في حال أردت جعل النموذج يظهر إقتراحات للمستخدم حين يقوم بملئ مربعات النصوص الموضوعة فيه يمكنك إضافة الخاصية autocomplete في الوسم <form> و إعطاءها القيمة on في حال أردت إظهار إقتراحات و إعطاءها القيمة off إن لم ترد ذلك.

إفتراضياً, الإكمال التلقائي يكون مفعلاً بشكل إفتراضي, أي يكون محدد على هذا النحو <form autocomplete="on"> حتى لو لم تحدد ذلك بنفسك.


في المثال التالي قمنا بتفعيل الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح سيقترح عليك اختيار معلومات قمت أنت في السابق بإدخالها في مربعات النصوص.

المثال الأول

<form autocomplete="on">
	...
</form>
		

جرب الكود



في المثال التالي قمنا بإيقاف الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح لن يقترح عليك اختيار أي معلومات قمت سابقاً بإدخالها.

المثال الثاني

<form autocomplete="off">
	...
</form>
		

جرب الكود

إلغاء التشييك على القيم المدخلة في النموذج

إفتراضياً, يقوم النموذج بالتأكد من أنواع القيم المدخلة فيه حين ينقر المستخدم على زر الإرسال قبل أن يقوم بإرسالها.
في حال وجدها صحيحة فإنه يقوم بإرسالها, و في حال لم تكن كذلك فإنه يظهر لك رسالة يخبرك فيها بالأخطاء التي يجب أن تصححها حتى تتمكن من إرسال البيانات.

الآن, في حال أردت إلغاء التشييك التلقائي الذي يجريه المتصفح على القيم المدخلة في النموذج قبل إرسالها يمكنك إضافة الخاصية novalidate للوسم <form> على هذا النحو <form novalidate>.

ملاحظة: الخاصية novalidate تعمل على أغلب المتصفحات المشهورة باستثناء متصفح Safari.


في المثال التالي قمنا بإلغاء التشييك التلقائي على القيم المدخلة في النموذج.
هنا قمنا بإضافة الخاصية novalidate للوسم <form> لجعل المتصفح لا يهتم بما إن كان البريد الإلكتروني الذي تم إدخاله صحيحاً أم لا.

مثال

<form novalidate>
	...
</form>
		

جرب الكود

تحديد أين سيتم فتح الصفحة التي تستقبل بيانات النموذج

إفتراضياً, عند النقر على زر إرسال البيانات فإنه يتم فتح الصفحة التي تستقبل البيانات مكان الصفحة الحالية كما لاحظنا في الأمثلة السابقة.

في حال أردت تحديد أين سيتم فتح الصفحة التي تستقبل البيانات يجب أن تضيف الخاصية target في الوسم <form> و إعطائها إحدى القيم التالية:

  • _self في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
  • _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و فتح الصفحة فيه.
  • _top في حال أردت أن يتم فتح الصفحة الجديدة في نفس الصفحة الحالية مع إزالة أي صفحات متداخلة موضوعة فيها.
  • _parent في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة الموجودة فيها الصفحة الحالية.
  • framename في حال أردت أن يتم فتح الصفحة الجديدة بداخل إطار ( <iframe> ) موجود في نفس الصفحة.


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

المثال الأول

<form>
	...
</form>
		

جرب الكود



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

المثال الثاني

<form target="my_iframe">
	...
</form>

<iframe name="my_iframe"></iframe>
		

جرب الكود

أهم الوسوم التي تستخدم مع النماذج

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

فيما يلي ذكرنا أهم الوسوم التي عليك معرفتها:

  • <label> يستخدم لوضع إسم خاص للعنصر الموضوع في النموذج.
  • <button> يستخدم للحصول على زر.
  • <textarea> يستخدم للحصول على مربع نص يتألف من أكثر من سطر.
  • <select> يستخدم للحصول على قائمة منسدلة يجب إختيار أحد قيمها.
  • <datalist> يستخدم للحصول على قائمة منسدلة يمكن إختيار أحد قيمها.
  • <fieldset> يستخدم لإضافة حدود للنموذج مما يظهره بشكل أجمل.
  • <input> يعتبر من أهم الوسوم حيث يمكن استخدامه للحصول على أشكال عديدة.

أشكال الوسم <input>

بالنسبة للأشكال التي يمكن الحصول عليها بواسطة هذا الوسم, فيجب أن تضيف الخاصية type له و إعطاؤه إحدى القيم المعرفة مسبقاً لتحديد الشكل الذي تريد الحصول عليه. هذه تعتبر أهم الأشكال التي يمكن الحصول عليها لأنها تعمل على جميع المتصفحات:

  • <input type="text"> للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.
  • <input type="password"> للحصول على مربع نص مخصص لإدخال كلمة المرور.
  • <input type="number"> للحصول على مربع نص مخصص لإدخال الرقام.
  • <input type="email"> للحصول على مربع نص مخصص لإدخال بريد إلكتروني.
  • <input type="button"> للحصول على زر عادي.
  • <input type="submit"> للحصول على زر خاص لإرسال بيانات النموذج.
  • <input type="reset"> للحصول على زر خاص لإعادة القيم الأولية لجميع عناصر النموذج.
  • <input type="file"> للحصول على زر خاص لجعل المستخدم يختار ملف في جهازه.
  • <input type="range"> للحصول على شريط يمكن تحريكه لاختيار قيمة عددية.
  • <input type="checkbox"> للحصول على زر مربع الشكل يمكن اختياره أو عدم إختياره.
  • <input type="radio"> للحصول على زر دائري الشكل يمكن إختياره أو عدم اختياره.

ستتعلم كيفية التعامل مع هذه الوسوم في دروس لاحقة و نود الإشارة إلى أن بعض هذه الوسوم يمكن إضافة وسوم أخرى بداخلها أيضاً.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة