غويا قوائم خانة تصحيح HTML

Question

ولقد حصلت على قائمة مربع HTML التي أود أن عرض بالتنسيق التالي:

Click all that apply:
                                 Title A      Title B

Option 1                         [  ]         [  ]
Option 2                         [  ]         [  ]
Option 3                         [  ]         [  ]

وأنا أتساءل ما هي أفضل طريقة لرمز هذا غويا؟

ورأيت سؤال ذات الصلة على مربعات الصحيحة لغويا، ولكن هذا لا يأخذ بعين الاعتبار الألقاب.

وأي أفكار؟

Answer 1

والصفوف والأعمدة وصفت؟ هذه هي حالة حيث الجدول هو الشيء الصحيح من شبه المؤكد.

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

Answer 2

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

وفكر كيف سيكون عرض هذه المجموعة من 1S و 0s: أنت تفعل ذلك في جدول. كل ما تقوم به هو جعل خلايا قابلة للتحرير.

وأنا أكثر اقتناعا من عندما بدأت تأليف هذا المنصب. جدول هو الهيكل المناسب لذلك.

Answer 3

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

ومع ذلك، فإن النموذج الناتج سوف يكون من الصعب جدا للاستخدام. لا شيء من هذا النص هو مناسبة للاستخدام كتسمية للكل مربع على حدة، لذلك سيضطر المستخدمين على العثور على وانقر على منطقة صغيرة نشطة للمربع نفسه.

واقتراحي سيكون لاستخدام مجموعتين من الخيارات، كما يلي:

<fieldset><legend>Title 1</legend>
  <input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
  <input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
  ...
</fieldset>
<fieldset><legend>Title 2</legend>
  ...
  <input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
  <input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>

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

Answer 4

سوف

والجداول يكون أسهل طريقة، ولكن يجب استخدام الجداول للبيانات كما نعلم.

وهكذا فما استقاموا لكم فاستقيموا استخدام البناء شعبة:

+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
||                                                +class=opt++class=opt+||
||                                                | title a || title b |||
||                                                +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1                                     ||   [x]   ||   [x]   |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option                                              |
+------------------------------------------------------------------------+

كل شيء يجب ان تذهب الى CSS. (أيضا "مضمنة" تعريفات عرض أعلاه)

.opt { 
  float:right; width: 10%; /*probably*/ z-index: 99; 
  /*edit2:*/ position: relative;
}

ولست متأكدا إذا كان هذا يعمل، وأود أن محاولة من هذا القبيل.

وتحرير: آه، هذه المربعات "شعبة" ليالي، راجع للشغل