هناك العديد من الخصائص [Attributes] المتعلقة بعنصر النموذج <form> في HTML، وهي تضيف معلومات هامة للمتصفح أو الخادم أو المستخدم.

من أبرز هذه الخصائص:

action: تُحدد رابط الصفحة [URL] الذي سيتم إرسال بيانات النموذج إليه، سواء كان هو الصفحة الحالية أو صفحة أخرى.
method: تُحدد نوع الطلب الذي سيرسله المتصفح إلى الخادم، مثل GET أو POST.
target: تُحدد المكان الذي ستفتح فيه الصفحة المحددة بواسطة خاصية action، مثل نافذة جديدة باستخدام الخاصية ["_blank"] أو في نفس الصفحة باستخدام ["_self"].
autocomplete: تُحدد ما إذا كان المتصفح يسمح بإظهار البيانات التي سبق إدخالها تلقائيًا في الحقول.
novalidate: عند استخدامها، تمنع المتصفح من التحقق من صحة البيانات المدخلة قبل إرسال النموذج.
name: تُحدد اسم النموذج، ويُستخدم عادة للتعامل مع النموذج برمجيًا أو لتمييزه عند الإرسال.
accept-charset: تُحدد مجموعة الترميزات [character sets] التي يمكن استخدامها عند إرسال بيانات النموذج إلى الخادم.

</> HTML Form action Attribute
خاصية action داخل عنصر form في لغة HTML

تُستخدم خاصية action في النموذج [HTML form] لتحديد صفحة الويب على الخادم [server] التي ستقوم بمعالجة البيانات عند إرسال النموذج، سواء كان الهدف إرسالها أو حفظها على الخادم.

قيمة الخاصية action:

قيمة الخاصية action هي رابط [URL].
يمكن أن يكون الرابط من النوع المطلق [Absolute]، أي يشير إلى صفحة على خادم خارجي، أو من النوع النسبي [Relative]، أي يشير إلى صفحة على نفس الخادم المحلي.
إذا تركت قيمة الخاصية action فارغة، سيتم إرسال البيانات إلى نفس الصفحة التي يوجد بها النموذج.
إذا لم تحدد خاصية action، سيقوم المتصفح تلقائيًا بتعيين عنوان الصفحة الحالية [URL] كقيمة لها.

action Attribute Syntax

يوضح هذا المثال كيفية كتابة خاصية action داخل عنصر النموذج HTML form.

<form action="URL">

Relative URL action Attribute

يوضح هذا المثال كيفية إرسال بيانات النموذج إلى صفحة داخلية ضمن نفس الموقع باستخدام رابط نسبي في خاصية action.

<form action="login.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mohamed"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Aly"><br><br>
  <input type="submit" value="Submit">
</form>

جربها بنفسك

Absolute URL action Attribute

يوضح هذا المثال كيفية إرسال بيانات النموذج إلى رابط خارجي على خادم مختلف عن طريق استخدام رابط مطلق [Absolute URL] في خاصية action.

<form action="https://www.closetag.com/login.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mohamed"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Aly"><br><br>
  <input type="submit" value="Submit">
</form>

جربها بنفسك

ملاحظة

عند ترك خاصية action فارغة في نموذج الـ HTML، سيتم إرسال بيانات النموذج إلى نفس الصفحة التي يوجد بها النموذج.

</> Method Attribute in the HTML form Element
خاصية method داخل عنصر form في لغة HTML

تُحدد خاصية [method] في نموذج البيانات [HTML form] طريقة إرسال البيانات إلى الخادم [server]، حيث يتم اختيار الطريقة المناسبة بحسب نوع البيانات المطلوب إرسالها. أكثر طريقتين شيوعًا هما:

POST: تُستخدم هذه الطريقة لإرسال الملفات أو البيانات الكبيرة أو البيانات الحساسة، حيث لا يتم عرض البيانات في عنوان الصفحة [URL] وإنما تُرسل ضمن جسم الطلب [Body].
GET: تُستخدم هذه الطريقة لإرسال البيانات النصية غير الحساسة ذات الحجم المحدود، حيث تُضاف البيانات مباشرة إلى عنوان الصفحة [URL] كمعلمات.

مقارنة بين الطريقتين [POST و GET]:

وجه المقارنة	GET	POST
طريقة إرسال البيانات	تُرسل البيانات عبر عنوان الصفحة [URL] على شكل معلمات [name=value].	تُرسل البيانات في جسم الطلب [HTTP request body] ولا تظهر في عنوان الصفحة.
حجم البيانات المسموح به	حجم البيانات محدود باختلاف المتصفح والخادم [عادة بين 2000 و 8000 حرف].	يُمكن إرسال ملفات أو بيانات كبيرة [الحجم غير محدود عمليًا من جهة المتصفح].
إرسال البيانات الحساسة	لا يُنصح باستخدامها لإرسال بيانات حساسة لأن البيانات تظهر في العنوان ويمكن مشاهدتها من قبل الآخرين.	مناسبة لإرسال البيانات الحساسة لأنها لا تظهر في عنوان الصفحة.
إمكانية حفظ الصفحة في المفضلة [Bookmark]	يمكن حفظ البيانات المرسلة عند إضافة الصفحة إلى المفضلة [Bookmark].	لا يمكن حفظ البيانات المرسلة بطريقة POST عند إضافة الصفحة إلى المفضلة [Bookmark].
أمان البيانات	البيانات أقل أمانًا لأنَّها موجودة في عنوان الصفحة، ولكن يمكن تحسين الأمان باستخدام HTTPS.	تكون البيانات أكثر أمانًا عند استخدام HTTPS مع POST.

Syntax of the method Attribute with get in HTML

يوضح هذا المثال كيفية استخدام القيمة get في خاصية method داخل عنصر النموذج [form] في لغة HTML.

<form method="get">

Syntax of the method attribute with post

يوضح هذا المثال كيفية كتابة القيمة post لخاصية method داخل عنصر النموذج [form] في لغة HTML.

<form method="post">

Using the GET Method in an HTML Form

يوضح هذا المثال كيفية إرسال بيانات النموذج إلى صفحة محددة باستخدام الطريقة GET في خاصية [method].

<form action="/login" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mohamed"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Aly"><br><br>
  <input type="submit" value="Submit">
</form>

جربها بنفسك

Using the POST Method in an HTML Form

يوضح هذا المثال كيفية إرسال بيانات النموذج إلى الصفحة المحددة باستخدام الطريقة POST في خاصية [method].

<form action="/login" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Mohamed"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Aly"><br><br>
  <input type="submit" value="Submit">
</form>

جربها بنفسك

</> Target Attribute in the HTML form Element
خاصية target داخل عنصر form في لغة HTML

عند الضغط على زر الإرسال [submit] داخل نموذج HTML form، يقوم المتصفح [browser] بعرض الصفحة المحددة في الخاصية action في نفس التبويب الحالي [current tab].

الخاصية [attribute] المسؤولة عن تحديد مكان عرض الصفحة الجديدة هي خاصية [target]، وتختلف طريقة عرض الصفحة حسب القيمة المدخلة في هذه الخاصية، حيث تبدأ معظم القيم بشرطة سفلية [_] باستثناء اسم نافذة مخصص.

القيم التي يمكن استخدامها مع خاصية target هي:

"self_": وهي القيمة الافتراضية، حتى إذا لم يتم كتابتها، حيث يقوم المتصفح بفتح الرابط في نفس النافذة أو التبويب الحالي.
"blank_": تعطي المتصفح أمرًا بفتح الرابط في تبويب جديد [نافذة جديدة].
"parent_": تفتح الرابط في الإطار الرئيسي أو الإطار الأب الذي يحتوي على الإطار الحالي. إذا لم يكن هناك إطارات فإنها تعمل مثل القيمة ["self_"].
"top_": تفتح الرابط في أعلى إطار متاح، أي تزيل جميع الإطارات وتعرض الصفحة في نافذة المتصفح الكاملة.
framename: يفتح الرابط في إطار [iframe] معيّن داخل الصفحة تم تعيين اسمه مسبقًا باستخدام الخاصية [name] مثل: ["name="myFrame]، ويتم استخدام هذا الاسم في خاصية [target] مثل: ["target="myFrame]. إذا لم يوجد إطار بهذا الاسم، سيتم فتح الصفحة في نافذة أو تبويب جديد.

Syntax of the target Attribute

يوضح هذا المثال كيفية كتابة خاصية target مع القيم الممكنة في عناصر HTML.

<element target="_blank|_self|_parent|_top|framename">

Target blank

فتح الصفحة في نافذة أو تبويب جديد في المتصفح عند الضغط على زر الإرسال [submit].

<form action="/login.php"  target="_blank">

جربها بنفسك

Target self

مثال على استخدام القيمة ["self_"] في خاصية [target] لفتح الصفحة في نفس الإطار أو التبويب الحالي عند الضغط على زر الإرسال [submit].

<form action="/login"  target="_self">

جربها بنفسك

Target parent

مثال على استخدام القيمة ["parent_"] في خاصية [target] لفتح الصفحة في الإطار الرئيسي الذي يحتوي على الإطار الفرعي [iframe] عند الضغط على زر الإرسال [submit].

<form action="/login"  target="_parent">

جربها بنفسك

Target top

مثال على استخدام القيمة ["top_"] في خاصية [target] لفتح الصفحة في أعلى إطار [أي إغلاق جميع الإطارات وفتح الصفحة في نافذة المتصفح الكاملة] عند الضغط على زر الإرسال [submit].

<form action="/login.php"  target="_top">

جربها بنفسك

Target framename

مثال على استخدام اسم إطار [framename] في خاصية [target] لفتح الصفحة الجديدة ضمن إطار محدد داخل الصفحة عند الضغط على زر الإرسال [submit].

<iframe name="resultFrame" width="600" height="300"></iframe>

<form action="/login" target="resultFrame">

جربها بنفسك

</> HTML From autocomplete Attribute
خاصية autocomplete Attribute داخل HTML From

عندما يقوم المستخدم بكتابة بيانات داخل حقول الإدخال [input] في نموذج HTML لأي موقع أو تطبيق ويب، يقوم المتصفح عادةً بحفظ هذه البيانات لتسهيل إدخالها في المرات القادمة.

عند عودة المستخدم لنفس الصفحة ومحاولة إدخال البيانات مرة أخرى، تظهر له البيانات المحفوظة عند النقر على الحقل. ومن خلال خاصية [autocomplete] وتعني [الإكمال التلقائي] يمكن التحكم في حفظ البيانات المدخلة مسبقًا، سواء بإظهارها أو إخفائها عند النقر على الحقل مرة أخرى.

القيم التي تُكتب داخل خاصية autocomplete:

بدون تحديد خاصية autocomplete: تكون القيمة الافتراضية هي [on].
"autocomplete="on: تقوم بإظهار سجل الكلمات المُدخلة مسبقًا.
"autocomplete="off: تقوم بتعطيل ظهور سجل الكلمات المُدخلة مسبقًا.

autocomplete on

تفعيل خاصية الإكمال التلقائي autocomplete بقيمة [on] في نموذج HTML.

<form action="/login" method="get" autocomplete="on">
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"><br><br>
 <input type="submit" value="Submit">
</form>

جربها بنفسك

autocomplete off

تعطيل خاصية الإكمال التلقائي autocomplete في نموذج HTML باستخدام القيمة [off].

<form action="/login" method="get" autocomplete="off">
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"><br><br>
 <input type="submit" value="Submit">
</form>

جربها بنفسك

Without autocomplete

عند عدم استخدام خاصية autocomplete في نموذج HTML، يُظهر المتصفح البيانات المدخلة سابقًا كما لو كانت القيمة [on].

<form action="/login" method="get">
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"><br><br>
 <input type="submit" value="Submit">
</form>

جربها بنفسك

ملاحظة

اضغط داخل حقل الإدخال ليتم عرض البيانات التي أدخلتها سابقًا في النموذج على نفس الموقع.

</> HTML From autofocus Attribute
خاصية Autofocus داخل عنصر HTML from

تُستخدم خاصية autofocus بدون تعيين قيمة مع أي حقل داخل HTML form ليقوم المتصفح تلقائيًا بوضع المؤشر في هذا الحقل عند تحميل الصفحة.

يُفضل عدم استخدام خاصية autofocus مع أكثر من حقل، لأن المتصفح سيحدد المؤشر فقط في أول حقل يحتوي على هذه الخاصية ويتجاهل الباقي.
إذا لم تضف خاصية autofocus لأي حقل في HTML form، فلن يقوم المتصفح بتحديد المؤشر تلقائيًا في أي حقل عند تحميل الصفحة.

Autofocus attribute

في هذا المثال، سيقوم المتصفح تلقائيًا بوضع المؤشر في حقل الإدخال الأول [First name] عند تحميل الصفحة.

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" autofocus><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit">
</form>

جربها بنفسك

Multi use of autofocus

مثال على الاستخدام الخاطئ لخاصية autofocus داخل النموذج؛ حيث سيقوم المتصفح بتفعيل autofocus للحقل الأول فقط ويتجاهل الباقي.

<form action="/login.php">
 <label for="fname">First name:</label>
 <input type="text" id="fname" name="fname" autofocus><br><br>
 <label for="lname">Last name:</label>
 <input type="text" id="lname" name="lname" autofocus><br><br>
 <input type="submit">
</form>

جربها بنفسك

</> HTML Form novalidate Attribute
خاصية novalidate مع عنصر form في نموذج HTML

تُستخدم خاصية novalidate في لغة HTML لتعطيل التحقق من صحة النموذج عند الإرسال، وهي خاصية من نوع [Boolean] ولا تحتاج إلى قيمة. تفيد هذه الخاصية إذا أردت السماح للمستخدم بإرسال النموذج دون الحاجة للتحقق من صحة جميع الحقول أولًا، مما يسهل حفظ التقدم أو متابعة الإدخال لاحقًا.

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

Novalidate Attribute

يوضح هذا المثال كيفية استخدام خاصية novalidate داخل عنصر <form> لتعطيل التحقق من صحة النموذج عند الإرسال.

<form action="/login" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>

جربها بنفسك

ملاحظة

متصفح [Safari] لا يدعم خاصية [novalidate] حتى الإصدار 10.

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Form Attributes خصائص HTML Form

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات chevron_left HTML Form Attributes chevron_left HTML