سمات نموذج HTML
يصف هذا الفصل السمات المختلفة <form>لعنصر HTML.
سمة العمل
تحدد السمة 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السمة على إحدى القيم التالية:
| Value | Description |
|---|---|
| _blank | The response is displayed in a new window or tab |
| _self | The response is displayed in the current window |
| _parent | The response is displayed in the parent frame |
| _top | The response is displayed in the full body of the window |
| framename | The response is displayed in a named iframe |
القيمة الافتراضية هي _selfالتي تعني أن الاستجابة ستفتح في النافذة الحالية.
مثال
هنا ، سيتم فتح النتيجة المرسلة في علامة تبويب متصفح جديدة:
<form action="/action_page.php" target="_blank">
سمة الطريقة
تحدد السمة methodطريقة HTTP لاستخدامها عند إرسال بيانات النموذج.
يمكن إرسال بيانات النموذج كمتغيرات URL (مع method="get") أو معاملة ما بعد HTTP (مع method="post").
طريقة HTTP الافتراضية عند إرسال بيانات النموذج هي 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:
<form action="/action_page.php" novalidate>
تمارين HTML
قائمة بجميع سمات <form>
| يصف | وصف |
|---|---|
| قبول-محارف | يحدد ترميزات الأحرف المستخدمة في إرسال النموذج |
| عمل | يحدد مكان إرسال بيانات النموذج عند إرسال النموذج |
| الإكمال التلقائي | يحدد ما إذا كان يجب تشغيل الإكمال التلقائي للنموذج أو إيقاف تشغيله |
| اكتب | يحدد كيفية تشفير بيانات النموذج عند إرسالها إلى الخادم (فقط للأسلوب = "post") |
| طريقة | تحدد طريقة HTTP لاستخدامها عند إرسال بيانات النموذج |
| اسم | يحدد اسم النموذج |
| نوفاليدات | يُحدد أنه لا يجب التحقق من صحة النموذج عند إرساله |
| rel | يحدد العلاقة بين المورد المرتبط والمستند الحالي |
| استهداف | يحدد مكان عرض الاستجابة التي تم استلامها بعد إرسال النموذج |