접근성을 고려한 가입폼의 예제

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>

'개발도 하냐?' 카테고리의 다른 글

Cross Domain Script 해결법  (0) 2009.12.01
HTML vs XHTML?  (0) 2009.12.01
웹표준 가입폼  (0) 2009.11.30
javascript AJAX 페이지로딩  (0) 2009.11.28
FLEX AIR - 케이웨더 날씨 모듈  (0) 2009.11.18
FLEX AIR 시스템트레이에 프로그램 넣기  (0) 2009.11.18

+ Recent posts