لقد حظي توحيد الويب بمزيد من الاهتمام والاهتمام من الجميع. عند إنشاء صفحات ويب تتوافق مع معايير الويب، غالبًا ما نواجه نقصًا في المعرفة في هذا المجال. تقدم لك مقالة اليوم بعض الهياكل الدلالية نأمل أن يساعد تخطيط CSS للجميع.
1. استخدم علامات مجموعة الحقول والوسائط التوضيحية
في النموذج، غالبًا ما نقوم بتجميع المعلومات الموجودة في النموذج، على سبيل المثال، في نموذج التسجيل، قد نقوم بتجميع معلومات التسجيل في معلومات أساسية (مطلوبة بشكل عام) ومعلومات تفصيلية (اختيارية بشكل عام). هو - هي؟ يمكننا التفكير في إضافة العلامتين التاليتين إلى النموذج:
مجموعة الحقول: يمكن أن يحتوي النموذج على مجموعات حقول متعددة.
وسيلة الإيضاح: وصف محتوى كل مجموعة
| وفيما يلي المحتوى المقتبس: <form id = "demoform" class = "democss" action = ""> <مجموعة الحقول> <legend>التسجيل الأساسي</legend> <p>الاسم الأول: <input type="text" name="fname" value="" /></p> ... </فيلدسيت> <مجموعة الحقول> <legend>التسجيل التفصيلي</legend> <p>الاهتمام: <input type="text" name="interest" value="" /></p> ... </فيلدسيت> ... </النموذج> |
يتم تحديد مجموعة الحقول بشكل افتراضي، ويتم عرض وسيلة الإيضاح بشكل عام في الزاوية اليسرى العليا بشكل افتراضي. لكن في بعض الحالات، قد لا ترغب في السماح للأنماط الافتراضية أو التخطيطات الافتراضية لمجموعات الحقول ووسائل الإيضاح بالتأثير على جماليات التصميم.
الحل: قم بتعيين حدود مجموعة الحقول على 0 وعرض وسيلة الإيضاح على لا شيء في CSS.
2. استخدم علامات التسمية
نعطي تسمية تسمية لتسمية النص في النموذج ونستخدم سمة for لربطها بمكون النموذج. التأثير هو أنه عند النقر فوق تسمية النص، يتم عرض المؤشر في مكون النموذج المقابل.
| وفيما يلي المحتوى المقتبس: <form id = "demoform" class = "democss" action = ""> <مجموعة الحقول> <legend>التسجيل الأساسي</legend> <ص> <label for="fname">الاسم الأول:</label> <نوع الإدخال = "نص" معرف = "fname" اسم = "fname" قيمة = "" /> </ص> ... </فيلدسيت> <مجموعة الحقول> <legend>التسجيل التفصيلي</legend> <ص> <label for="interest">الاهتمام:</label> <input type = "text" id = "interest" name = "interest" value = "" /> </ص> ... </فيلدسيت> ... </النموذج> |
بالإضافة إلى الطرق المذكورة أعلاه، يمكننا أيضًا استخدام التسمية لدمج مكون النموذج بالكامل والتسمية النصية، مثل:
| وفيما يلي المحتوى المقتبس: <تسمية لـ = "fname"> الاسم الأول: <نوع الإدخال = "نص" معرف = "fname" اسم = "fname" قيمة = "" /> </التسمية> |
وفقًا للمواصفات، سيتم ربط النص تلقائيًا بمكونات النموذج المجاورة، ولكن لسوء الحظ - لا يدعم المتصفح السائد الحالي IE6 هذه الميزة.
3. استخدم سمات مفتاح الوصول وtabindex
تحتاج مواقع الويب إلى مراعاة المزيد من حالات الاستخدام، على سبيل المثال، عندما لا يكون هناك جهاز مؤشر (مثل الماوس)، يمكن ملء النموذج باستخدام عمليات لوحة المفاتيح في هذا الوقت، ولا معنى للنقر عليها. في هذا الوقت، نختار مفتاح الوصول الخاص بالتسمية (مفتاح الاختصار، وقيمة سمة alt+accesskey ضمن IE، وalt+shift+ قيمة سمة مفتاح الوصول ضمن FF) وسمة tabindex (مفتاح Tab، وقيمة سمة tabindex هي التسلسل) لإضافتها إلى تسمية النموذج، مثل التسمية والإدخال وما إلى ذلك.
| وفيما يلي المحتوى المقتبس: <label for="fname" accesskey="f" tabindex="1" >الاسم الأول:</label> <نوع الإدخال = "نص" معرف = "fname" اسم = "fname" قيمة = "" /> |
4. استخدم علامة optgroup
يتمثل دور علامة optgroup في تحديد مجموعة من الخيارات في قائمة التحديد. يمكننا استخدام علامة optgroup لتصنيف خيارات عنصر التحديد واستخدام سمة التسمية، وسيتم عرض قيمة السمة كعنوان بمسافة بادئة غير قابلة للتحديد في القائمة المنسدلة (حدد). ملاحظة: لا تدعم مجموعات optgroup التداخل.
| وفيما يلي المحتوى المقتبس: <اختر الاسم = "الصين"> <optgroup label="جيانغسو"> <option value="nj">نانجينغ</option> <option value="sz">سوتشو</option> </optgroup> <optgroup label = "تشجيانغ"> <option value="hz">هانغتشو</option> <option value="wz">ون تشو</الخيار> </optgroup> </حدد> |
يوجد خطأ صغير في IE6.0 (غير موجود في FireFox): عند استخدام مفاتيح الأسهم في لوحة المفاتيح للاختيار، في IE، عندما يتم تغيير العنصر المحدد من خيار مجموعة optgroup إلى خيار مجموعة optgroup أخرى، لن يحدث onchange يتم تشغيله. الحل هو: إضافة أحداث onkeydown أو onkeyup للمساعدة في حل المشكلة.
5. استخدم علامات الأزرار
التعريف والاستخدام
تم تعريفه على أنه زر إرسال. داخل عنصر الزر، يمكنك وضع محتوى، مثل النص أو الصور. هذا هو الفرق بين هذا العنصر وزر عنصر الإدخال.
<button><img src="images/click.gif" alt="انقر فوقي!" />انقر فوقي!</button>
يوفر الزر وظائف أكثر ومحتوى أكثر ثراءً من الإدخال. يفصل الزر نص الزر، ويمكنك إضافة صور داخل الزر، مما يمنح النص والصور المزيد من الأنماط للاختيار من بينها، مما يجعل الزر الصلب أكثر حيوية.
وسيكون استخدام علامات الأزرار أكثر دلالة من أزرار الإدخال، ويمكن فهمه ببساطة من المعنى الحرفي.