Web(웹) Study/HTML & CSS

로그인이나 입력폼 사용시 탭키 누를 때 순서대로 ^.^ 이동 시키기

알 수 없는 사용자 2008. 7. 31. 17:00
탭을 누르면 ID -> PASSWORD -> LOGIN 순으로 가야 입력하기 편하죠?
아니라고요.? ㅡ.ㅡ 그럼 그냥 쓰시고요.. 그렇지 않은 분들을 위해
허접팁을 씁니다.

<input type=text name=user_id value=' size=9 class=input >
<input type=password name=password value=' size=9 class=input >
<input type=checkbox name=auto_login value=1 onclick=check_autologin()>

대략 이런식으로 outlogin skin 을 제작하실텐데요..

이렇게 제작한후 페이지의 중간에 위치하게될경우 또는 iframe으로
들어갈경우 탭을 누르면 이상한 곳으로 가거나 id입력하고 패스워드를
입력할려고 탭을 눌렀더니 엉뚱한곳으로 가거나  로그인버튼으로 가서
마음에 안드셨던 부분이 계셨죠...?

해답은 바로 tabindex 입니다.

<input type=text name=user_id value=' size=9 class=input tabindex=1>
<input type=password name=password value=' size=9 class=input tabindex=2>
<input type=checkbox name=auto_login value=1 onclick=check_autologin() tabindex=3>

예를들어 이와같이 수정하신다면 id 입력한후 tab을 눌러서 패스워드를 입력
하고 탭을 눌러 오토로그인 체크를 하실수 있게 됩니다. ^.^