[HTML] tabIndex(탭 순서)

TabIndex, 탭 순서 설정

로그인 포맷이 있다고 할때!

<h1>로그인</h1>

<table id="tbl1" class="table">

<tr>

<th>아이디</th>

<td><input type="text" autofocus tabindex="1"></td>

<td rowspan="2"><button tabindex="3">

<i class="fas fa-lock" style="font-size:1.5em;"></i>

<div style="font-variant:small-caps;">Login</div>

</button></td>

</tr>

<tr>

<th>암호</th>

<td><input type="password" tabindex="2"></td>

</tr>

</table>

다음과 같은 로그인폼이 있을 때,

- tabindex =1 로 설정한 input 태그에 먼저 커서가 깜박이게 된다.

- 그후 tabindex가 2인 암호가 깜빡이게 된다.

- 이렇게 차례차례 숫자를 설정하여 Tab 순서를 정하면 된다~!