HTML Form Attributes
خصائص HTML Form
سوف تتعلم في هذا الدرس جميع الخصائص التي تضاف إلى عنصر HTML form والقيم التي يتم تحديدها داخل هذه الخصائص في لغة 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>
ملاحظة
</>
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>
ملاحظة
سمات نماذج HTML
طرق
الفعل
تأكيد الإرسال
جانب الخادم
إسم المستخدم
كلمة السر
الهدف
سمة
طريقة من طرق النموذج
طريقة من طرق النموذج
تكملة تلقائية
قيمة منطقية
قيمة
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
