왜 필드 셋 태그가 필요합니까?

왜 <fieldset>태그 가 필요 합니까? 어떤 용도로 사용 되든 양식 태그의 하위 집합 일 수 있습니다.

W3Schools에 대한 정보를 찾았습니다.

• <fieldset>태그 형태로 그룹 관련 요소에 사용된다.
• <fieldset>태그는 관련 요소 주위에 상자를 그립니다.

"이것이 무엇을 하는가"에 대해 "사양에 존재하는 이유"를 착각하는 사람들에 대한 자세한 설명. 그림 부분은 관련이 없다고 생각하며 양식에 관련 요소를 그룹화하기 위해 왜 특수 태그가 필요한지 알 수 없습니다.

가장 분명하고 실용적인 예는 다음과 같습니다.

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

이를 통해 각 라디오 버튼에 레이블을 지정할 수 있으며 그룹 전체에 레이블을 제공 할 수 있습니다. 컨트롤과 컨트롤 범례를 시각적으로 표현할 수없는 보조 기술 (예 : 화면 판독기)을 사용하는 경우 특히 중요합니다.

fieldset의 또 다른 기능은이 기능을 비활성화하면 그 안에 포함 된 모든 필드가 비활성화됩니다.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

접근성을 위해 필요합니다.

체크 아웃 : http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML 4 요소 fieldset를 legend사용하면 테이블을 사용하지 않고도 논리적으로 다양한 관심 영역이있는 큰 양식을 레이아웃하고 구성 할 수 있습니다. fieldset태그는 선택 요소 주위에 상자를 만드는 데 사용할 수 있으며, legend태그는 이러한 요소에 캡션을 제공 할 것입니다. 이러한 방식으로 양식 요소를 식별 된 범주로 그룹화 할 수 있습니다.

브라우저 fieldset마다 다른 방식으로 기본 테두리 가 표시 될 수 있습니다 . 계단식 스타일 시트를 사용하여 테두리를 제거하거나 모양을 변경할 수 있습니다.

여기 에 설명 된 대로이 태그의 목적은 양식의 구성을 명확하게하고 디자이너가 양식 요소를 장식하기 위해 더 쉽게 액세스 할 수 있도록하는 것입니다.

Fieldset은 항목을 논리적으로 구성하지만 청각 브라우저를 사용하는 사람들의 접근성을 향상시킵니다. Fieldset은 편리하므로 많은 응용 프로그램에서 과거에 매우 인기가 있었으므로 HTML로도 구현했습니다.

라디오를 필드 세트로 둘러싸고 라디오 버튼 입력 태그에 ID를 넣지 않으면 필드 세트로 표시된 그룹이 단일 항목 인 것처럼 탭 체인에 추가되는 것이 좋습니다.

그러면 양식을 탭할 수 있고 필드 세트에 도달하면 화살표 키를 사용하여 선택한 라디오를 변경 한 다음 완료되면 탭을 해제 할 수 있습니다.

또한 접근성을 잊지 마십시오. 화면 판독기는 양식을 이해하고 자연스럽게 사용자에게 읽을 수 있으려면 fieldset + legend가 필요합니다. 눈에 띄는 사용자가 볼 수 없도록하려면 전설을 사라지게하십시오. CSS를 사용하여 바로 범례를 레이아웃하고 스타일을 지정하는 것은 레거시 브라우저에서 특히 브라우저 간 욕설을 유발하기 때문에 화면 판독기 사용자에게는 범례 태그가 보이지 않게하고 레이블처럼 스타일이 지정된 별도의 aria-hidden = "true"범위를 추가합니다. 눈에 보이는 사용자는 스타일을 간단하게 만들고 접근성을 유지합니다.

CSS 스타일과 레이블을 컨트롤에 연결하는 것이 편리하다는 것을 알았습니다. 필드 그룹 주위에 시각적 컨테이너를 쉽게 배치하고 레이블을 정렬 할 수 있습니다.

필드 집합을 사용하여 거대한 양식이 있고 일종의 양식 마법사에서 분류하려는 경우 양식 입력을 그룹화합니다.

이 같은 질문에 대한 답변이 여기 에 있습니다.

몇 가지 장점을 요약하면 다음과 같습니다.

HTML  <fieldset> 요소는 MDN에<label> 의해 정의 된대로 웹 양식 내에서 여러 컨트롤과 레이블 ( ) 을 그룹화하는 데 사용됩니다 .

즉 , fieldset 태그를 사용하면 양식을보다 설명하기 위해 필드 집합을 논리적으로 그룹화 할 수 있습니다. 따라서 선택적으로 공통 이름으로 그룹화 된 양식 컨트롤 세트입니다.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

필드 셋 사용 의 " 장점 "은 다음과 같습니다.

• 그것들은 가장 의미 론적 으로 데이터 (이 경우에는 폼)를 마크 업할 수있게합니다 . 필드를 필드 세트에 배치하는 것이 필드를 div에 배치하는 것보다 설명하기 쉽습니다. div는 필드 간의 관계에 대해 아무 것도 알려주지 않으며 필드 세트는 관계가 있음을 나타냅니다.
• 사용하여 비활성화 , 당신이 한 가지에있는 모든 내용을 해제 할 수 있습니다.
• 접근성에 도움이됩니다

나를 위해, <fieldset>...</fieldset>요소 의 가장 큰 장점 중 하나 는 폼 안에 있지 <form>...</form>않더라도 컨텍스트 를 유지할 수 있다는 <fieldset>...</fieldset>것입니다.

예를 들면 다음과 같습니다.

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

의미 적으로 다음 형식과 동일합니다.

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>