<fieldset>

초록공룡·2025년 8월 19일

HTML5

목록 보기
69/76

개념

  • form 안에서 연관된 입력 요소들과 그에 대응하는 label 들을 그룹으로 묶는 요소이다.

특징

  • 박스 모양의 경계선이 생겨, 시각적 구분을 제공한다.
  • legend 태그를 함께 쓰는 것이 좋다.

legned

  • 반드시 fieldset의 첫 번째 자식이어야 한다.

예시

<!-- 회원가입 양식 예시 -->
<form>
  <fieldset>
    <legend>기본 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br>
    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit">가입하기</button>
  </fieldset>

  <!-- disabled 예시 -->
  <fieldset disabled>
    <legend>운영자 정보</legend>
    <label for="admin_id">아이디:</label>
    <input type="text" id="admin_id" name="admin_id"><br>
    <label for="admin_pw">비밀번호:</label>
    <input type="password" id="admin_pw" name="admin_pw">
  </fieldset>
</form>
profile
빠른 행동, 쉽고, 간단하게

0개의 댓글