HTML / النماذج
مفهوم النموذج
النموذج (Form) عبارة عن حاوية لمجموعة عناصر توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها. من الأمثلة الشائعة التي نتعامل فيها مع نماذج هي صفحات تسجيل الدخول، صفحات إنشاء حساب جديد، إضافة تعليق، إضافة منشور إلخ.
النموذج بحد ذاته ليس شيئاً يتم عرضه في الصفحة بل هو بمثابة حاوية للوسوم التي نضعها فيه. الفكرة الأساسية منه هي تجميع المعلومات التي يدخلها المستخدم في العناصر الموضوعة فيه وإرسالها دفعة واحدة للمكان الذي سنحفظها فيه.
في هذا الدرس سنتعرف على الخصائص التي يمكن وضعها في النموذج ودور كل منها.
إضافة نموذج في الصفحة
بشكل عام نستخدم الوسم <form> على النحو التالي لإضافة نموذج في الصفحة:
<form> <!-- هنا يجب إضافة كل العناصر التابعة للنموذج --> </form>في المثال التالي قمنا بإضافة نموذج لصفحة تسجيل دخول يتضمن ما يلي:
- مربع نص لإدخال إسم المستخدم.
- مربع نصي لإدخال كلمة المرور.
- زر لإرسال المعلومات التي تم إدخالها للموقع.
ملاحظة: هذا مجرد تصميم المراد منه إعطاءك فكرة عامة كيف ترتب العناصر بداخل النموذج.
خد الكواد نسخ واضغط هنا جرب الكودفي المثال التالي، قمنا بإضافة نموذج:
<!DOCTYPE html> <html> <body> <h2>Login Page</h2> <!-- لإعلام المتصفح أننا سنعرض نموذج في الصفحة <form> قمنا بوضع الوسم --> <form> Username<br> <!-- حتى يظهر مكانه مربع لإدخال نص عادي "text" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم --> <input type="text"><br><br> Password<br> <!-- حتى يظهر مكانه مربع نص لإدخال كلمة مرور "password" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم --> <input type="password"><br><br> <!-- حتى يظهر مكانه زر "button" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم --> <input type="button" value="Login"> </form> </body> </html>
إضافة زر لإرسال محتوى النموذج
كل نموذج تقوم بإنشائه يجب أن تضع فيه زر واحد نوعه submit على النحو التالي <input type="submit"> بهدف إعلام المتصفح أن هذا الزر مخصص لإرسال البيانات المدخلة في النموذج إلى الموقع.
إفتراضياً، عند النقر على زر نوعه submit يتوقع المتصفح أنه يجب عرض صفحة جديدة للمستخدم نسبةً للبيانات التي تم تمريرها للنموذج. في حال لم يتم تحديد الصفحة التي سيتم نقل المستخدم إليها فإن المتصفح سيقوم بفتح الصفحة الحالية من جديد في الصفحة التي يوجد فيها النموذج.
في المثال التالي قمنا بإضافة زر لإرسال بيانات النموذج مع الإشارة إلى أننا قمنا بإظهار الكلمة Login عليه:
<!DOCTYPE html> <html> <body> <h2>Login Page</h2> <!-- لإعلام المتصفح أننا سنعرض نموذج في الصفحة <form> قمنا بوضع الوسم --> <form> Username<br> <!-- حتى يظهر مكانه مربع لإدخال نص عادي "text" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم --> <input type="text"><br><br> Password<br> <!-- حتى يظهر مكانه مربع نص لإدخال كلمة مرور "password" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم --> <input type="password"><br><br> <!-- حتى يظهر مكانه زر يسمح بإرسال بيانات النموذج "submit" و تحديد أن نوعه <input> هنا قمنا بوضع الوسم ملاحظة: بما أننا لم نحدد الصفحة التي سيتم إرسال المحتوى إليها سيتم فتح الصفحة الحالية مكان الصفحة المفتوحة --> <input type="submit" value="Login"> </form> </body> </html>
تحديد أسلوب إرسال بيانات النموذج
عند إرسال بيانات النموذج، يجب تحديد الأسلوب الذي سيتم إعتماده لنقل البيانات. هنا يوجد أسلوبين أساسيين هما post و get.
لتحديد أسلوب إرسال البيانات في النموذج نضيف الخاصية method على النحو التالي:
<form method="get"><form method="post">
get والبيانات المدخلة في النموذج تتم إضافتها لرابط الصفحة التي سيتم إرسالها لها. رابط الصفحة محدود بعدد الأحرف حيث لا يمكن أن يتجاوز حجم الرابط 2048 حرفاً. لذا، هذا الأسلوب لا يصلح في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.
post، البيانات المدخلة في النموذج يتم إرسالها بشكل لا يراه المستخدم العادي. يمكنك إرسال ما شئت من البيانات بدون القلق حول حجم البيانات التي سيتم إرسالها، وهو جيد في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.
إعطاء أسماء للوسوم الموضوعة في النموذج
أي وسم موضوع في النموذج بهدف أن يدخل المستخدم بياناته فيه أو أن يختار بياناته منه يجب أن يملك الخاصية name مع الإشارة إلى أنه يجب إعطاء كل وسم قيمة مختلفة للخاصية name.
في المثال التالي، أضفنا الخاصية name للوسوم:
<form>
<!-- "username" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
<input type="text" name="username">
<!-- "password" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
<input type="password" name="password">
<!-- لأننا لن ندخل قيمة فيه name هذا الوسم لا يحتاج أن نضيف فيه الخاصية -->
<input type="submit">
</form>
تحديد أين سيتم إرسال محتوى النموذج
لتحديد أين سيتم إرسال محتوى النموذج عند النقر على الزر الذي نوعه submit نضيف الخاصية action و تمرير رابط الموقع الذي سيتلقى البيانات منها.
في المثال التالي، قمنا بتحديد أن بيانات النموذج سيتم إرسالها لصفحة أخرى:
<!DOCTYPE html>
<html>
<body>
<h2>Login Page</h2>
<!-- action هنا قمنا بتحديد مسار الصفحة التي ستتلقى البيانات التي يتم إرسالها بواسطة الخاصية
method و حدننا ذلك باستخدام الخاصية "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>
</body>
</html>
تفعيل الإكمال التلقائي في النموذج
في حال أردت جعل النموذج يظهر إقتراحات للمستخدم حين يقوم بملئ مربعات النصوص يمكنك إضافة الخاصية autocomplete في الوسم <form>.
في المثال التالي قمنا بتفعيل الإكمال التلقائي:
<!DOCTYPE html>
<html>
<body>
<h2>Login Page</h2>
<!-- لتفعيل الإكمال التلقائي "on" و تمرير القيمة autocomplete في النموذج التالي قمنا بإضافة الخاصية -->
<form action="/tryit/submitted" method="post" autocomplete="on">
Username<br>
<input type="text" name="username"><br><br>
Password<br>
<input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
إلغاء التدقيق على القيم المدخلة في النموذج
إفتراضياً، يقوم النموذج بالتأكد من أنواع القيم المدخلة فيه حين ينقر المستخدم على زر الإرسال قبل أن يقوم بإرسالها. في حال أردت إلغاء هذا التحقق، يمكنك إضافة الخاصية novalidate للوسم <form>.
في المثال التالي قمنا بإلغاء التشييك التلقائي:
<!DOCTYPE html> <html> <body> <h2>Login Page</h2> <!-- لجعل المتصفح يقبل أي قيم تم إدخالها فيه novalidate في النموذج التالي قمنا بإضافة الخاصية --> <form action="/tryit/submitted" method="post" novalidate> Email<br> <input type="email" name="email"><br><br> Password<br> <input type="password" name="password"><br><br> <input type="submit" value="Login"> </form> </body> </html>
تحديد أين سيتم فتح الصفحة التي تستقبل بيانات النموذج
إفتراضياً، عند النقر على زر إرسال البيانات فإنه يتم فتح الصفحة التي تستقبل البيانات مكان الصفحة الحالية. في حال أردت تحديد أين سيتم فتح الصفحة التي تستقبل البيانات يجب أن تضيف الخاصية target في الوسم <form>.
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية في تبويب جديد:
<!DOCTYPE html>
<html>
<body>
<h2>Login Page</h2>
<!-- لجعل الصفحة التي سيتم نقل البيانات إليها تفتح في تبويب جديد "_blank" و تمرير القيمة target في النموذج التالي قمنا بإضافة الخاصية -->
<form action="/tryit/submitted" method="post" target="_blank">
Username<br>
<input type="text" name="username"><br><br>
Password<br>
<input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية بداخل إطار موضوع في نفس الصفحة إسمه my_iframe:
<!DOCTYPE html>
<html>
<body>
<h2>Login Page</h2>
<!-- "my_iframe" و تمرير القيمة target في النموذج التالي قمنا بإضافة الخاصية
لجعل الصفحة التي سيتم نقل البيانات إليها تفتح بداخل الإطار الذي يملك هذا الإسم -->
<form action="/tryit/submitted" method="post" target="my_iframe">
Username<br>
<input type="text" name="username"><br><br>
Password<br>
<input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
<br>
<h2>The iframe target</h2>
<!-- و تحديد حجمه "my_iframe" هنا قمنا بتعريف إطار مع تسميته -->
<iframe width="100%" height="200" name="my_iframe"></iframe>
</body>
</html>
أهم الوسوم التي تستخدم مع النماذج
هناك وسوم عديدة يمكن إضافتها في النماذج لجعل المستخدم يدخل المعلومات التي تريدها منه أو لجعله يختار إحدى المعلومات التي قمت بتجهيزها مسبقاً له و مستقبلاً ستتعرف على مكتبات جاهزة يمكنك استخدامها للحصول على وسوم رائعة يمكن إضافتها في النماذج.
فيما يلي ذكرنا أهم الوسوم التي عليك معرفتها:
<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"> للحصول على زر دائري الشكل يمكن إختياره أو عدم اختياره.