본문 바로가기
html

fieldset 태그, legend 태그

by 지구별에 2014. 10. 27.

 

 

[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 속성

 

반응형

'html' 카테고리의 다른 글

[html] meta 태그 사용법  (7) 2014.12.17
[html5] datalist 태그  (0) 2014.10.28
[html] optgroup 태그  (0) 2014.10.24
[html] option 태그  (0) 2014.10.22
[html] select 태그  (2) 2014.10.21

댓글