웹접근성 자바스크립트를 이용한 페이지 이동

웹표준·접근성

by 김일국 2011. 7. 6. 14:17

잘못된 코딩1
<script type="text/javascript">documｅnt.location.href="redirection.html";</script> 올바른 코딩1

<body><head> <script type="text/javascript">documｅnt.location.href="redirection.html";</script>

</head></body>

해설1

<body>나 <head>엘리먼트 하위에 <script 태그가 있어야 한다.

잘못된 코딩2 <script type="text/javascript"> function submitForm() { if (!loginForm.loginId.value) { alert("아이디를 넣어주세요."); loginForm.loginId.focus(); } else if (!loginForm.loginPassword.value) { alert("비밀번호를 넣어주세요."); loginForm.loginPassword.focus(); } else { loginForm.submit(); } } </script> <form id="loginForm" name="loginForm" action="URL.html"> 아이디 <input type="text" name="loginId"> 비밀번호 <input type="password" name="loginPassword"><br> <img src="login.gif" onclick="submitForm()"> </form>

올바른 코딩2 <form id="loginForm" name="loginForm" action="URL.html"> <label for="loginId">아이디</label> <input type="text" id="loginId" name="loginId" /> <label for="loginPassword">비밀번호</label> <input type="password" id="loginPassword" name="loginPassword" /><br /> <input type="image" src="login.gif" alt="Login" /> </form>

--------------------> URL.html -------------------->$POST[변수] 값중에 필수 값이 들어 오지 않았을 겨우 BACK.html 호출 ( 이전페이지 URL, 유효성검사 메세지 전송 )

 
-------------------->
BACK.html
-------------------->
<!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">
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Redirect</title>
</head>
<body>
<p><a href="redirection.html">이래저래한 이유로 다시 돌아 갑니다.</a></p>
</body>
</html>

해설2<form>에 submit <input>이 없기 때문에 자바스크립트로 submit이 일어나지 않을 수도 있다.(자바스크립트 없이 사용가능) 유효성검사는 현재 페이지가 아닌 이동 후 페이지에서 표시되도록 한다.(장애인 접근성)

'웹표준·접근성' 카테고리의 다른 글

[HTML5] IE10이하 익스플로러를 위한 대비책 (0)	2013.08.01
html 유효성검사시 주소표시줄의 공백문자 처리 (0)	2011.07.22
웹표준 코딩법 (0)	2011.07.21
웸표준 코딩수정 사항 - 기본 (0)	2011.07.06
웹접근성을 고려한 팝업창 코딩 (0)	2011.07.06