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 إذا كنا سنستخدم أسلوب --> <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">
حتى لو لم تحدد ذلك بنفسك.
في المثال التالي قمنا بتفعيل الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح سيقترح عليك اختيار معلومات قمت أنت في السابق بإدخالها في مربعات النصوص.
في المثال التالي قمنا بإيقاف الإكمال التلقائي في النموذج.
إذاَ هنا ستلاحظ عند تعبئة النموذج أن المتصفح لن يقترح عليك اختيار أي معلومات قمت سابقاً بإدخالها.
إلغاء التدقيق على القيم المدخلة في النموذج
إفتراضياً، يقوم النموذج بالتأكد من أنواع القيم المدخلة فيه حين ينقر المستخدم على زر الإرسال قبل أن يقوم بإرسالها.
في حال وجدها صحيحة فإنه يقوم بإرسالها، و في حال لم تكن كذلك فإنه يظهر رسالة للمستخدم يخبره فيها بالأخطاء التي يجب أن يصححها حتى يتمكن من إرسال البيانات.
الآن، في حال أردت إلغاء التدقيق التلقائي الذي يجريه المتصفح على القيم المدخلة في النموذج قبل إرسالها يمكنك إضافة الخاصية novalidate
للوسم <form>
على هذا النحو <form novalidate>
.
الخاصية novalidate
تعمل على أغلب المتصفحات المشهورة باستثناء متصفح Safari.
في المثال التالي قمنا بإلغاء التشييك التلقائي على القيم المدخلة في النموذج.
هنا قمنا بإضافة الخاصية novalidate
للوسم <form>
لجعل المتصفح لا يهتم بما إن كان البريد الإلكتروني الذي تم إدخاله صحيحاً أم لا.
مثال
<form novalidate> ... </form>
تحديد أين سيتم فتح الصفحة التي تستقبل بيانات النموذج
إفتراضياً، عند النقر على زر إرسال البيانات فإنه يتم فتح الصفحة التي تستقبل البيانات مكان الصفحة الحالية كما لاحظنا في الأمثلة السابقة.
في حال أردت تحديد أين سيتم فتح الصفحة التي تستقبل البيانات يجب أن تضيف الخاصية target
في الوسم <form>
و إعطائها إحدى القيم التالية:
_self
في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي)._blank
في حال أردت أن يتم فتح تبويب جديد في المتصفح و فتح الصفحة فيه._top
في حال أردت أن يتم فتح الصفحة الجديدة في نفس الصفحة الحالية مع إزالة أي صفحات متداخلة موضوعة فيها._parent
في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة الموجودة فيها الصفحة الحالية.framename
في حال أردت أن يتم فتح الصفحة الجديدة بداخل إطار (<iframe>
) موجود في نفس الصفحة.
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية في تبويب جديد.
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية بداخل إطار موضوع في نفس الصفحة إسمه my_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">
للحصول على زر دائري الشكل يمكن إختياره أو عدم اختياره.
ستتعلم كيفية التعامل مع هذه الوسوم في دروس لاحقة و نود الإشارة إلى أن بعض هذه الوسوم يمكن إضافة وسوم أخرى بداخلها أيضاً.