في هذا الدرس 7تصفّح المواضيع
تحدد خاصية المسار
action رابط الوجهة أو مسار المعالجة الذي يستقبل بيانات النموذج فور تقديمها. وتقبل هذه الخاصية روابط مطلقة تشير إلى خوادم خارجية، أو روابط نسبية توجه الحزمة إلى دوال المعالجة ضمن الموقع الحالي.
HTML
<!-- Target endpoint configuration -->
<form action="/api/v1/subscribe" method="post">
<label for="sub-mail">Email Address:</label>
<input id="sub-mail" name="email" type="email">
<button type="submit">Subscribe</button>
</form>في حال حذف خاصية المسار تماماً أو تعيينها كسلسلة نصية فارغة، يعتمد المتصفح افتراضياً مسار الصفحة الحالية نفسه كمسار لإرسال البيانات. ويشيع استخدام هذا النمط في الصفحات التي تتولى عرض النموذج وفحص مدخلاته في المسار البرمجي ذاته.
تحدد خاصية الطريقة
method الفعل الشبكي لبروتوكول HTTP المستخدم في نقل بيانات النموذج. ويعد الفهم الدقيق للاختلافات الجوهرية بين طريقتي GET و POST ركيزة أساسية لتصميم تطبيقات ويب آمنة وعالية الكفاءة.
| وجه المقارنة | طريقة GET | طريقة POST |
|---|---|---|
| موقع ورؤية البيانات | مرئية في شريط العنوان كسلسلة استعلام | معزولة ومخفية داخل جسم طلب الشبكة |
| الغرض الأساسي | استرجاع البيانات وعمليات البحث العامة | تعديل بيانات الخادم أو نقل معلومات حساسة |
| التخزين المؤقت والمفضلة | قابلة للحفظ في المفضلة وسجل التصفح والكاش | غير قابلة للحفظ في المفضلة ولا تُخزن مؤقتاً |
| حدود حجم البيانات | مقيدة بطول الرابط في المتصفحات بحدود ألفي حرف | سعة ضخمة غير مقيدة بحدود حجم صارمة |
| دعم رفع الملفات | لا تدعم رفع الملفات الثنائية أو الوسائط نهائياً | تدعم رفع المستندات والملفات متعددة الأجزاء |
| المستوى الأمني | غير آمنة لكلمات المرور أو الرموز السرية | معيار إلزامي لبيانات الاعتماد وإجراء التعديلات |
HTML
<!-- GET: Suitable for search filters -->
<form action="/catalog" method="get">
<input name="search" type="search">
<button type="submit">Find</button>
</form>
<!-- POST: Mandatory for authentication -->
<form action="/login" method="post">
<input name="secret" type="password">
<button type="submit">Sign In</button>
</form>تحدد خاصية نوع الترميز
enctype صيغة الوسائط المستخدمة لتشفير وحزم بيانات النموذج قبل إطلاقها عبر الشبكة. وتعمل هذه الخاصية حصرياً عندما تكون طريقة الإرسال محددة بالقيمة method="post".
تعد القيمة
application/x-www-form-urlencoded الخيار الافتراضي، حيث تحول المسافات إلى إشارات جمع وترمز المحارف الخاصة. ولكن عند تضمين حقول رفع الملفات <input type="file">، يلزم ضبط القيمة صراحة على multipart/form-data لضمان النقل الثنائي السليم.
HTML
<!-- Mandatory enctype for file uploads -->
<form action="/upload" method="post"
enctype="multipart/form-data">
<label for="doc-file">Select Document:</label>
<input id="doc-file" name="document" type="file">
<button type="submit">Upload File</button>
</form>تتحكم خاصية الوجهة
target في سياق التصفح الذي تُعرض فيه استجابة الخادم فور اكتمال معالجة النموذج. وتماثل هذه الخاصية سلوك توجيه الروابط التشعبية، حيث تتيح عرض الرد في النافذة الحالية أو فتح تبويب تصفح مستقل.
HTML
<!-- Open submission response in a new tab -->
<form action="/generate-pdf" method="post"
target="_blank" rel="noopener">
<input name="report_id" type="hidden" value="992">
<button type="submit">Generate Report</button>
</form>تشمل الكلمات المحجوزة المدعومة
_self للعرض في الإطار الحالي، و _blank لفتح تبويب جديد، و _parent للعرض في الإطار الأب المباشر، و _top للارتقاء لأعلى نافذة تصفح في الصفحة.تتحكم خاصية الإكمال التلقائي
autocomplete في صلاحية المتصفح لتقديم اقتراحات أو ملء حقول النموذج تلقائياً استناداً إلى سجل إدخالات المستخدم السابقة. ويمكن تطبيقها على مستوى حاوية النموذج ككل أو تخصيصها لكل حقل منفرد.
HTML
<!-- Container with granular autocomplete tokens -->
<form action="/checkout" method="post" autocomplete="on">
<label for="c-name">Full Name:</label>
<input id="c-name" name="name" autocomplete="name">
<label for="c-card">Credit Card:</label>
<input id="c-card" name="card" autocomplete="cc-number">
</form>توصي المعايير القياسية الحديثة باستخدام رموز محددة بدقة مثل اسم الحساب وكلمة المرور الحالية والبريد الإلكتروني. تساعد هذه المعرفات الموحدة برامج إدارة كلمات المرور على التعرف الدقيق على طبيعة الحقول وحماية المستخدم من أخطاء الملء العشوائي.
ترشد الخاصية المنطقية
novalidate المتصفح إلى تعطيل آليات التحقق المسبق الافتراضية عند تقديم النموذج. وعند إضافة هذه الخاصية، تُرسل البيانات مباشرة للخادم دون ظهور نوافذ التنبيه التلقائية الخاصة بالمتصفح.
HTML
<!-- Bypassing native browser validation popups -->
<form action="/save-draft" method="post" novalidate>
<label for="draft-email">Contact Email:</label>
<input id="draft-email" name="email" type="email" required>
<button type="submit">Save Incomplete Draft</button>
</form>تعد هذه الخاصية بالغة الأهمية عند بناء منظومات تحقق مخصصة بواسطة جافاسكريبت لعرض رسائل الأخطاء بتنسيقات دلالية خاصة، أو عند إتاحة خيار حفظ المسودة الذي يسمح للمستخدم بحفظ تقدمه مؤقتاً قبل استكمال كافة الحقول الإلزامية.
عندما يستخدم النموذج خاصية فتح التبويب الجديد
target="_blank", تصبح خاصية العلاقة rel صمام أمان حرج لحماية المتصفح. ويمنع التصريح بالقيمة rel="noopener noreferrer" النافذة الجديدة من الوصول غير المصرح به لكائن النافذة الأم.يمكنك من خلال المختبر التفاعلي أعلاه تجربة تأثير تعديل خصائص النماذج عملياً، ومراقبة كيفية إعادة تشكيل حزم الطلبات الشبكية بين استعلامات الروابط، والأجسام المشفرة، والتدفقات متعددة الأجزاء.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس خصائص نماذج HTML الجوهرية: تحديد مسار المعالجة عبر action، والمفاضلة المعمارية بين GET وPOST، وأنواع الترميز بـ enctype، وتوجيه النوافذ بـ target، وضبط الإكمال التلقائي، وتعطيل التحقق المسبق. الخطوة التالية تأخذنا لاستكشاف عناصر ونطاقات الإدخال الدلالية.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Action Endpoint مسار المعالجة
- رابط الوجهة الذي يستقبل حزمة بيانات النموذج لإجراء المعالجة وتحديث قواعد البيانات في الخادم.
- للمراجعة
- 02 HTTP Method طريقة الطلب الشبكي
- الفعل الشبكي لبروتوكول HTTP الذي يحدد موضع ونمط نقل البيانات بين المتصفح والخادم.
- للمراجعة
- 03 Form Encoding Type نوع ترميز النموذج
- صيغة الوسائط المعتمدة لتحويل بيانات النموذج إلى سلاسل نصية أو تدفقات ثنائية قبل إرسالها.
- للمراجعة
- 04 Constraint Validation التحقق من القيود
- خوارزميات مدمجة في المتصفح تتأكد من مطابقة مدخلات الحقول للشروط المحددة قبل السماح بالإرسال.
- للمراجعة
- 05 Browsing Context Target وجهة سياق التصفح
- الإطار أو التبويب المستهدف الذي تُعرض فيه الصفحة الناتجة عن استجابة الخادم لطلب النموذج.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 URL محدد موقع الموارد الموحد
- Uniform Resource Locator
- العنوان القياسي المحدد لمواقع الخوادم والمسارات المستهدفة لاستقبال طلبات النماذج.
- للمراجعة
- 02 MIME امتدادات بريد الإنترنت متعددة الأغراض
- Multipurpose Internet Mail Extensions
- معيار تصنيف نوع الوسائط الذي يحدد صيغة ونمط البيانات المنقولة عبر شبكة الإنترنت.
- للمراجعة
- 03 HTTP بروتوكول نقل النص الفائق
- Hypertext Transfer Protocol
- بروتوكول الاتصالات الأساسي الذي يتيح تبادل البيانات ونقل حزم النماذج عبر الشبكة العنكبوتية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ نموذجاً يعتمد طريقة POST مع مسار آمن وتحقق من حزم البيانات داخل جسم الطلب الشبكي.
-
ابنِ نموذجاً يحتوي على حقل ملف مع تطبيق ترميز multipart متعدد الأجزاء لضمان النقل الثنائي السليم.
-
استخدم أداة المحاكاة التفاعلية لمراقبة الفروق المباشرة بين استعلام الرابط وجسم الطلب الشبكي.
-
زود حقول الحساب برموز الإكمال التلقائي الموحدة لتسهيل عمل برمجيات إدارة كلمات المرور بأمان.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.