HTML5
HTML5 tabindex 속성
배려심
2016. 4. 2. 22:19
반응형
<!DOCTYPE HTML>
<html>
<head>
<title>tabindex 예제</title>
</head>
<body>
<form>
<!--로그인박스-->
아이디<input type="text" name="UserId" tabindex="1" />
<input type="button" value="로그인" tabindex="3" />
<p/>
패스워드:<input type="password" name="UserPwd" tabindex="2" />
<!--로그인박스-->
</form>
</body>
</html>
일반 사이트 로그인 박스를 보면
이런 형태로 되어 있는데 Tab을 누르면 다음 포커스로 이동이 되는데
위 이미지와 같은 형태로 코딩후 tabindex를 적용하지 않았을경우
아이디->로그인->패스워드 형태로 탭이 이동하는 것을 확인 할 수 있다.
tabindex 를 적용시
아이디->패스워드->로그인 순서로 원하는 결과를 얻을 수 있다.
반응형