[HTML] <fieldset>

<fieldset>

<fieldset> 태그는 폼 컨트롤 요소의 내부 영역을 설정합니다.

---

<fieldset>

<fieldset> 태그는 폼 컨트롤 요소의 내부 영역을 설정합니다.

특징	설명
요소	블록 요소(Block Element)
닫는 태그	닫는 태그 사용(<fieldset> ~ </fieldset>)
버전	HTML4
시각적 표현	2px 너비의 groove 테두리
사용성

정의(Definition)

• <fieldset> 태그는 폼 컨트롤 요소의 내부 영역을 설정합니다.
• <fieldset> 태그는 폼 요소의 여러 컨트롤과 <label>을 그룹화 하는데 사용합니다.
• <fieldset> 태그는 폼 요소의 내부 영역 설명을 <legend> 요소로 설정합니다.
• <fieldset> 태그는 HTML5에서 disabled, form, name 속성이 추가되었습니다.

비교(Compare)

• <form> 태그는 웹 서버에 정보를 제공하는 폼 컨트롤 유형을 설정합니다.
• <fieldset> 태그는 폼 컨트롤 요소의 내부 영역을 설정합니다.
• <input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 설정합니다.
• <label> 태그는 해당 <input> 요소의 제목을 설정합니다.
• <legend> 태그는 <fieldset> 요소 영역의 설명을 설정합니다.

속성(Property)

속성	값(예)	설명	버전
disabled	disabled	fieldset 영역을 사용하지 않도록 설정합니다.
form	form="id"	fieldset 영역의 폼 아이디를 설정합니다.
name	name="text"	fieldset 영역의 이름을 설정합니다.

예제1(Sample)

폼 컨트롤 예제입니다.

로그인

이메일 :

비밀번호 :

HTML

CSS

SCRIPT

<form action="next.html" method="get">
    <fieldset>
        <legend>로그인</legend>
        <div>
            <label for="name">이메일 : </label>
            <input type="text" name="email" id="email" required>
        </div>
        <div>
            <label for="email">비밀번호 : </label>
            <input type="password" name="password" id="password" required>
        </div>
        <div>
            <input type="submit" value="로그인">
        </div>
    </fieldset>
</form>

//CSS none

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
<fieldset>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
<form>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
<name>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
<fieldset>	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---