접근성을 고려한 가입폼의 예제
1. 폼안의 내용그룹을 표시하는 fieldset
2. dl, dt, dd 를 이용한 의미있는 구성
3. float, clear 를 이용한 디자인변경
# fieldset
* 하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소로서, 회원가입 페이지의 전송양식을 예로 든다면 ‘필수입력, 선택입력’ 등과 같이 의미구조에 따라 전송할 내용을 그룹핑(또는 분할)
# legend
* FIELDSET 요소에 대한 캡션(또는 제목)을 제공하여 양식의 이해를 도움
* legend는 CSS로 변경하는 것이 쉽지 않은 경우가 있어 제목 요소(H1~H6)를 대신 사용할 수 있음
# DTD에따른 표현법 차이
* HTML 4.01: FIELDSET 사용시 LEGEND 요소는 반드시 첫 번째 자식(first-child)으로 마크업 되어야함
* XHTML 1.0: FIELDSET 사용시 LEGEND 요소는 생략 가능
1. 폼안의 내용그룹을 표시하는 fieldset
2. dl, dt, dd 를 이용한 의미있는 구성
3. float, clear 를 이용한 디자인변경
# fieldset
* 하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소로서, 회원가입 페이지의 전송양식을 예로 든다면 ‘필수입력, 선택입력’ 등과 같이 의미구조에 따라 전송할 내용을 그룹핑(또는 분할)
# legend
* FIELDSET 요소에 대한 캡션(또는 제목)을 제공하여 양식의 이해를 도움
* legend는 CSS로 변경하는 것이 쉽지 않은 경우가 있어 제목 요소(H1~H6)를 대신 사용할 수 있음
# DTD에따른 표현법 차이
* HTML 4.01: FIELDSET 사용시 LEGEND 요소는 반드시 첫 번째 자식(first-child)으로 마크업 되어야함
* XHTML 1.0: FIELDSET 사용시 LEGEND 요소는 생략 가능
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css" title="">
body {
margin: 0;
padding: 0;
font-size: 75%;
line-height: 1.5em;
font-family: "NanumGothic", "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
}
form {
margin: 0;
padding: 0;
}
hr {
display: none;
}
p, div, th, td, select, input {
color: #333;
}
a:link, a:visited {
color: #666;
text-decoration: none;
}
a:active, a:hover {
color: #000;
text-decoration: none;
}
img {
border: 0 none;
}
form dt {
float:left;
clear:both;
width:100px;
}
</style>
</HEAD>
<BODY>
<form action="....." method=".....">
<fieldset>
<legend>필수항목</legend>
<dl>
<dt><label for="mbname">이름:</label></dt>
<dd><input type="text" id="mbname" name="mbname" /></dd>
<dt><label for="email">이메일:</label></dt>
<dd><input type="text" id="email" name="email" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>선택항목</legend>
<dl>
<dt><label for="address">주소:</label></dt>
<dd><input type="text" id="address" name="address" /></dd>
</dl>
</fieldset>
<p><input type="submit" value="확인" /></p>
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css" title="">
body {
margin: 0;
padding: 0;
font-size: 75%;
line-height: 1.5em;
font-family: "NanumGothic", "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
}
form {
margin: 0;
padding: 0;
}
hr {
display: none;
}
p, div, th, td, select, input {
color: #333;
}
a:link, a:visited {
color: #666;
text-decoration: none;
}
a:active, a:hover {
color: #000;
text-decoration: none;
}
img {
border: 0 none;
}
form dt {
float:left;
clear:both;
width:100px;
}
</style>
</HEAD>
<BODY>
<form action="....." method=".....">
<fieldset>
<legend>필수항목</legend>
<dl>
<dt><label for="mbname">이름:</label></dt>
<dd><input type="text" id="mbname" name="mbname" /></dd>
<dt><label for="email">이메일:</label></dt>
<dd><input type="text" id="email" name="email" /></dd>
</dl>
</fieldset>
<fieldset>
<legend>선택항목</legend>
<dl>
<dt><label for="address">주소:</label></dt>
<dd><input type="text" id="address" name="address" /></dd>
</dl>
</fieldset>
<p><input type="submit" value="확인" /></p>
</form>
</BODY>
</HTML>
'개발도 하냐?' 카테고리의 다른 글
| Cross Domain Script 해결법 (0) | 2009.12.01 |
|---|---|
| HTML vs XHTML? (0) | 2009.12.01 |
| javascript AJAX 페이지로딩 (0) | 2009.11.28 |
| FLEX AIR - 케이웨더 날씨 모듈 (0) | 2009.11.18 |
| FLEX AIR 시스템트레이에 프로그램 넣기 (0) | 2009.11.18 |