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

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

action attribute syntax

طريقة كتابة خاصية action مع HTML form.

<form action="URL">

Relative URL action attribute

إرسال بيانات النموذج عن طريق صفحة داخلية جانب صفحة HTML الخاصة بك (ضمن نفس الموقع).

<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

إرسال البيانات إلى رابط خارجي عن طريق HTML form.

<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 HTML
خاصية method داخل عنصر form في لغة HTML

تحدد خاصية method طريقة إرسال البيانات server للخادم، حيث لكل نوع من البيانات طريقة في الإرسال، وأهم طرق الإرسال هي:

post request تُستخدم هذه الطريقة لإرسال الملفات والنصوص التي تزيد عن 256 حرف والبيانات الحساسة.
get request تُستخدم هذه الطريقة لإرسال البيانات النصية وغير الحساسة والنصوص التي تقل عن 256 حرف.

مقارنة بين post & get request

post request:

URL يتم إرسال البيانات عن طريق body بداخل http request مشفرة.
unlimited حجم النصوص غير محدود لأن البيانات المرسلة عن طريق http request ليس لها حدود.
sensitive استخدام post request في إرسال بيانات حساسة لأن البيانات الحساسة لا تظهر عن طريق http request وتكون البيانات مشفرة.
bookmark لا تُستخدم البيانات المُرسلة عن طريق http request للإضافة إلى المفضلة bookmark.
secure data البيانات آمنة عندما تُرسل مع post request.

get request:

URL يتم إرسال البيانات عن طريق URL على هيئة name=value.
limited حجم النصوص محدود، لأن أقصى حد يسمح به عن طريق URL هو 256 حرف.
insensitive استخدام get request في إرسال بيانات غير حساسة، لأن البيانات الحساسة سوف تظهر في الرابط وتكون غير مشفرة.
bookmark تستخدم البيانات عن طريق URL في إضافة الرابط إلى المفضلة bookmark.
non-secure data البيانات غير آمنة عندما تُرسل مع get request.

Syntax method attribute with get

طريقة كتابة قيمة [get] داخل خاصية method في HTML form.

<form method="get">

Syntax method attribute with post

طريقة كتابة قيمة [post] داخل خاصية method في HTML form.

<form method="post">

Get method

إرسال البيانات الخاصة بالنموذج عن طريق القيمة [get].

<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>

جربها بنفسك

Post method

إرسال البيانات الخاصة بالنموذج عن طريق القيمة [post].

<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 HTML
خاصية Target داخل عنصر form في لغة HTML

عند الضغط على زر إرسال البيانات submit داخل HTML from سوف يقوم browser المتصفح بعرض الصفحة التي تريد الذهاب إليها والموجودة داخل خاصية action في current tab نفس النافذة الحالية browser للمتصفح، و attribute الخاصية المسؤولة عن مكان عرض صفحة HTML الجديدة هي خاصية target وذلك حسب القيمة التي نضعها داخلها بحيث تبدأ جميع القيم بعلامة underscore [ _ ] باستثناء قيمة واحدة.

القيم التي تكتب داخل خاصية Target هي:

[ “_self” ] وهي القيمة الافتراضية حتى إذا لم نقم بكتابتها سيقوم المتصفح بفتح link الرابط في نفس النافذة.
[ “_blank” ] تعطي القيمة أمر browser للمتصفح بفتح link الرابط في new tab نافذة جديدة.

Syntax target

طريقة كتابة الخاصية target.

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

Target blank

طريقة فتح الصفحة في نافذة جديدة على المتصفح عند الضغط على زر submit.

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

جربها بنفسك

Target parent value

مثال على القيمة [parent_] داخل الخاصية target.

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

جربها بنفسك

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

عندما يقوم المستخدم بكتابة بيانات داخل inputs حقول في HTML form لأي موقع أو تطبيق ويب، تكون هذه البيانات مسجلة عند الضغط على input مرة ثانية عند عودة المستخدم لنفس الصفحة وإعادة إدخال البيانات مرة أخرى، عن طريق خاصية autocomplete attribute يمكن التحكم في حفظ البيانات المُدخلة مسبقاً وذلك إما من خلال إظهارها أو إخفائها عند النقر فوق الحقل مرة أخرى.

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

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

autocomplete on

قيمة الخاصية autocomplete فعالة تساوي on بداخل HTML form.

<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 مُعطلة تساوي off بداخل HTML form.

<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

تظهر البيانات المُدخلة سابقًا كما في حالة القيمة on عند عدم استخدام الخاصية autocomplete مع HTML form.

<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>

جربها بنفسك

ملاحظة

اضغط داخل input الحقل لكي تظهر لك البيانات التي قمت بإدخالها في نفس form لنفس الموقع الإلكتروني.

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

تستخدم خاصية autofocus بدون قيمة مع أي حقل داخل HTML form لكي يقوم المتصفح بالوقوف وتحديد الحقل مباشرة عند تحميل الصفحة.

يجب عدم استخدام خاصية autofocus مع أكثر من حقل.
المتصفح لا يحدد أي حقل إذا لم تقم بإضافة خاصية autofocus بداخل HTML form.

Autofocus attribute

لاحظ سيقوم المتصفح في هذا المثال تلقائياً بتحديد حقل fname.

<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 autofocus

مثال يوضح الاستخدام الخاطئ لخاصية autofocus بداخل عُنصر <form>، حيث سَوفَ يَتمُ هنا قراءة خاصية 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 input novalidate attribute
خاصية novalidate مع عنصر input في HTML form

تُستخدم خاصية novalidate في لغة HTML للإشارة إلى عدم التحقق من صحة النموذج عند الإرسال، وهي خاصية من النوع boolean.

تُفيدك هذه الخاصية إذا كُنتَ تُريد أن يَحفظ user المستخدم تَقدم ملء النموذج.

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

novalidate attribute خاصية novalidate عبارة عن boolean attribute وهي الخاصية الوحيدة التي لا تملك قيمة (دون value).
إن وجود novalidate attribute داخل عُنصر <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>

جربها بنفسك

ملاحظة

لا يَدعم مُتصفح Sfari browser خاصية novalidate حتى الإصدار العاشر منه.

معلومات تهمك

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

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

التالى

CLOSETAG

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

HTML Form Attributes خصائص HTML Form

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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