HTML

HTML Form Attributes
خصائص HTML Form

سوف تتعلم في هذا الدرس جميع الخصائص التي تضاف إلى عنصر HTML form والقيم التي يتم تحديدها داخل هذه الخصائص في لغة HTML.

التاريخ

11 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

5070

المواضيع

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

HTML Form Attributes
خصائص HTML Form

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

تُستخدم خاصية 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 حتى الإصدار العاشر منه.
مصطلحات الدرس
HTML Forms Attributes
HTML Forms Attributes

سمات نماذج HTML

Action
Action

الفعل

Submit
Submit

تأكيد الإرسال

Serve Side
Serve Side

جانب الخادم

link
Username
Username

إسم المستخدم

Password
Password

كلمة السر

Target
Target

الهدف

Post
Post

طريقة من طرق النموذج

Get
Get

طريقة من طرق النموذج

Autocomplete
Autocomplete

تكملة تلقائية

Boolean
Boolean

قيمة منطقية

Value
Value

قيمة

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
PHP
PHP

PHP, Hypertext Preprocessor

لغة برمجة مفتوحة المصدر مستخدمة على نطاق واسع
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.