خصائص form* في مدخل HTML

وصلة التوصية: <input> هذا الفصل يقدم HTML مختلف المكونات form* خصائص

خصائص form

خصائص input form تحدد الخاصية <input> النموذج الذي ينتمي إليه المكون.

يجب أن يكون قيمة هذا الخصائص متساوية مع خاصية id الخاصة بالمكون <form> التابع لها.

مثال

حقل إدخال خارج نموذج HTML (لكنه جزء من النموذج):

<form action="/action_page.php" id="form1">
  <label for="fname">الاسم العائلي:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="إرسال">
</form>
<label for="lname">الاسم:</label>
<input type="text" id="lname" name="lname" form="form1">

جربها بنفسك

خصائص formaction

خصائص input خصائص formaction تحدد الخاصية URL ملف يتم معالجته (البيانات) عند تقديم النموذج.

ملاحظة: }}سيقوم هذا الخصائص بتغطية <form> للمكون الخصائص action خصائص

خصائص formaction خصائص تنطبق على أنواع الإدخال التالية: submit و image.

مثال

نموذج HTML يحتوي على زرين تقديم مختلفين (action):

<form action="/action_page.php">
  <label for="fname">الاسم العائلي:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">الاسم:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="إرسال">
  <input type="submit" formaction="/action_page2.php" value="إرسال كمسؤول">
</form>

جربها بنفسك

خصائص formenctype

خصائص input formenctype تحدد الخاصية كيفية ترميز بيانات النموذج عند تقديمها (يُستخدم فقط مع form="post").

ملاحظة: }}سيقوم هذا الخصائص بتحويل <form> الخصائص enctype للمكون form.

formenctype خصائص تنطبق على أنواع الإدخال التالية: submit و image.

مثال

يوجد نموذج يحتوي على زرين تقديم. الزر الأول يرسل بيانات النموذج باستخدام الترميز الافتراضي، والزر الثاني يرسل بيانات النموذج بترميز "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">اسم الأول:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="إرسال">
  <input type="submit" formenctype="multipart/form-data"
  value="إرسال ملف مرفق بتنسيق Multipart/form-data">
</form>

جربها بنفسك

خصائص formmethod

خصائص input formmethod تحدد الخاصية الخصائص كيفية إرسال بيانات النموذج إلى URL action URL باستخدام طريقة HTTP.

ملاحظة: }}سيقوم هذا الخصائص بتحويل <form> الخصائص method للمكون form.

formmethod خصائص تنطبق على أنواع الإدخال التالية: submit و image.

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

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

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

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

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

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

مثال

نموذج يحتوي على زرين للإرسال. الأول يرسل بـ method="get" بيانات النموذج. الثاني يرسل بـ method="post" بيانات النموذج:

<form action="/action_page.php" method="get">
  <label for="fname">الاسم العائلي:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">الاسم:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="إرسال باستخدام GET">
  <input type="submit" formmethod="post" value="إرسال باستخدام POST">
</form>

جربها بنفسك

خصائص formtarget

خصائص input خصائص formtarget خصائص تحدد اسمًا أو مفتاحًا، يحدد أين يتم عرض الاستجابة المقدمة بعد تقديم النموذج.

ملاحظة: }}سيقوم هذا الخصائص بتحويل <form> خصائص الهدف للعنصر.

خصائص formtarget خصائص تنطبق على أنواع الإدخال التالية: submit و image.

مثال

نموذج يحتوي على زرين للإرسال وكل منهما له نافذة هدف مختلف:

<form action="/action_page.php">
  <label for="fname">الاسم العائلي:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">الاسم:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="إرسال">
  <input type="submit" formtarget="_blank" value="إرسال إلى نافذة/علامة جديدة">
</form>

جربها بنفسك

خصائص formnovalidate

خصائص input formnovalidate الخصائص لا يجب التحقق منها عند التقدم <input> عنصر.

ملاحظة: }}سيقوم هذا الخصائص بتحويل <form> خصائص novalidate للعنصر.

formnovalidate تطبيق الخاصية على أنواع المدخلات التالية: submit.

مثال

نموذج يحتوي على زرين لإرسال (للتحقق ولعدم التحقق):

<form action="/action_page.php">
  <label for="email">ادخل بريدك الإلكتروني:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="إرسال">
  <input type="submit" formnovalidate="formnovalidate">
  value="إرسال غير م��ح">
</form>

جربها بنفسك

خصائص novalidate

novalidate خصائص هي <form> خصائص

إذا تم تعيينها، فإن خاصية novalidate تؤدي إلى عدم التحقق من جميع بيانات النموذج عند الإرسال.

مثال

يحدد ذلك عدم التحقق من أي بيانات نموذج عند الإرسال:

<form action="/action_page.php" novalidate>
  <label for="email">ادخل بريدك الإلكتروني:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="إرسال">
</form>

جربها بنفسك

عناصر النموذج والمدخلات لـ HTML

علامة وصف
<form> تعريف نموذج HTML للاخبارات المدخلة.
<input> تعريف عنصر التحكم في المدخلات.

للحصول على قائمة كاملة بجميع علامات HTML المتاحة، يرجى زيارة دليل مرجع العلامات لـ HTML.