..

Search

<fieldset>

HTML <fieldset> 태그


정의 및 특징

<fieldset> 태그는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다.

 

<fieldset> 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줍니다.

또한, <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있습니다.


예제
<form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        학번 : <input type="text" name="st_id"><br>
        학과 : <input type="text" name="department"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<fieldset> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <fieldset> 요소에 새로운 속성들이 추가되었습니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

disabled

html5

disabled

<fieldset> 요소에 포함된 <form> 요소들이 비활성화됨을 명시함.

form

html5

form id

<fieldset> 요소에 포함될 하나 이상의 <form> 요소를 명시함.

name

html5 이름

<fieldset> 요소의 이름을 명시함.


CSS 기본값

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 (internal value);

}


DOM 인터페이스

interface HTMLFieldSetElement : HTMLElement {

  attribute boolean disabled;

  readonly attribute HTMLFormElement? form;

  attribute DOMString name;

 

  readonly attribute DOMString type;

 

  [SameObject] readonly attribute HTMLCollection elements;

 

  readonly attribute boolean willValidate;

  [SameObject] readonly attribute ValidityState validity;

  readonly attribute DOMString validationMessage;

  boolean checkValidity();

  boolean reportValidity();

  void setCustomValidity(DOMString error);

};


연관 페이지

HTML Form 요소 수업 ⇒


연습문제