Fieldset HTML 태그의 사용은 그룹화 형태 이상의 의미가 있습니까?

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

  •  10-07-2019
  •  | 
  •  

문제

일반적으로 양식으로 보았지만 관련 데이터 세트를 그룹화하는 데 도움이된다는 것을 알았습니다 (예 : 페이지에 여러 테이블이있는 경우 각 테이블 주위의 필드 세트 또는 관련 테이블 그룹을 사용하여 눈에 보이는 의미를 정의합니다. 및 그룹 이름 (전설)). 이것이 필드 세트 태그를 내 용도로 더 이상 의미적인 의미를 갖지 않는 지점까지 남용하고 있습니까?

도움이 되었습니까?

해결책

전설이있는 필드에 컨텐츠를 차단하는 의미 론적 장점을 볼 수 있습니다.

W3C는 필드 세트 및 범례를 양식과 관련 시켰지만, 양식 태그 외부에서 사용하면 실험에 새로운 경계가 열립니다. 사용중인 정의 목록과 잠재적으로 유사합니다.

나는 개인적으로 Fieldset의 "필드"가 필드를 형성하기 위해만 국한 적이 없다고 생각합니다. 그것은 단지 양식 태그 내에서 사용되는 관계에서 상속 된 관계를 물려 받았습니다. 필드는 그룹화를 참조합니다.

지역 공원과 레크리에이션에 가서 친구들과 소프트볼을한다고 상상해보십시오. 사용 가능한 3 개의 필드가 있습니다. 그들 모두는 울타리에 "야구 만"에 표시가 있습니다.

장비를 포장하고 집에 가나 요?

양식 태그 남용 외부의 필드 세트와 전설의 사용에 라벨을 붙이는 것은 좁은 시야가 좁습니다.

정의에서 양식을 언급하는 곳은 다음과 같습니다.

FieldSet 요소를 사용하면 저자가 주제별 관련 제어 및 레이블을 그룹화 할 수 있습니다. 컨트롤을 그룹화하면 사용자가 자신의 목적을 쉽게 이해할 수 있으며 동시에 시각적 사용자 에이전트의 탭 탐색 및 음성 지향 사용자 에이전트의 음성 탐색을 용이하게합니다. 이 요소를 올바르게 사용하면 문서에 더 액세스 할 수 있습니다.

XHTML 태그 서식 제어를 고려합니다. div p blockquote 등

<h1>The Big Book about Everything</h1>
<fieldset>
    <legend>Jokes</legend>
    <h2>30 pages of humorous Jokes</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Poems</legend>
    <h2>20 pages of well written poems</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Horror</legend>
    <h2>3 Short and scary stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
    <legend>Mystery</legend>
    <h2>3 Short and mysterious stories</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>

다른 팁

나는 이것이 학대 일 것이라고 믿는다. http://www.w3.org/tr/rec-html40/interact/forms.html#h-17.10 "필드 셋 요소는 저자가 주제별로 그룹화 할 수 있도록합니다. 통제 수단 그리고 레이블 ".

이름의 "필드"비트 fieldset ~을 참고하여 <form> 필드.

사용 fieldset 밖의 forms 그룹의 aribtary 데이터는 분명히 의미 론적 오용입니다.

그러나 귀하의 HTML은 검증하고 신을 검증 할 것입니다 ~하지 않을 것이다 새끼 고양이를 죽여라.

필드 셋 에 관한 것입니다 양식 제어 그룹. 관련 양식 컨트롤을 그룹화함으로써 저자는 양식을 더 작고 관리하기 쉬운 부품으로 나눌 수있어 사용자가 너무 많은 양식 컨트롤로 대면 할 때 공격 할 수있는 유용성 재해를 향상시킬 수 있습니다.

그렇게합니다 필드 세트는 항상 형태 내에서 필드를 그룹화한다는 의미입니다., 사양이 FieldSet에 대해서만 Forms와 상호 작용하는 컨텍스트 내에서만 필드셋에 대해 논의하더라도 ...

따라서 "남용"은 HTML 4 및 XHTML 사양에 필드 세트와 범례를 형태 요소 내에 포함시킬 필요가 없다는 사실에서 비롯 될 수 있습니다. 필드 셋은 신체 요소의 자녀 일 수도 있습니다. 필드를 형태 외부에 넣는 것은 유효한 구문입니다.

그러나 실제로 필드 세트가 아닌 필드 세트로 묘사하면 혼란을 유발합니다.

HTML / XHTML 태그를 요소의 의미를 설명하는 것으로 생각하는 것이 가장 좋습니다. 그런 다음 CSS를 사용하여 요소를 원하는 것처럼 보이게 할 수 있습니다.

프리젠 테이션 목적으로 데이터를 그룹화하면 여기에서 찾을 수 있습니다. 멋진 CSS 대안.

참조 :

.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;

}

.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
} 

.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
} 

<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec congue fermentum metus. Quisque vel ante. 
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. 
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. 
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. 
Fusce feugiat orci id eros facilisis laoreet. 
Integer vestibulum condimentum purus. 
Proin vehicula congue lacus. Quisque placerat diam nec enim. 
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>

테이블을 그룹화하려면 각 그룹에 적합한 제목 (H1-H6) 요소를 사용하는 것을 고려하십시오. 개별 테이블은 ''를 사용하여 설명 할 수 있습니다.표제' 요소. 각 테이블에 대해 '요약'속성도 사용할 수 있습니다.

사양에서 :

각 테이블에는 테이블의 목적에 대한 간단한 설명을 제공하는 관련 캡션 (캡션 요소 참조)이있을 수 있습니다. 스피치 또는 점자 기반 사용자 에이전트를 사용하는 사람들의 이점을 위해 더 긴 설명이 요약 속성을 통해 제공 될 수 있습니다.

그리고 레코드의 경우, 'Fieldset'요소는 양식 외부에서 사용하기위한 것이 아닙니다. 그리고 형태 내에서, 그것은 '개인 정보'또는 '청구 주소'와 같은 입력 필드와 같은 개념적으로 그룹화하기위한 것입니다.

다음은 필드 세트를 탐색 할 때 스크린 리더 사용자가 듣는 내용을 논의하는 흥미로운 기사입니다. http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibilityfieldset-legends/

FieldSet 태그는 독자 및 기타 보조 기술을 스크린하는 데 사용됩니다.

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