41 -سمات عنصر النموذج في HTML

يصف هذا الفصل السمات المختلفة لعنصر النموذج <form> في HTML.

السمة Action

تحدد السمة action الإجراء الذي سيتم تنفيذه عند إرسال النموذج.

عادةً، يتم إرسال بيانات النموذج إلى ملف على الخادم عندما ينقر المستخدم على زر الإرسال.

في المثال أدناه، يتم إرسال بيانات النموذج إلى ملف يسمى “action_page.php”. يحتوي هذا الملف على سكربت من جانب الخادم يتعامل مع بيانات النموذج:

مثال:

عند الإرسال، يتم إرسال بيانات النموذج إلى الملف “action_page.php”:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

ملاحظة: إذا تم حذف السمة action، فسيتم إرسال بيانات النموذج إلى الصفحة الحالية نفسها.

السمة Target

تحدد السمة target مكان عرض الاستجابة التي يتم تلقيها بعد إرسال النموذج.

يمكن أن تحتوي السمة target على أحد القيم التالية:

القيمة الافتراضية هي _self، مما يعني أنه سيتم فتح الاستجابة في النافذة الحالية.

مثال:

في هذا المثال، ستفتح نتيجة الإرسال في علامة تبويب جديدة في المتصفح:

<form action="/action_page.php" target="_blank">

السمة Method

تحدد السمة method طريقة HTTP التي سيتم استخدامها عند إرسال بيانات النموذج.

يمكن إرسال بيانات النموذج بطريقتين:

1. كمتغيرات URL (مع method=”get”):
   • يتم إلحاق بيانات النموذج بعنوان URL الخاص بالصفحة المحددة في السمة action.
   • تكون البيانات مرئية في شريط عنوان المتصفح.
   • يجب استخدام هذه الطريقة فقط عند إرسال بيانات صغيرة غير حساسة.
2. كمعاملات HTTP post (مع method=”post”):
   • يتم إرسال بيانات النموذج في نص طلب HTTP، ولا تظهر في عنوان URL.
   • هذه الطريقة أكثر أمانًا ومناسبة لإرسال كميات كبيرة من البيانات أو بيانات حساسة.

طريقة HTTP الافتراضية عند إرسال بيانات النموذج هي GET.

مثال:

يستخدم هذا المثال طريقة GET عند إرسال بيانات النموذج:

<form action="/action_page.php" method="get">

إليك مثال على استخدام طريقة POST عند إرسال بيانات النموذج:

<form action="/action_page.php" method="post">

ملاحظات حول طريقة GET:

• إلحاق البيانات بعنوان URL: يتم إلحاق بيانات النموذج بعنوان URL الخاص بالصفحة المحددة في السمة action، على شكل أزواج الاسم/القيمة (name/value pairs).
• عدم إرسال بيانات حساسة: لا تستخدم طريقة GET أبدًا لإرسال بيانات حساسة! لأن بيانات النموذج المرسلة ستكون مرئية في عنوان URL.
• محدودية طول URL: طول عنوان URL محدود (2048 حرفًا)، مما يقيد كمية البيانات التي يمكن إرسالها.
• إمكانية حفظ النتائج: مفيدة لعمليات إرسال النماذج حيث يريد المستخدم حفظ النتيجة في الإشارات المرجعية (bookmarks).
• مناسبة للبيانات غير الحساسة: GET مناسبة للبيانات غير الآمنة، مثل سلاسل الاستعلام في Google.

ملاحظات حول طريقة POST:

• إرسال البيانات في نص الطلب: يتم إرسال بيانات النموذج داخل نص طلب HTTP، وبالتالي لا تظهر في عنوان URL.
• عدم وجود قيود على الحجم: لا توجد قيود على حجم البيانات التي يمكن إرسالها باستخدام طريقة POST، مما يجعلها مناسبة لإرسال كميات كبيرة من البيانات.
• عدم إمكانية الحفظ: عمليات إرسال النماذج باستخدام POST لا يمكن حفظها في الإشارات المرجعية.
• مناسبة للبيانات الحساسة: استخدم دائمًا طريقة POST إذا كانت بيانات النموذج تحتوي على معلومات حساسة أو شخصية!

السمة Autocomplete

تحدد السمة autocomplete ما إذا كان ينبغي تشغيل خاصية الإكمال التلقائي في النموذج أم إيقافها.

عندما تكون خاصية الإكمال التلقائي قيد التشغيل (on)، يقوم المتصفح تلقائيًا بإكمال القيم في حقول الإدخال استنادًا إلى القيم التي أدخلها المستخدم سابقًا في نفس الحقول أو حقول مشابهة.

مثال:

نموذج مع خاصية الإكمال التلقائي قيد التشغيل:

<form action="/action_page.php" autocomplete="on">

السمة Novalidate

السمة novalidate هي سمة منطقية (boolean attribute).

عند وجودها، تحدد أنه لا ينبغي التحقق من صحة بيانات النموذج (الإدخال) عند الإرسال.

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

مثال:

نموذج يحتوي على سمة novalidate:

<form action="/action_page.php" novalidate>

قائمة جميع سمات عنصر النموذج <form>