의미 적으로 올바른 HTML 확인란 목록

StackOverflow https://stackoverflow.com/questions/1608101

문제

다음 형식으로 표시하려는 HTML 확인란 목록이 있습니다.

Click all that apply:
                                 Title A      Title B

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

이 의미 적으로 코딩하는 가장 좋은 방법이 궁금합니다.

나는 a 관련 질문 의미 적으로 올바른 확인란에서는 제목을 고려하지 않습니다.

어떤 아이디어?

도움이 되었습니까?

해결책

라벨이 붙은 행과 열? 이것은 테이블이 올바른 것인 경우 거의 확실합니다.

사용자가 선택을하고 양식을 제출 한 후에는 선택을 다시 표시한다고 상상해보십시오. 수집 된 데이터를 표시하기 위해 테이블을 사용하는 것이 정확하므로 데이터를 수집하는 양식을 표시하기 위해 테이블을 사용하는 것이 맞습니다.

다른 팁

체크 박스의 의미는 행과 열에 따라 결정되기 때문에 테이블이 올바른 의미 론적 구조라고 제안합니다.

이 1과 0의 세트를 어떻게 표시 할 것인지 생각해보십시오. 테이블에서 할 것입니다. 당신이하는 일은 세포를 편집 할 수 있도록하는 것입니다.

이 게시물을 작성하기 시작했을 때보 다 더 확신합니다. 테이블은 이것에 대한 올바른 구조입니다.

의미 적 으로이 레이아웃은 테이블처럼 보이 므로이 레이아웃을 실제로 사용해야한다면 테이블로 표시해야합니다. (제목 및 옵션에는 TD를 사용하고 체크 박스가 포함 된 셀에는 TD를 사용하십시오.)

그러나 결과 형식은 사용하기가 매우 어렵습니다. 텍스트 중 어느 것도 각 개별 확인란의 레이블로 사용하기에 적합하지 않으므로 사용자는 확인란 자체의 작은 활성 영역을 찾아서 클릭해야합니다.

내 제안은 다음과 같은 두 가지 옵션 그룹을 사용하는 것입니다.

<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>

예, 이것은 일부 텍스트를 반복하는 것을 의미하며, 이는 어느 정도 유지 가능성을 방해합니다. 그러나 나는 형태의 경우 유용성이 유지 될 수 있어야한다고 생각한다.

테이블이 가장 쉬운 방법이지만 테이블은 우리가 알고 있듯이 데이터에 사용해야합니다.

그래서 나는 div 구성을 사용합니다.

+---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;
}

이것이 작동하는지 확실하지 않습니다. 이렇게 시도 할 것입니다.

편집 : 아,이 상자는 "div"s, btw입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top