HTML 강좌 / fieldset, legend, autocomplete로 양식 설명하기

HTML 강좌

관련된 입력 항목은 fieldset으로 묶고 legend로 그룹의 질문을 설명합니다. 개인 정보처럼 브라우저가 이미 알고 있을 수 있는 값에는 알맞은 autocomplete 토큰을 지정하면 입력을 돕는 환경을 제공할 수 있습니다.

fieldset과 legend로 질문 묶기

라디오 버튼 여러 개에 각각 레이블이 있어도 ‘무엇을 고르는지’는 별도로 설명해야 합니다. legend가 그 그룹의 이름을 제공합니다.

<fieldset>
  <legend>연락받을 방법</legend>
  <label><input type="radio" name="contact" value="email"> 이메일</label>
  <label><input type="radio" name="contact" value="phone"> 전화</label>
</fieldset>

브라우저에서 이 예제를 열면 기본 테두리와 제목이 보일 수 있습니다. 그 모양은 CSS로 바꿀 수 있지만, 그룹과 질문의 관계는 HTML에 남습니다. 한 그룹 안의 라디오 버튼은 같은 name을 사용해야 한 번에 하나만 선택됩니다.

각 항목의 레이블은 ‘이메일’, ‘전화’처럼 선택지 자체를 설명하고, legend는 ‘연락받을 방법’이라는 공통 질문을 설명합니다. 둘 중 하나만 있으면 사용자가 선택지를 어떤 질문에 대한 답으로 고르는지 놓치기 쉽습니다. 그룹이 여러 개라면 질문마다 별도의 fieldset을 만들어 의미를 분리하세요.

autocomplete로 입력 목적 알리기

<form action="/contact" method="post">
  <fieldset>
    <legend>연락처</legend>
    <label for="full-name">이름</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">이메일</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">보내기</button>
</form>

autocomplete="name"과 autocomplete="email"은 각각 필드의 목적을 설명합니다. 자동 완성 목록이 실제로 나타나는지는 브라우저 설정과 저장된 정보 등에 따라 달라집니다. /contact는 처리 서버가 있어야 동작하는 예시 주소입니다.

autocomplete는 값을 미리 고정하거나 사용자 대신 제출하지 않습니다. 브라우저가 적절한 저장 정보를 제안할 수 있도록 필드의 의미를 알려 주는 힌트입니다. 필드의 name은 서버가 받는 키이고, autocomplete 토큰은 입력 목적이라는 점도 구별하세요. 개인정보를 다루는 양식에서는 사이트의 보안·개인정보 정책과 실제 저장 방식을 함께 검토해야 합니다.

그룹과 자동 완성을 점검하기

서로 다른 질문을 하나의 fieldset에 과도하게 묶지 마세요. 반대로 하나의 질문에 속한 라디오 버튼은 그룹 이름 없이 흩어 놓지 않는 것이 좋습니다. autocomplete에는 임의의 단어가 아니라 해당 입력 목적에 맞는 정의된 토큰을 사용하세요. 브라우저 자동 완성만 믿고 사용자의 입력값을 검증하지 않는 것도 피해야 합니다.

세부 속성과 허용 토큰은 MDN autocomplete 속성 문서와 MDN fieldset 요소 문서를 참고하세요.

실제로 확인하려면 서로 다른 두 질문을 한 양식에 만들어 보세요. 첫 질문의 라디오 버튼을 선택한 뒤 두 번째 질문을 선택했을 때 첫 선택이 풀린다면, 두 그룹에 같은 name을 사용했을 가능성이 있습니다. 같은 그룹 안에서는 이름을 같게, 독립된 그룹 사이에서는 다르게 지정해야 합니다.

HTML 강좌