Rate this post

Thuộc tính tabindex trong HTML cho phép bạn thiết lập thứ tự di chuyển của phím tab giữa các phần tử trong trang web. Mặc định, các phần tử sẽ được di chuyển theo thứ tự xuất hiện trong mã HTML.

Các bài viết liên quan:

Ví dụ:

<input type="text" tabindex="1">
<input type="password" tabindex="2">
<input type="submit" tabindex="3">

Trong ví dụ trên, khi người dùng nhấn tab, nó sẽ di chuyển tới ô văn bản đầu tiên, sau đó ô mật khẩu và cuối cùng là nút gửi.

Bạn có thể sử dụng giá trị số nguyên để thiết lập thứ tự, và các giá trị âm để loại bỏ một phần tử khỏi thứ tự tab. Các giá trị lớn hơn 0 sẽ được di chuyển trước, còn các giá trị âm sẽ được di chuyển sau.

Ngoài ra, bạn cũng có thể sử dụng thuộc tính tabindex cho các thẻ khác như <a>, <button>, <select>, <textarea>

Lưu ý rằng sử dụng tabindex không phải lúc nào cũng là tốt, nó có thể gây khó khăn cho người dùng khi sử dụng trang web, vì vậy hãy cân nhắc kĩ trước khi sử dụng.

Khi nào nên sử dụng tabindex

Tabindex được sử dụng để thiết lập thứ tự di chuyển giữa các phần tử trong trang web khi người dùng sử dụng phím tab. Nó có thể được sử dụng trong những trường hợp sau:

  1. Khi bạn muốn tạo ra một thứ tự di chuyển tùy chỉnh giữa các phần tử, ví dụ như tạo một thứ tự di chuyển từ trái sang phải trong một biểu mẫu.
  2. Khi bạn muốn loại bỏ một phần tử khỏi thứ tự di chuyển tab mặc định, ví dụ như loại bỏ một nút bấm không cần thiết khỏi thứ tự di chuyển.
  3. Khi bạn muốn thiết lập thứ tự di chuyển cho các phần tử không thuộc về form, ví dụ như một liên kết hoặc một nút bấm trong trang web.
  4. Khi bạn muốn tạo ra một trải nghiệm truy cập dễ dàng hơn cho người dùng có thể sử dụng chuột hoặc bàn phím để di chuyển giữa các phần tử trong trang.

Tuy nhiên, chúng ta cần lưu ý rằng sử dụng tabindex không phải lúc nào cũng là tốt vì nó có thể gây khó khăn cho người dùng trong việc sử dụng trang web. Nếu không cần thiết, hãy tránh sử dụng tabindex.

một số ví dụ sử dụng tabindex

Ví dụ 1: Tạo một thứ tự di chuyển từ trái sang phải trong một biểu mẫu đăng nhập

<form>
  <label for="username">Tên đăng nhập:</label>
  <input type="text" id="username" tabindex="1">
  <br>
  <label for="password">Mật khẩu:</label>
  <input type="password" id="password" tabindex="2">
  <br>
  <input type="submit" value="Đăng nhập" tabindex="3">
</form>

Ví dụ 2: Loại bỏ một nút bấm không cần thiết khỏi thứ tự di chuyển

<form>
  <input type="text" tabindex="1">
  <input type="password" tabindex="2">
  <input type="submit" value="Đăng nhập" tabindex="3">
  <input type="button" value="Nút không cần thiết" tabindex="-1">
</form>

Trong ví dụ này, nút không cần thiết sẽ không được di chuyển đến khi người dùng tự thêm tabindex vào.

Ví dụ 3: Thiết lập thứ tự di chuyển cho các phần tử không thuộc về form

<a href="#section1" tabindex="1">Phần 1</a> |
<a href="#section2" tabindex="2">Phần 2</a> |
<a href="#section3" tabindex="3">Phần 3</a>

Trong ví dụ này, khi người dùng nhấn tab sẽ di chuyển tới các liên kết tương ứng với tabindex đã thiết lập.

Như vậy, có thể sử dụng tabindex để tùy chỉnh thứ tự di chuyển giữa các phần tử trong trang web, tạo ra một trải nghiệm truy cập dễ dàng hơn cho người dùng. Tuy nhiên, lại cần cân nhắc kỹ trước khi sử dụng.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now