HTML tab key 순서 정하기

간단하게 지원하는 태그가 있을줄은..;; 이래서 프로젝트로 배우면 않되고 책으로 배워야 한다는걸 실감한다.

<input type="text"  > <input type="checkbox" ><br> <input type="text">

소스가 위와 같다면 tab을 누를 경우 커서의 포인트는 textbox에서 checkbox로 간다음 아래의 textbox로 이동한다. 하지만 몇번 쓸일 없는 체크 박스에 커서를 가는 불편함을 유발시키면 않되므로!

tabindex 

<input type="text" tabindex=1> <input type="checkbox" tabindex=3><br> <input type="text"tabindex=2>

tabindex를 써서 순서를 정해주면 순서대로 tab key 포커스가 움직이는것을 볼수 있다. 인덱스를 3번으로 놔서 3번째엔 체크박스에 이동한다. 물론 이미지도 가능하다.