العنصر <form>

يُمثِّل العنصر <form> قسمًا في المستند الذي يحتوي على عناصر يستطيع المستخدم التفاعل معها لإرسال بيانات إلى خادوم الويب.

مثال بسيط عن نموذج يُرسَل عبر الطريقة GET:

<form action="" method="get">
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name">
  <input type="submit" value="أرسل">
</form>

مثال بسيط عن نموذج يُرسَل عبر الطريقة POST:

<form action="" method="post">
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name">
  <input type="submit" value="أرسل">
</form>

مثال عن نموذج يبيّن استخدام العناصر <fieldset> و <legend> و <label>:

<form action="" method="post">
  <fieldset>
    <legend>النموذج</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">اضغط هنا</label>
  </fieldset>
</form>

دورة تطوير واجهات المستخدم

• 66 ساعة فيديو تدريبية
• من الصفر دون الحاجة لخبرة مسبقة
• شهادة معتمدة من أكاديمية حسوب
• متابعة أثناء الدورة من فريق مختص

اشترك الآن

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي.
المحتوى المسموح	المحتوى التنظيمي، لكن ما عدا العنصر <form>.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	HTMLFormElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

خاصية autocomplete ما تزال غير مدعومة في أغلبية المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

accept

قائمة مفصولة بفاصلة تمثِّل أنواع المحتوى التي يقبلها الخادوم.

يجدر بالذكر أنَّ هذه الخاصية حُذِفَت في HTML5 ولا يجوز استخدامها حديثًا، وإنما استخدم الخاصية accept التابعة لعنصر <input>.

accept-charset

قائمة مفصولة بفاصلة أو بفراغ تمثِّل ترميزات المحارف التي يقبلها الخادوم. سيستخدمها المتصفح بنفس ترتيب ورودها، والقيمة الافتراضية هي السلسلة النصية المحجوزة UNKNOWN التي تُشير إلى أنَّ الترميز هو نفس ترميز المستند الذي يحتوي على النموذج.

كان يُسمَح في الإصدارات السابقة من HTML بفصل ترميزات المحارف بفاصلة أو فراغ، أما في HTML5 فلا يُسمَح إلا بفصلها بفراغات.

مثال عن استخدام الخاصية accept-charset للإشارة إلى أنَّ النموذج يقبل المدخلات بترميز UTF-8 أو ISO-8859-6 (للمحارف العربية):

<form action="" method="get" accept-charset="UTF-8 ISO-8859-6">
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name">
  <input type="submit" value="أرسل">
</form>

action

رابط URI للبرنامج الذي سيُعالِج معلومات النموذج، وهذه القيمة يمكن تجاوزها عبر الخاصية formaction في عنصر <button> أو <input>.

autocomplete

تُشير هذه الخاصية إن كانت قيمة عناصر النموذج يمكن إكمالها تلقائيًا عبر المتصفح. يمكن تجاوز قيمة هذه الخاصية عبر ضبط الخاصية autocomplete على عناصر النموذج فرادى. القيم الممكنة لهذه الخاصية هي:

• off: يجب أن يُدخِل المستخدم القيم يدويًا في كل حقل في كل مرة، أو كانت الصفحة تُوفِّر طريقة للإكمال التلقائي للمدخلات بمعزل عن المتصفح، أي أنَّ المتصفح لا يتدخل بموضوع الإكمال التلقائي.
• on: يمكن للمتصفح إكمال القيم المُدخَلة من المستخدم تلقائيًا اعتمادًا على القيم التي أدخلها المستخدم في المرات السابقة.

في أغلبية المتصفحات الحديثة (بما في ذلك Firefox 38+‎ و Chrome 34+‎ و IE 11+‎) لن يؤدي ضبط الخاصية autocomplete إلى منع مدير كلمات المرور الخاص بالمتصفح من سؤال المستخدم إن كان يريد تخزين معلومات الدخول (اسم المستخدم وكلمة المرور)، إذا سمح المستخدم بذلك فستُملأ معلومات الدخول في المرة القادمة التي يزور فيها المستخدم الصفحة تلقائيًا.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

enctype

عندما تكون قيم الخاصية method تساوي posts، فالخاصية enctype تُمثِّل نوع MIME الذي سيستخدم لإرسال محتوى النموذج إلى الخادوم. القيم الممكنة هي:

• application/x-www-form-urlencoded: القيمة الافتراضية إن لم تُحدَّد قيمة لهذه الخاصية.
• multipart/form-data: استخدم هذه القيمة إن كنتَ تستعمل العنصر <input> في النموذج وضبطتَ الخاصية type إلى file.
• text/plain.

يمكن تجاوز هذه القيمة باستخدام الخاصية formenctype في عنصر <button> أو <input>.

سيُرسَل النموذج الآتي كنوع بيانات multipart/form-data:

<form action="" method="post" enctype="multipart/form-data">
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name">
  <input type="submit" value="أرسل">
</form>

method

ستُحدِّد هذه الخاصية ما هي طريقة الإرسال عبر HTTP (أي HTTP method) التي يجب أن يستعملها المتصفح لإرسال النموذج. القيم الممكنة هي:

• post: إرسال بيانات النموذج باستخدام طريقة POST، ضمن جسم طلبية HTTP.
• get: إرسال البيانات عبر طريقة GET، بإسناد بيانات النموذج إلى رابط URI للهدف، مع استعمال الرمز ? لفصل اسم الصفحة عن البيانات، ثم إرسال رابط URI الناتج إلى الخادوم. استخدم هذه الطريقة إن لم تكن هنالك تأثيرات جانبية لنموذجك وكان يحتوي على محارف ASCII فقط.

يمكن تجاوز هذه القيمة باستخدام الخاصية formmethod في عنصر <button> أو <input>.

name

اسم النموذج. كان استخدام هذه الخاصية مهملًا في HTML 4 (وكان يجب استخدام الخاصية id بدلًا من هذه الخاصية). لكن أعيد استخدامها في HTML5 لتمييز النموذج في المستند، وإن حُدِّدَت فيجب أن تكون فريدةً بالنسبة إلى النماذج الأخرى.

novalidate

تُشير هذه الخاصية المنطقية إلى أنَّ على المتصفح ألّا يتحقق من حقول النموذج عند إرساله.

إذا لم تُحدَّد قيمة لهذه الخاصية (أي أنَّ على المتصفح التحقق من حقول النموذج)، فيمكن تجاوز الضبط الافتراضي باستخدام الخاصية formnovalidate على عنصر <button> أو <input> ينتمي إلى النموذج.

لن يتحقق المستخدم من المدخلات في النموذج الآتي لأننا استعملنا فيه الخاصية novalidate:

<form action="" method="get" novalidate>
  <label for="name">الاسم:</label>
  <input id="name" type="text" name="name" required>
  <input type="submit" value="أرسل">
</form>

target

هذه الخاصية تأخذ كلمةً محجوزةً تشير إلى المكان الافتراضي لعرض الناتج عندما تُسبِّب الروابط أو عناصر النماذج بالانتقال إلى صفحةٍ أخرى.

الكلمات المحجوزة التالية لها معانٍ خاصة:

• ‎__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.
• ‎__blank: عرض الصفحة في نافذة جديدة.
• ‎__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__selfنفسه.
• ‎__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.

يمكن تجاوز هذه القيمة باستخدام الخاصية formtarget في عنصر <button> أو <input>.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <form> بضبط الخاصية display إلى block، وإزالة الهامش العلوي margin-top:

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

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.