<!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 를 적용시
아이디->패스워드->로그인 순서로 원하는 결과를 얻을 수 있다.
'HTML5' 카테고리의 다른 글
| HTML5 CSS (0) | 2016.04.02 |
|---|---|
| HTML5 title 속성 (0) | 2016.04.02 |
| HTML5 dir 속성 (0) | 2016.04.02 |
| HTML5 accesskey 기능 (0) | 2016.04.02 |
| HTML5 element (엘리먼트) (0) | 2016.04.02 |
