علامة <form> في HTML

التعريف والاستخدام

<form> يستخدم هذا التسمية لإنشاء نموذج HTML لاستقبال إدخالات المستخدم.

<form> يمكن لتلك العناصر أن تحتوي على أحد أو أكثر عناصر النموذج التالية:

يرجى الرجوع إلى:

دليل HTML:HTML نماذج الاستدلال والمدخلات

دليل HTML DOM المشاركة:مفهوم Form

دليل CSS: تعيين نماذج النموذج

مثال

مثال 1

نموذج HTML يحتوي على两个字بيتين ومسجل زر

<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="تقديم">
</form>

جربها بنفسك

مثال 2

نموذج HTML يحتوي على مربعات اختيار:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="دراجة نارية">
  <label for="vehicle1">لدي دراجة نارية</label><br>
  <input type="checkbox" name="vehicle2" value="سيارة">
  <label for="vehicle2">لدي سيارة</label><br>
  <input type="checkbox" name="vehicle3" value="Sفينة" checked>
  <label for="vehicle3">لدي سفينة</label><br><br>
  <input type="submit" value="تقديم">
</form>

جربها بنفسك

مثال 3

نموذج HTML يحتوي على مربعات اختيار:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="تقديم">
</form>

جربها بنفسك

الخصائص

الخصائص القيمة وصف
accept-charset مجموعة الحروف يحدد النظام النصي الذي سيتم استخدامه عند تقديم النموذج.
action URL يحدد أين سيتم إرسال بيانات النموذج عند تقديم النموذج.
autocomplete
  • on
  • off
 يحدد ما إذا كان يجب تمكين وظيفة إكمال النموذج التلقائي.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 يحدد كيفية تعريف بيانات النموذج عند تقديمها إلى الخادم.
method
  • get
  • post
 يحدد الطريقة التي سيتم استخدامها في إرسال بيانات النموذج باستخدام HTTP.
name النص يحدد اسم النموذج.
novalidate novalidate يحدد عند تقديم النموذج لا يجب التحقق من النموذج.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 يحدد العلاقة بين المصدر وثمود المستند الحالي.
target
  • _blank
  • _self
  • _parent
  • _top
 يحدد أين سيتم عرض الاستجابة التي يتم استقبالها بعد تقديم النموذج.

خصائص العالمية

<form> يدعم العلامة خصائص العالمية في HTML。

خصائص الحدث

<form> يدعم العلامة خصائص الحدث في HTML。

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية <form> العنصر:

form {
  display: block;
  margin-top: 0em;
}

جربها بنفسك

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم