Fieldset and Legend
필드셋 및 레전드
`<fieldset>`과 `<legend>`는 관련된 폼 컨트롤 그룹을 위한 내장 HTML 요소입니다. legend는 그들이 공유하는 질문을 명시합니다.
다른 예시
세금 신고 양식은 ‘Filing status’라는 범례 아래 세 개의 라디오 버튼을 배치합니다. 각 선택에는 여전히 자체 라벨이 있습니다. 오류가 있는 경우 범례 뒤에 나타나서 어떤 질문을 수정해야 하는지 사람들이 알 수 있습니다.
주요 부분
- 01필드셋 경계
- 02범례 질문
- 03레이블이 지정된 컨트롤
사용할 때
라디오 버튼, 체크박스 또는 하나의 공통 질문에 답하는 필드에 사용하세요.
다음 경우에는 사용하지 마세요
박스를 스타일링하는 목적만으로 `<fieldset>`를 사용하지 마세요. 내부의 모든 컨트롤에는 여전히 각자의 레이블이 필요합니다.
코드에서 사용된 이름
fieldset > legend + individually labeled controls 출시하기 전에
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome:Complete the task with 필드셋 및 레전드 (Fieldset and Legend)。 User context:세금 신고 양식은 ‘Filing status’라는 범례 아래 세 개의 라디오 버튼을 배치합니다. 각 선택에는 여전히 자체 라벨이 있습니다. 오류가 있는 경우 범례 뒤에 나타나서 어떤 질문을 수정해야 하는지 사람들이 알 수 있습니다. Recommended pattern:필드셋 및 레전드 (Fieldset and Legend)。 Why it fits:라디오 버튼, 체크박스 또는 하나의 공통 질문에 답하는 필드에 사용하세요. Do not use it when:박스를 스타일링하는 목적만으로 `<fieldset>`를 사용하지 마세요. 내부의 모든 컨트롤에는 여전히 각자의 레이블이 필요합니다. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary):이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 필드셋 및 레전드 (Fieldset and Legend) is used now. Definition: `<fieldset>`과 `<legend>`는 관련된 폼 컨트롤 그룹을 위한 내장 HTML 요소입니다. legend는 그들이 공유하는 질문을 명시합니다. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.