دلل بنية HTML لصفحات البيانات

Question

ما هو أفضل هيكل للاستخدام عند تصميم طريقة عرض نموذج / تفاصيل للحصول على أقصى قدر من قابلية القراءة (إمكانية الوصول) والتعددية؟

على سبيل المثال، يقوم سقيفة إطار ASP.NET MVC Framework بإنشاء حقل مع أسطورة في الأعلى وجميع الحقول الموجودة في P (تسمية ثم مجموعة الإدخال / المحرر).

ما هو أكثر الهيكل متعدد الاستخدامات للاستخدام، هل تعتقد؟

على سبيل المثال، إذا كنت ترغب في تغيير التصميم في وقت لاحق أن يكون لديك حقلان أو ثلاثة حقول جنبا إلى جنب بدلا من أعلى إلى أسفل، فسأريد إلا أن أفعل ذلك عبر CSS، لأنها ليست ذات صلة هيكليا.

شكرا،
كيران

تعديل: كانت توصية الأصدقاء لاستخدام DL و DT و DDS ... هل لدى أي شخص أي أفكار على ذلك؟

Answer 1

يمكنني استخدام هيكل مشابه جدا للآخر الذي تم إنشاؤه بواسطة سقالات ASP.NET، إلا أنني استخدم Divs بدلا من PS:

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

يمكنني استخدام Divs لأنني صحيحة أكثر دلالة من عناصر P كما هو مخصص للفقرات من النص.

عندما يتعلق الأمر بتصميم هيكل متعدد الاستخدامات أيضا لأنك تستطيع على سبيل المثال، قم بإجراء الأطباق 500PX واسعة وعرض العوامل DIV 250PX واسعة، وبالتالي تحقيق جنبا إلى جنب. أو يمكن أن يكون لديك نفس عرض الحقول كحقيقة DIV. أو هل يمكن أن يكون لديك الحقلة وحقلة DIV نفس العرض ثم تلتصق فئة على بعض divs (قل "النصف") التي هي نصف العرض وتطفو. الاحتمالات لا حصر لها حقا.

في أي حال، هذا مجرد ما أستخدمه للأشياء اليومية - على الرغم من تنوعه، فقد لا يناسب جميع المتطلبات.

تعديل بقدر ما يتعلق الأمر بقوائم التعريف، فهي عناصر متخصصة لا ينبغي استخدامها بشكل صحيح لوضع نموذج.

Answer 2

أود فقط إنشاء نموذج أساسي ودع الهيكل ينمو في ذلك.

<form>
  <input>
  <input>
  <input>
</form>

ثم عندما تحتاج إلى تجمعات

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

ثم تفعل كل العرض التقديمي الخاص بك في CSS. أفضل طريقة لاختبار إمكانية الوصول هي إيقاف تشغيل جميع الأنماط ومعرفة ما إذا كان الموقع منطقي.

النماذج هي عناصر مستوى الحظر حتى يتم تصحيحها بشكل شبه نفسي لاحتواء العناصر الأخرى.