خصائص نماذج HTML

هذا الفصل يقدم HTML <form> خصائص العنصر المختلفة.

خاصية Action

action تعريف الخاصية تعيين عملية إرسال النموذج.

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

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

مثال

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

<form action="/action_page.php">
  <label for="fname">اسم الأول:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">اسم العائلة:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

جرب بنفسك

نصيحة:إذا تم تمرير خاصية action، سيتم تعيين action إلى الصفحة الحالية.

خصوصية Target

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

target يمكن تعيين الخاصية إلى أحد القيم التالية:

القيمة وصف
_blank سيتم عرض الاستجابة في نافذة جديدة أو علامة تبديل.
_self سيتم عرض الاستجابة في النافذة الحالية.
_parent سيتم عرض الاستجابة في الإطار الأب.
_top سيتم عرض الاستجابة في كامل جسم النافذة.
framename سيتم عرض الاستجابة في iframe المسمى

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

مثال

في هذا المكان، سيتم فتح النتيجة في علامة تبديل جديدة في المتصفح:

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

جرب بنفسك

خصوصية Method

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

يمكن استخدام بيانات النموذج كمتغيرات URL (استخدام method="get")أو كمعاملة HTTP POST (استخدام method="post")إرسالها.

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

مثال

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

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

جرب بنفسك

مثال

في هذا المثال، يتم استخدام طريقة POST لتقديم بيانات النموذج:

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

جرب بنفسك

ملاحظات حول GET:

  • إضافة بيانات النموذج إلى URL بصيغة اسم/قيمة
  • لا يجب أبدًا استخدام GET لإرسال بيانات حساسة！(يمكن رؤية بيانات النموذج المقدمة في URL!)
  • يتم تحديد طول URL (2048 حرفًا)
  • يستخدم في تقديم النموذج الذي يريد المستخدم إضافة النتيجة كوسطة تبديل
  • يستخدم GET للبيانات غير الآمنة، مثل نواة البحث في Google

ملاحظات حول POST:

  • إضافة بيانات النموذج إلى النص الهيكلية لطلب HTTP (لا تظهر بيانات النموذج المقدمة في URL)
  • لا يوجد حد للاحجام في POST، يمكن استخدامه لإرسال بيانات كبيرة.
  • لا يمكن إضافة لوسطة التبديل في تقديم النموذج الذي يحتوي على POST

نصيحة:إذا كانت بيانات النموذج تحتوي على معلومات حساسة أو شخصية، فلا بد من استخدام POST!

خصوصية التعبئة التلقائية

autocomplete تحدد الخاصية إذا كان يجب فتح خاصية التعبئة التلقائية في النموذج.

بعد تمكين خاصية التعبئة التلقائية، سيقوم المتصفح بتعبئة القيم تلقائيًا بناءً على القيم التي أدخلها المستخدم من قبل.

مثال

تمكين استمارة التعبئة التلقائية:

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

جرب بنفسك

خصائص Novalidate

novalidate خصائص هي خصائص بولية.

إذا تم تعيينه، يحدد عدم التحقق من صحة بيانات النموذج عند تقديمه.

مثال

النموذج الذي لم يتم تعيين خصائص novalidate:

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

جرب بنفسك

قائمة بجميع خصائص <form>

خصائص وصف
accept-charset يحدد رمز الترميز الذي سيتم استخدامه لتقديم النموذج.
action يحدد أين سيتم إرسال بيانات النموذج عند تقديمه.
autocomplete يحدد ما إذا كان يجب تشغيل ميزة إكمال النموذج تلقائيًا (ملء).
enctype يحدد كيفية ترميز بيانات النموذج عند إرسالها إلى الخادم (لـ method="post" فقط).
method يحدد الطريقة التي سيتم استخدامها لإنشاء بيانات النموذج.
name يحدد اسم النموذج.
novalidate يحدد عدم التحقق من صحة النموذج عند تقديمه.
rel يحدد العلاقة بين المصدر والملف الحالي.
target يحدد أين سيتم عرض الاستجابة المكتسبة بعد تقديم النموذج.