في هذا الدرس 7تصفّح المواضيع
تتيح خاصية pattern تفعيل التحقق التلقائي في المتصفح باستخدام التعبيرات النمطية المعتمدة في معيار جافا سكريبت RegExp. وعند تحديد هذه الخاصية على الحقول النصية، يفحص المتصفح مطابقة القيمة المدخلة للتعبير النمطي قبل السماح بإرسال النموذج.
HTML
<label for="zip">US Postal Code</label>
<input type="text" id="zip" name="postal_code"
pattern="[0-9]{5}(-[0-9]{4})?" required>على الرغم من قوة خاصية pattern في التحقق، إلا أن رموز التعبيرات النمطية تبدو غامضة وغير مفهومة للمستخدم العادي. وهنا يبرز الدور المحوري لخاصية title في توضيح التنسيق المطلوب بلغة بشرية بسيطة ومباشرة.
HTML
<label for="flightCode">Flight Code</label>
<input type="text" id="flightCode" name="flight"
pattern="[A-Z]{2}[0-9]{3,4}"
title="Two uppercase letters followed by 3 or 4 digits">تتيح خاصية multiple المنطقية للمستخدم اختيار أو إدخال أكثر من قيمة واحدة ضمن نفس حقل التحكم. وتدعم هذه الخاصية نوعين أساسيين من الحقول: حقول رفع الملفات لاختيار عدة ملفات معاً، وحقول البريد الإلكتروني لكتابة قائمة عناوين مفصولة بفواصل.
HTML
<!-- Multiple comma-separated emails -->
<label for="invite">Invite Colleagues</label>
<input type="email" id="invite" name="recipients" multiple>تحدد خاصية step فترات التدرج والقفزات الرقمية والزمنية الصالحة للحقول. وافتراضياً، تفرض حقول الأرقام خطوة عدد صحيح تساوي 1. وتؤدي محاولة كتابة كسور عشرية إلى ظهور خطأ عدم تطابق الخطوة ما لم يقم المطور بتهيئة خاصية step صراحة.
HTML
<!-- Allow currency cents and any float -->
<label for="price">Price (USD)</label>
<input type="number" id="price" name="amount"
step="0.01" min="0.00">توجه خاصية autofocus المنطقية المتصفح لوضع مؤشر التركيز تلقائياً على حقل إدخال محدد فور اكتمال تحميل الصفحة. ورغم فائدتها في صفحات البحث المباشرة، إلا أن الإفراط في استخدامها قد يربك مستخدمي قارئات الشاشة ولوحة المفاتيح.
HTML
<!-- Single primary search input on a dedicated page -->
<label for="siteSearch">Search Knowledgebase</label>
<input type="search" id="siteSearch" name="q">تربط خاصية list حقل الإدخال بعنصر datalist الذي يضم قائمة اقتراحات معدة مسبقاً للتعبئة التلقائية. وعلى خلاف قوائم الاختيار select التي تقيد المستخدم بخيارات مغلقة، يمنح الاقتران بعنصر datalist اقتراحات إرشادية مرنة مع الحفاظ على حرية كتابة أي نص مخصص.
HTML
<label for="browserChoice">Browser</label>
<input type="text" id="browserChoice" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>تمنح لغة HTML أزرار الإرسال خصائص تجاوز استثنائية قادرة على إبطال إعدادات النموذج الأساسية وتغييرها. وتتيح هذه الخصائص لنموذج واحد دعم مسارات عمل متباينة—مثل نشر المقال مباشرة أو حفظه كمسودة مؤقتة—دون الحاجة لتكرار الحقول.
يوضح الجدول التالي خصائص التجاوز الخمس القياسية على أزرار الإرسال وما يقابلها من خصائص النموذج الأساسية:
| خاصية الزر | خاصية النموذج المقابلة | الوظيفة المعمارية |
|---|---|---|
| formaction | action | توجيه طلب الإرسال إلى رابط URL مختلف |
| formmethod | method | تغيير طريقة الطلب بين GET وPOST |
| formenctype | enctype | تغيير نوع الترميز مثل multipart لرفع الملفات |
| formnovalidate | novalidate | تعطيل فحص قيود التحقق لحفظ المسودات |
| formtarget | target | تحديد نافذة فتح الاستجابة مثل _blank |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس التعامل مع الخصائص المتقدمة لحقول النماذج: التحقق بالأنماط عبر pattern، وتقديم الإرشادات عبر title، والخيارات المتعددة multiple، وتدرجات الخطوة step، وإدارة التركيز autofocus، والربط مع اقتراحات datalist، وخصائص تجاوز النموذج على أزرار الإرسال. الخطوة التالية: سنتناول في الفصل القادم وسائط الويب والصوت والفيديو.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 pattern Attribute خاصية pattern
- خاصية تحتوي على تعبير نمطي يفحص المتصفح مطابقة النص المدخل له قبل الإرسال.
- للمراجعة
- 02 title Attribute خاصية title
- خاصية تقدم شرحاً إرشادياً مبسطاً يظهر في نوافذ أخطاء التحقق المدمجة.
- للمراجعة
- 03 step Attribute خاصية step
- خاصية تحدد فترات القفز والتدرجات الرقمية المسموح بها في الحقول.
- للمراجعة
- 04 datalist Element عنصر datalist
- عنصر في HTML يحتوي اقتراحات تعبئة تلقائية ترتبط بالحقل عبر خاصية list.
- للمراجعة
- 05 formnovalidate Attribute خاصية formnovalidate
- خاصية على زر الإرسال تتجاوز قيود التحقق لتتيح حفظ المسودات غير المكتملة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 RegExp التعبير النمطي
- Regular Expression
- سلسلة من الرموز البرمجية تحدد نمطاً لمطابقة النصوص والتحقق من صحتها.
- للمراجعة
- 02 ReDoS هجوم حجب الخدمة النمطي
- Regular Expression Denial of Service
- هجوم أمني يستغل التراجع الكارثي للتعبيرات النمطية المعيبة لاستنزاف المعالج.
- للمراجعة
- 03 GPS نظام تحديد المواقع
- Global Positioning System
- نظام الملاحة الفضائي الذي يعتمد على كسور عشرية دقيقة في الحقول الجغرافية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ حقلاً يفرض نمطاً لرمز المنتج وأرفقه بخاصية title تشرح الصيغة للمستخدم بوضوح.
-
صمم حقل مبالغ مالية يقبل القروش والكسور بضبط خاصية step="0.01" وحد أدنى min="0.00".
-
اربط حقل إدخال بعنصر datalist يقدم أربعة اقتراحات على الأقل لرموز المطارات الدولية.
-
أنشئ نموذجاً يحوي زر نشر قياسي وزر مسودة يستخدم formnovalidate لتخطي التحقق.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
1أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.