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>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <fieldset> | 지원함 | 지원함 | 지원함 | 지원함 | 지원함 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 <fieldset> 요소에 새로운 속성들이 추가되었습니다.
사용할 수 있는 속성
: HTML5에서 새롭게 추가된 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
disabled |
<fieldset> 요소에 포함된 <form> 요소들이 비활성화됨을 명시함. |
|
|
|
form id |
<fieldset> 요소에 포함될 하나 이상의 <form> 요소를 명시함. |
|
|
이름 |
<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); }; |
