Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
접근성을 고려한 입력서식 제작기법
아래 예제에 보인 게시판도 전형적인 온라인 서식으로, 앞에 기술한 로그인 창과 회원가입의 경우와 동일하므로 별도의 설명은 생략한다.
[그림] 가로 1단 메뉴 예제
우편번호 검색 기능은 JavaScript로 작성하였다(스크립트에서 밑줄로 표시한 부분). 따라서 JavaScript를 지원하지 않는 브라우저에서는 사용자가 직접 입력할 수 있다.
또한 우편번호 검색이 우편번호 입력창 보다 앞에 위치하도록 함으로써 우편번호를 입력한 후에 우편번호를 검색 하도록 하는 것은 바람직하지 못하다. 따라서 '우편번호 검색' 버튼을 화면과 같이 우편번호 입력창 앞에 나타나도록 수정하는 것이 바람직하다. 물론 HTML 문서상에서는 '우편번호 검색' 버튼이 주소 창보다 앞에 위치하지만, CSS를 이용하여 뒷부분에 배치하는 것도 좋은 방법이다.
// HTML Document
<head>
<link rel="stylesheet" href="./common/style.css" type="text/css" />
<script type="text/javascript" src="./common/script.js"></script>
</head>
<body>
<div id="JoinWirte">
<form id="WirteForm" name="WirteForm" method="post" action=""
onsubmit="return submitForum(this);">
<p class="check">
<img src="./img/board_check_1.gif" alt="체크" /> 표시 필수 입력사항
</p>
<fieldset><legend>아이디 기본정보</legend>
<table>
<tr>
<th><label for="JoinID">
<img src="./img/board_check_1.gif" alt="필수" />아이디 </label></th>
<td colspan="3"><input type="text" id="JoinID" name="JoinID" style="width:160px;
title="필수 아이디" value="" /></td>
</tr>
<tr>
<th><label for="JoinPass">
<img src="./img/board_check_1.gif" alt="*" />비밀번호</label></th>
<td><input type="password" id="JoinPass" name="JoinPass"
style="width:160px;" title="필수 비밀번호" value="" /></td>
<th><label for="JoinPassRe"><img src="./img/board_check_1.gif" alt="*" />
비밀번호 확인</label></th>
<td><input type="password" id="JoinPassRe" name="JoinPassRe"
style="width:160px;" title="필수 비밀번호 확인" value="" /></td>
</tr>
</table>
</fieldset>
<fieldset><legend>개인 기본정보</legend>
<table>
<tr>
<th><label for="JoinName"><img src="./img/board_check_1.gif"alt="*" />
이름(한글) </label></th>
<td><input type="text" id="JoinName" name="JoinName"
style="width:180px;" title="필수 이름" value="" /></td>
</tr>
<tr id="JoinPostJsApply">
<th><label for="JoinPost1">
<img src="./img/board_check_1.gif" alt="*" />주소</label></th>
<td><p class="Type1"></p>
<p class="Type1"><input type="text" id="JoinPost1" name="JoinPost1"
style="width:40px;" title="필수 우편번호 앞자리" value="" />
- <input type="text" id="JoinPost2" name="JoinPost2"
style="width:40px;" title="필수 우편번호 뒷자리" value="" /></p>
<p class="Type1">
<input type="text" id="JoinAddress" name="JoinAddress"
style="width:90%;" title="필수 우편번호를 제외한 주소" value="" /></p>
</td></tr>
<tr>
<th><span>연락처</span></th>
<td><p><label for="TelA1" class="Type1">휴대폰</label>
<input type = "text" id="TelA1" name="TelA1" style="width:40px;"
title="통신사 번호" value="" />
- <input type="text" id="TelA2" name="TelA2" style="width:40px;"
title="휴대폰번호 국번" value="" />
- <input type="text" id="TelA3" name="TelA3" style="width:40px;"
title="휴대폰번호 뒷네자리" value="" /></p>
<p><label for="TelB1">전화번호</label>
<input type="text" id="TelB1" name="TelB1" style="width:40px;"
title="전화번호 지역번호" value="" />
- <input type="text" id="TelB2" name="TelB2" style="width:40px;"
title="전화번호 국번" value="" />
- <input type="text" id="TelB3" name="TelB3" style="width:40px;"
title="전화번호 뒷네자리" value="" /></p></td>
</tr>
<tr>
<th><label for="BoardEmail1">
<img src="./img/board_check_1.gif" alt="*" />이메일 주소</label></th>
<td><input type="text" id="BoardEmail1" name="BoardEmail1"
style="width:100px;" title="필수 이메일 아이디 입력" value="" />
@ <input type="text" id="BoardEmail2" name="BoardEmail2"
style="width:250px;" title="필수 이메일 서비스 입력" value="" /></td>
</tr>
</table>
</fieldset>
<p><input type="image" src="./img/join_submit.gif" alt="회원가입" /></p>
</form>
</div>
<script type="text/javascript">
// 우편번호 부분에 Javascript가 실행되었을 경우
// "우편번호 검색" 버튼을 생성
// Javascript가 실행되지 않았을 경우
// 우편번호 검색 버튼을 생성시키지 않고 사용자가 입력하게 함
var PostSearch_Type1 = new fnPostSearch_Type1;
PostSearch_Type1.DivName = "JoinPostJsApply";
PostSearch_Type1.Start();
</script>
</body>우편 번호를 검색하여 우편번호를 자동 입력하고 주소를 입력하는 기능은 대부분의 회원 입력창에서 구현하고 있으 므로 이 부분은 생략하도록 한다.
[그림] 우편 번호 검색 예제
아래의 JavaScript는 입력창의 입력 정보에 대한 유효성을 검사하기 위한 함수와 우편 번호 검색 버튼을 JavaScript 로 생성하는 부분이다. 앞에서 이야기한 대로 우편번호 검색 버튼은 JavaScript 기능이 지원되지 않는 브라우저에서 는 생성되지 않는다.
// JavaScript Document
function submitForum(formEl) {
var errorMessage = null;
var objFocus = null;
if(formEl.JoinID.value.length== 0){
errorMessage = "아이디를 넣어 주세요";
objFocus = formEl.JoinID;}
else if(formEl.JoinPass.value.length==0){
errorMessage = "비밀번호를 넣어 주세요";
objFocus = formEl.JoinPass;}
else if(formEl.JoinPassRe.value.length==0) {
errorMessage = "비밀번호 확인을 넣어 주세요";
objFocus = formEl.JoinPassRe;}
else if(formEl.JoinPass.value != formEl.JoinPassRe.value){
errorMessage = "비밀번호와 비밀번호 확인이 다릅니다.
확인해 보시기 바랍니다.";
objFocus=formEl.JoinPass;}
else if(formEl.JoinName.value.length==0){errorMessage = "이름을 넣어 주세요";
objFocus =formEl.JoinName;}
else if(formEl.JoinPost1.value.length==0){errorMessage = "우편번호 앞자리";
objFocus=formEl.JoinPost1;}
else if(formEl.JoinPost2.value.length==0){errorMessage = "우편번호 뒷자리";
objFocus= formEl.JoinPost2;}
else if(formEl.JoinAddress.value.length==0){
errorMessage = "주소";
objFocus=formEl.JoinAddress;}
else if(formEl.BoardEmail1.value.length==0){
errorMessage="이메일 아이디를 넣어 주세요";
objFocus=formEl.BoardEmail1;}
else if(formEl.BoardEmail2.value.length==0){
errorMessage ="이메일 서비스 회사의 주소를 넣어주세요";
objFocus = formEl.BoardEmail2;}
if(errorMessage!= null){
alert(errorMessage);
objFocus.focus();
return false;}
return true;}
function postForum() {
window.open('./popup.html','PostSearch','width=400,
height=250,scrollbars=no,resizable=no');}
function postApply(JoinPost1,JoinPost2,JoinAddress){
opener.document.getElementById("JoinPost1").value=JoinPost1;
opener.document.getElementById("JoinPost2").value=JoinPost2;
opener.document.getElementById("JoinAddress").value=JoinAddress;
self.close();}
// Javascript가 실행되었을 경우 "우편번호 검색" 버튼을 생성 하는 부분
function fnPostSearch_Type1(){
this.Start=function(){
this.TargetObj=document.getElementById(this.DivName)
.getElementsByTagName("td")[0].getElementsByTagName("p")[0];
this.PostBtn=document.createElement('a');
this.PostBtn.href="http://./postBtn.html";
this.PostBtnImg=document.createElement('img');
this.PostBtnImg.src="./img/join_post.gif";
this.PostBtnImg.alt="우편번호 검색(팝업)";
this.PostBtnImg.className="joinpost";
this.TargetObj.appendChild(this.PostBtn);
this.PostBtn.onclick=function(){
postForum();
return false;}
this.PostBtn.appendChild(this.PostBtnImg); } }
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)