HTML وCSS / واجهات متكيفة / الدرس 12
تخطيط النماذج والتركيز وحالات الخطأ
نسق النماذج مع حفظ التسميات والسلوك الأصلي ووضوح المفاتيح والتغذية الراجعة.
في هذه الصفحة
أهداف الدرس
- ترتيب العلاقات لا الإحداثيات
- تركيز مرئي فعلا
- اختبار التعافي لا الرفض وحده
ترتيب العلاقات لا الإحداثيات
يجب أن يربط التخطيط التسمية والتحكم والشرح والخطأ. تتكيف الحقول المكدسة أفضل من الإحداثيات غالبا. استخدم فراغا داخل المجموعة وأكبر بين الحقول ليبقى التجميع مفهوما. قد تصف Grid التسميات عند الاتساع لكن ليقرأ المصدر التسمية ثم الحقل ثم الشرح. لا تستبدل التسميات بـplaceholder، ولا تفترض ارتفاع صف ثابت مع الترجمة والتكبير والإكمال والرسائل.
حفظ الدلالات التفاعلية الأصلية
تعبر مظاهر المنصة عن التفاعل، وقد يزيل تصفيرها إشارات مفيدة ويلزم بإعادة الحالات. ورث الخط عند الملاءمة وأضف حشوا وحدودا واضحة. تختلف disabled عن readonly؛ فالمعطل غير متاح عادة للتفاعل والإرسال، وقد يبقى النص للقراءة قابلا للتركيز والإرسال. لا تعطل عنصرا لتخفيف لونه إن احتاج المستخدم قيمته أو شرحه. عزز عقد HTML ولا تناقضه.
تركيز مرئي فعلا
يضيف المثال إطار focus-visible دون إزالة كل الإطارات. تفصل outline-offset المؤشر عن الحد وتحول المسافات دون قصه. يحتاج التركيز تباينا في كل حالة وثيمة. اختبر Tab الحقيقية لا محاكاة الصنف الزائف فقط. قد يقص أب overflow المؤشر أو يغطيه عنوان ثابت، لذلك وضوح التركيز مسألة تخطيط أيضا.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form focus</title>
<style>
.field { display: grid; gap: .4rem; margin-block-end: 1rem; } input, button { font: inherit; padding: .6rem; } input:focus-visible, button:focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; }
</style>
</head>
<body>
<main><h1>Contact details</h1><form><div class="field"><label for="contact">Contact name</label><input id="contact" name="contact" autocomplete="name"></div><button type="button">Local preview</button></form></main>
</body>
</html>
A stacked field and a visible keyboard-focus treatment.تبقى التسمية والتحكم مجموعة في المصدر والعرض ويضيف التركيز مؤشرا دون تغيير الدور. النتيجة المتوقعة: حقل مكدس ومعالجة تركيز واضحة.
تغذية راجعة محددة ومترابطة
المثال الثاني حالة خطأ ساكنة: aria-invalid صحيحة ورسالة مرئية ترتبط بـaria-describedby وتشرح الإصلاح. لا ينفذ الترميز تحقق لحظيا ولا يعلن التغييرات تلقائيا. يجب أن يحدث التطبيق الحالة في وقت مناسب ويدير الملخص والتركيز ويحفظ المدخلات. تساعد الأصناف الزائفة على العرض لكن إظهار الخطأ قبل التفاعل قد يربك ويحتاج قرارا مقصودا.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Associated error</title>
<style>
.error { color: #8b0000; } [aria-invalid="true"] { border: 2px solid #8b0000; } input { font: inherit; padding: .5rem; }
</style>
</head>
<body>
<main><h1>Quantity correction</h1><form><label for="quantity">Quantity</label><input id="quantity" name="quantity" type="number" min="1" value="0" aria-invalid="true" aria-describedby="quantity-error"><p id="quantity-error" class="error">Enter a quantity of at least 1.</p><button type="button">Static preview only</button></form></main>
</body>
</html>
Quantity 0 is marked invalid with a specific correction message.تنقل الرسالة معنى يتجاوز الإطار الأحمر، ويجب تحديث حالة aria-invalid في التطبيق بعد التصحيح. النتيجة المتوقعة: توسم الكمية صفر بخطأ ورسالة إصلاح محددة.
اختبار التعافي لا الرفض وحده
يساعد النموذج على النجاح بعد الخطأ. اختبر إرسال قيما مصطنعة والعثور على المشكلة وفهمها وتصحيحها والوصول إلى تأكيد صادق. احفظ العلاقات بعد التجاوب ولا تحبس التركيز أو تغطه. يعزز اللون والرمز النص ولا يستبدلانه. تحتاج أخطاء الخادم رسالة أيضا خاصة عند نتيجة جزئية أو مجهولة. تقدم HTML وCSS بنية وعرضا ولا ينفذ إطار أخضر الطلب والتفويض والتخزين.
الأخطاء الشائعة وإصلاحها
يختفي التركيز
- لماذا يحدث؟
- أزال التصفير الإطارات دون بديل.
- كيف تصلحه؟
- أعد مؤشرا وافحص القص.
- كيف تتجنب تكراره؟
- تنقل في كل عنصر بالمفاتيح.
لا يرتبط الخطأ بالحقل
- لماذا يحدث؟
- جاوره النص بصريا فقط.
- كيف تصلحه؟
- اربطه بمعرف ووصف مناسب.
- كيف تتجنب تكراره؟
- افحص الوصف مع ظهور الخطأ.
تغيب قيمة معطلة عن الإرسال
- لماذا يحدث؟
- استُخدمت disabled للمظهر.
- كيف تصلحه؟
- اختر readonly أو عرضا عاديا بحسب العقد.
- كيف تتجنب تكراره؟
- اختبر بيانات كل حالة.
اختبر فهمك
1. صمم رسالة لحقل يقبل مواعيد ورشة مستقبلية فقط.
اعرض الحل المشروح
أبق التسمية «موعد الورشة» وأضف «اختر تاريخا بعد اليوم» واربطها بالحقل وحدد حالته. يجب أن يطبق التحقق سياسة تاريخ ومنطقة التطبيق لا اللون فقط.
2. ماذا تختبر بعد استبدال تنسيق النماذج الافتراضي؟
اعرض الحل المشروح
افحص التركيز والتعطيل والقراءة والاختيار والأخطاء والإكمال والتكبير والتباين والبيانات المرسلة. يتحمل المظهر الجديد مسؤولية كل إشارة أزالها، وتغطي الصورة الافتراضية حالة واحدة فقط.
أهم ما تعلمته
- يعتمد وضوح التركيز على التخطيط والتباين.
- اربط الأخطاء واشرح التصحيح.
- للحالات سلوك ومظهر.