HTML <fieldset> 태그

정의 및 사용법

<fieldset> 폼에서 관련 요소를 그룹화하는 데 사용됩니다.

<fieldset> 라벨 태그는 관련 요소 주위에 장애물을 그립니다.

<legend> fieldset 요소의 제목을 정의하는 태그.

다른 참조를 참조하십시오:

HTML DOM 참조 설명서:Fieldset 객체

예제

예제 1

폼에서 관련 요소를 그룹화합니다:

<form action="/action_page.php">
  <fieldset>
    <legend>개인 정보：</legend>
    <label for="fname">이름：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">성：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="제출">
  </fieldset>
</form>

자신이 직접 시도해 보세요

예제 2

CSS를 사용하여 <fieldset>와 <legend>의 스타일을 설정합니다:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>개인 정보：</legend>
    <label for="fname">이름：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">성：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">이메일：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">생일：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="제출">
  </fieldset>
</form>
</body>
</html>

자신이 직접 시도해 보세요

힌트와 주석

힌트:<legend> 태그는 <fieldset> 요소에 제목을 정의하는 데 사용됩니다.

속성

속성 값 설명
disabled disabled 좌측에 비활성화된 여러 관련 폼 요소를 정의합니다.
form form_id 필드셋이 어느 폼에 속하는지 정의합니다.
name 텍스트 필드셋의 이름을 정의합니다.

전역 속성

<fieldset> 태그는 또한 지원합니다 HTML의 전역 속성。

이벤트 속성

<fieldset> 태그는 또한 지원합니다 HTML의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시됩니다 <fieldset> 요소:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (내부 값);
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원