خصائص نماذج 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 أين سيتم عرض الاستجابة بعد تقديم الاستمارة.

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

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 يحدد الطريقة التي يجب استخدامها لإرسال بيانات النموذج عبر HTTP.
name يحدد اسم النموذج.
novalidate يحدد عدم التحقق من صحة النموذج عند تقديمه.
rel يحدد العلاقة بين مورد الارتباط والوثيقة الحالية.
target يحدد أين سيتم عرض الاستجابة المقدمة بعد تقديم النموذج.