의미 적으로 올바른 HTML 확인란 목록
-
05-07-2019 - |
문제
다음 형식으로 표시하려는 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입니다.