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

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

---

왜 <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">Red</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를 넣지 않으면 필드 세트로 표시된 그룹이 단일 항목 인 것처럼 탭 체인에 추가되는 것이 좋습니다.

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

Also, don't forget accessibility. Screen readers need fieldset+legend in order to understand your form and be able to read it off to the user in some sort of natural way. Feel free to disappear the legend if you don't want sighted users to see it. Laying out and styling legend just right with CSS is sometimes dicey cross-browsers especially with legacy browsers, so I find making the legend tag invisible for screen reader users and adding a separate, aria-hidden="true" span styled like a label for sighted users makes things simple to style and keeps things accessible.

---

I find it handy for CSS styling and associating labels to controls. It makes it easy to put a visual container around a group of fields and align the labels.

---

I use fieldsets to group form inputs, when I have a huge form and want to break it up in a sort of form wizard.

This same questions was answered here on SO.

---

Just summarising some advantages:

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form as it is defined by MDN.

In other words: The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive. So, a set of form controls optionally grouped under a common name.

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

The "advantages" of using a fieldset are:

• they allow you to mark up your data (in this case a form) in the most semantic way available. Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div. The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.
• by using disabled, it allows you to disable the and all its contents in one go.
• it's helpful to accessibility

참고URL : https://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag