تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
العنصر <form>
تم إنشاء العنصر <form> في HTML ليقوم بجمع مدخلات المستخدمين، العنصر <form> من عناصر الـ block-level، يقوم هذا العنصر بتعريف الجزء التفاعلي في صفحة الويب.
جميع حقول النماذج ( <input> و <textarea> و <button>,…)، يجب أن تكون داخل العنصر <form> هكذا:
| 1 2 3 4 5 6 7 | <form> . Form elements . </form> |
- هناك خاصين لابد من تواجدهما في العنصر <form> حتى تكتمل وظيفته:
الخاصية action: تحتوي على رابط الصفحة التي ستذهب إليها عندما تقوم بالضغط على زر إرسال. - الخاصية method: تحدد كيفية إرسال البيانات التي تم إدخالها في النموزج، ولها طريقتين، GET و POST.
وعادةً ترسل هذة البيانات إلى المستضيف (Server) حيث يتم تخزينها هناك. ويتم معالجة هذة البيانات بإستخدام لغات البرمجة التي تعمل على المستضيف مثل PHP
إذن فالنموذج يتكون من مجموعة من الحقول تعمل مع بعضها البعض لإنجاز وظيفة معينه، على سبيل المثال، نموذج تسجيل الدخول في كل المواقع تقريباً يتكون من ثلاثة حقول:
- حقل إدخال الإسم أو البريد الإلكتروني. <“input type=”text> أو <“input type=”email>.
- حقل إدخال كلمة المرور <“input type=”password> .
- زر الإرسال <“input value=”إرسال” type=”submit>.
الحقول الثلاثة لابد أن يكون موجودين داخل نموذج واحد <“form action=”/login” method=”POST> وهكذا يمكنك بناء أي نموذج آخر.
خواص العنصر <form>
الخاصية action
تقوم بتحديد الإجراء الذي سيحدث عندما يقوم المستخدم بالضغط على زر إرسالة (Submit).
| 1 2 3 | <form action="/action_page.php"> |
عادةً الإجراء الذي يحدث هو إرسال البيانات التي تم إدخالها في النموذج إلى صفحة موجودة على المستضيف (Server) ، وفي المثال السابق يتم إرسال البيانات إلى الصفحة action_page.php هذة الصفحة تحتوي على كود مكتوب بلغة من لغات البرمجة التي تعمل على المستضيف مثل لغة PHP، وهذا الكود يقوم بمعالجة البيانات التي أرسلناها له من النموذج.
وفي حالة عدم وجود الخاصية action ضمن خواص العنصر <form> سيتم استخدام الصفحة الحالية بشكل إفتراضي، أي عندما يقوم المستخدم بالضغط على زر إرسال سيتم تحميل الصفحة الموجود بها النموذج مرةً أخرى.
الخاصية target
تحدد ما إذا كانت النتيجة التي تم إرسالها ستفتح في علامة تبويب جديدة في المتصفح أو في النافذة الحالية.
| 1 2 3 | <form action="/action_page.php" target="_blank"> |
القيمة الإفتراضية للخاصية target هي self_ أي فتح الصفحة الموجودة في الخاصية action في الصفحة الحالية. ويمكنك فتحها في تبيويب جديد في المتصفح بإستخدام القيمة blank_
الخاصية method
تحدد كيفية إرسال البيانات التي تم إدخالها في النموذج ، طريقة HTTP المستخدمة في إرسال البيانات (GET أو POST)
| 1 2 3 | <form action="/action_page.php" method="get"> |
أو
| 1 2 3 | <form action="/action_page.php" method="post"> |
أما عن كيفية عمل الـ GET والـ POST فهي خارج نطاق HTML لكن دعنا نوضح الفرق بينهم سريعاً كي تكون على علم بما يحدث في الكواليس :)
متى تستخدم الطريقة GET؟
الطريقة الإفتراضية في إرسال البيانات من النموذج هي GET. وعندما تستخدم هذة الطريقة سيتم إرسال جميع البيانات الموجودة في النموذج عن طريق رابط الصفحة التي ستذهب إليها لتعالج البيانات (الصفحة الموجودة في الخاصية action) أي أن جميع البيانات التي أدخلتها ستظهر في رابط الصفحة.
في المثال السابق، لو قمنا بإدخال اسم المستخدم ashraf وكلمة المرور 123456 ، بعد الضغط على زر إرسالة ستذهب إلى صفحة معالجة البيانات action_page.php وسيكون رابط الصفحة هكذا:
| 1 2 3 | /action_page.php?username=ashraf&password=123456 |
ما هذا؟!!!! كلمة المرور التي أدخلتها تظهر بصورة صريحة في رابط الصفحة!! نعم ستظهر هكذا عندما تستخدم الطريقة GET لذلك لا تستخدم الطريقة GET إطلاقاً في حالة احتواء النموذج على أي بيانات هامة أو معلومات خاصة أو أي بيانات تريد الحفاظ على سريتها وتأمينها.
ملاحظات عن الطريقة GET:
- تقوم بإلحاق البيانات التي أدخلتها في النموذج برابط الصفحة التي ستذهب إليها، عن طريق وضعها كأزواج من (الإسم = القيمة).
- طول رابط الصفحات محدود (٣٠٠٠ حرف فقط)، لذلك لا يمكنك استخدام الطريقة GET لإرسال بيانات ذات حجم كبير.
- لا تستخدمها في إرسال البيانات الهامة والحساسة، حيث أن البيانات تظهر في رابط المتصفح.
- يمكن للمستخدم حفظ (bookmark) صفحة النتيجة في متصفحه للعودة إليها لاحقاً.
- جيدة في حالة البيانات الغير حساسة، مثل نتائج البحث في جوجل.
متى تستخدم الطريقة POST؟
استخدم الطريقة POST دائماً عندما تحتوي البيانات التي سيتم إرسالها على معلومات هامة وحساسة، حيث أن الطريقة POST لا تظهر البيانات في رابط الصفحة التي ستذهب إليها.
ملاحظات عن الطريقة POST:
- الطريقة POST ليس لها حد معين من البيانات، لذلك يمكنك إستخدامها لإرسال عدد كبير من البيانات.
- لا يمكن للمستخدم حفظ صفحة النتيجة، حيث أن الصفحة لا تحتوي على رابط بالبيانات المُرسلة كما هو الحال في الطريقة GET.
العنصر <fieldset>
العنصر <fieldset> يستخدم في عمل مجموعات من حقول الإدخال المتعلقة ببعضها البعض داخل النموذج.
العنصر <legend> يستخدم لوضع عنوان لهذة المجموعات داخل العنصر <fieldset>.
الخاصية name
كل حقل من حقول الإدخال أياً كان نوعه، لابد من احتواءه على الخاصية name، وفي حالة عدم إحتواء الحقل عليها لن يتم إرسال البيانات الموجودة داخل هذا الحقل.
| 1 2 3 4 5 6 7 8 9 | <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Tielabs"><br> Last name:<br> <input type="text" value="Technologies"><br><br> <input type="submit" value="Submit"> </form> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | form { max-width: 500px; margin: 0 auto; } fieldset { border-color: rgba(0,0,0,0.1); border-radius: 3px; } input[type="text"]{ width: 100%; } [type="submit"]{ max-width: 500px; width: 100%; margin: 0 auto 30px; display: block; } |
عندما تقوم بالضغط على زر إرسال (submit) سيتم إرسال قيمة الحقل الذي يحمل إسم فقط وسيتم تجاهل كافة الحقول التي لا تحمل الخاصية name.
وهذة قائمة بجميع خصائص العنصر <form>
| الخاصية | الوصف |
|---|---|
| action | تحدد الصفحة التي ستذهب إليها عندما تقوم بالضغط على زر إرسال، القيمة الإفتراضية: الصفحة الحالية. |
| method | تحدد طريقة إرسال البيانات التي تم إدخالها في النموذج،القيمة الإفتراضية: GET |
| target | تحدد ما إذا كانت النتيجة التي تم إرسالها ستفتح في علامة تبويب جديدة في المتصفح أو في النافذة الحالية. |
| name | تستخدم لتمييز النموذج بإسم معين (تستخدم بعد ذلك في أكواد الجافاسكريبت) |
| autocomplete | تحدد ما إذا كان المتصفح سيقوم بملئ النموذج تلقائياً (من القيم التي أدخلتها من قبل) أم لا، القيمة الإفتراضية: on |
| accept-charset | تستخدم لتحديد نوع الرموز (الأحرف) المستخدمة في الصفحة وطريقة تشفيرها، القيمة الإفتراضية: القيمة المستخدمة للصفحة ككل. |
| enctype | تستخدم لتحديد ترميز البيانات المرسلة، القيمة الإفتراضية: url-encoded |
| novalidate | تحدد ما إذا كان المتصفح سيقوم بتصحيح الأخطاء في النموذج أم لا. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form action="/action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> </fieldset> <br> <fieldset> <legend>Account information:</legend> User name:<br> <input type="text" name="username"><br> Email:<br> <input type="text" name="email"><br><br> </fieldset> <br> <input type="submit" value="Submit"> </form> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | form { max-width: 500px; margin: 0 auto; } fieldset { border-color: rgba(0,0,0,0.1); border-radius: 3px; } input[type="text"]{ width: 100%; } [type="submit"]{ max-width: 500px; width: 100%; margin: 0 auto 30px; display: block; } |
