fieldset 태그, legend 태그

 

 

[html] fieldset 태그, legend 태그

 

지난 시간에 optgroup 태그는 관계 있는 옵션들끼리 묶는 역할을 한다고 했습니다.

 

[html] optgroup 태그

 

fieldset 태그도 이와 유사합니다.

 

fieldset은 form 양식에서 관계된 요소들끼리 묶어주며,  관계 요소 주위에 박스를 그립니다.

 

fieldset은 주로 legend 태그와 함께 쓰이는데,  fieldset 요소에 대한 설명글 입니다.

 

fieldset 문법: <fieldset >내용</fieldset>

legend 문법: <legend>내용</legend>
 

 

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
name	text	fieldset 이름
form	form id	fieldset이 속한 form의 id
disabled	disabled	form에서 관계 요소그룹이 비활성화 됨 문법: <fieldset disabled> , xhtml에서는 <fieldset disabled="disabled"> 브라우저 지원: ie, safari 제외하고 주요브라우저 지원 함

 

▶html/css 작성 예

fieldset.htm

 

 

html

 <form>
  <fieldset name="flower">
    <legend>flower</legend>

<input type="checkbox" name="flower" value="rose">rose<br>
<input type="checkbox" name="flower" value="ivy">ivy<br>
<input type="checkbox" name="flower" value="jasmin">jasmin<br>

  </fieldset>
</form>

 

 

css

fieldset{
width: 200px;
background-color:#F361A6;
}

 

 

▶ 실행 화면입니다.

 

fieldset으로 묶은 부분에 선이 그려졌고, fledset에 대한 설명글 flower가 표시됩니다.

 

 

 

 다음 시간엔 datalist를 알아보겠습니다~

 

option 태그

 

select 태그

 

button 태그

 

input type 속성