<form>-<fieldset></fieldset> <legend></legend> 관련 요소 주위에 상자 그림

| HTML/xhtml문법

2014. 1. 24. 22:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form> - <fieldset> - <legend> 사용법<br /><br />
<b><fieldset> 형태로 그룹 관련 요소에 사용됩니다.</b><br />
( 브라우저가 덜 지원하는 HTML5추가 속성 - disabled, form, name )<br />
<fieldset> 관련 요소 주위에 상자를 그립니다. <br />
<fieldset> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
<br />
<b><legend> <fieldset> 요소를 캡션 정의합니다.</b><br />
( 속성 - align )[설명은 생략 => table태그쪽에 보시면 나와있습니다.]<br />
HTML5에서 지원되지 않습니다. 대신 CSS를 사용합니다.<br />
<legend> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
<br />
<hr />
<div id="ex_view2">
<style type="text/css">
<!--
.fieldset_atte_value{ border-collapse:collapse; }
.fieldset_atte_value th{ text-align:left; }
.fieldset_atte_value td{ padding-left:10px; }
-->
</style>
<form name="fieldset_type" id="fieldset_type" method="post" >
<p><b>예제 - <fieldset></b></p>
<table border=1 class="fieldset_atte_value">
<tr>
<th><fieldset> - <legend></th>
<td>
<fieldset>
<legend style="text-align:center;">로그인</legend>
아이디: <input type="text" size="20"><br>
비밀번호: <input type="text" size="20"><br>
</fieldset>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

<fieldset> - <legend>	로그인 아이디: 비밀번호:

<fieldset></fieldset>

<legend></legend>

<select> 형태로 그룹 관련 요소에 사용됩니다.

브라우저가 덜 지원하는 속성(HTML5추가 속성) - disabled, form, name

<legend> <fieldset> 요소를 캡션 정의합니다.

속성-align (설명은 생략 =>CSS를 사용)

위 소스에서는 HTML5추가 속성은 생략했습니다.

그외 XHTML 소스의 예제는 위에서 보기로 보시면 됩니다.

Global Attributes 지원합니다.

Global Event Attributes 지원합니다.

출처&인용 : http://www.w3schools.com/tags/tag_fieldset.asp

출처&인용 : http://www.w3schools.com/tags/tag_legend.asp

저작자표시 비영리 변경금지

'HTML > xhtml문법' 카테고리의 다른 글

<form> - <select> <option> <optgroup> 선택 목록 작성 (0)	2014.01.24
<button></button> 클릭 할 수 있는 버튼 생성 (0)	2014.01.24
<textarea></textarea> 여러 줄 텍스트 입력 (0)	2014.01.22
<form>-<input>, <input /> <label></label> 입력 필드 지정 (0)	2014.01.22
<form></form> 폼 양식 속성 설명 (0)	2014.01.22