Ostatnio edytowany:

tabindex

Autor: Virtual Patriot

Przeznaczenie atrybutu tabindex

Za pomocą atrybutu tabindex możemy określić, jaką kolejność powinien posiadać interesujący nas element HTML podczas procesu nawigacji za pośrednictwem klawisza TAB.

Atrybut "tabindex" możemy dodać do dowolnego elementu HTML, lecz nie wszystkie elementy HTML reagują na wspomniany atrybut "tabindex".

Elementy HTML reagujące podczas procesu nawigacji za pośrednictwem klawisza TAB

  • elementy HTML, które mogą posiadać atrybut autofocus, czyli: element button, element input, element keygen, element select oraz element textarea
  • elementy HTML, które możemy aktywować poprzez kliknięcie w celu przeniesienia się do zasobu internetowego, czyli: element a oraz element area
  • w niektórych przeglądarkach internetowych element HTML, który posiada atrybut contenteditable o wartości true
  • element HTML mogący tworzyć zagnieżdżony kontekst przeglądarki internetowej, czyli: element iframe oraz element object (gdy wspomniany element object reprezentuje zasób internetowy w postaci dokumentu HTML)
Wartość domyślna

brak wartości domyślnej

Wartości atrybutu tabindex

liczba dodatnia

Wartość w postaci dodatniej liczby całkowitej oznacza kolejność, jaką powinien posiadać dany element HTML podczas procesu nawigacji za pośrednictwem klawisza TAB.

Przykładowy kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ul>
      <li>Pierwszy element "input": <input tabindex="1"></li>
      <li>Drugi element "input": <input tabindex="3"></li>
      <li>Trzeci element "input": <input tabindex="2"></li>
      <li>Czwarty element "input": <input tabindex="4"></li>
      <li>Piąty element "input": <input tabindex="6"></li>
      <li>Szósty element "input": <input tabindex="5"></li>
    </ul>

  </body>
</html>

Rezultat

  • Pierwszy element "input":
  • Drugi element "input":
  • Trzeci element "input":
  • Czwarty element "input":
  • Piąty element "input":
  • Szósty element "input":

Piąty przykładowy element "input" jest szóstym w kolejności elementem HTML, który podczas procesu nawigacji za pośrednictwem klawisza TAB może zostać wybrany przez użytkownika za pośrednictwem wspomnianego klawisza TAB, ponieważ do wspomnianego elementu "input" został dodany atrybut "tabindex" wraz z wartością "6".

Podczas procesu nawigacji za pośrednictwem klawisza TAB elementy HTML posiadające atrybut "tabindex" wraz z wartością w postaci dodatniej liczby całkowitej mają pierwszeństwo nad pozostałymi elementami HTML posiadającymi atrybut "tabindex" lub nieposiadającymi atrybutu "tabindex".

0

Wartość w postaci liczby zero oznacza, że kolejność, jaką powinien posiadać dany element HTML podczas procesu nawigacji za pośrednictwem klawisza TAB zostanie ustalona automatycznie przez przeglądarkę internetową.

Przykładowy kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ul>
      <li>Pierwszy element "input": <input tabindex="11"></li>
      <li>Drugi element "input": <input tabindex="12"></li>
      <li>Trzeci element "input": <input tabindex="13"></li>
      <li>Czwarty element "input": <input tabindex="0"></li>
      <li>Piąty element "input": <input tabindex="0"></li>
      <li>Szósty element "input": <input tabindex="0"></li>
    </ul>

  </body>
</html>

Rezultat

  • Pierwszy element "input":
  • Drugi element "input":
  • Trzeci element "input":
  • Czwarty element "input":
  • Piąty element "input":
  • Szósty element "input":

Kolejność trzech ostatnich elementów "input" podczas procesu nawigacji za pośrednictwem klawisza TAB zostanie automatycznie ustalona przez przeglądarkę internetową, ponieważ do wspomnianych elementów "input" został dodany atrybut "tabindex" wraz z wartością "0".

liczba ujemna

Wartość w postaci ujemnej liczby całkowitej oznacza, że dany element HTML nie zostanie uwzględniony przez przeglądarkę internetową podczas procesu nawigacji za pośrednictwem klawisza TAB.

Przykładowy kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ul>
      <li>Pierwszy element "input": <input tabindex="21"></li>
      <li>Drugi element "input": <input tabindex="22"></li>
      <li>Trzeci element "input": <input tabindex="23"></li>
      <li>Czwarty element "input": <input tabindex="24"></li>
      <li>Piąty element "input": <input tabindex="-1"></li>
      <li>Szósty element "input": <input tabindex="25"></li>
    </ul>

  </body>
</html>

Rezultat

  • Pierwszy element "input":
  • Drugi element "input":
  • Trzeci element "input":
  • Czwarty element "input":
  • Piąty element "input":
  • Szósty element "input":

Piąty przykładowy element "input" nie zostanie uwzględniony przez przeglądarkę internetową podczas procesu nawigacji za pośrednictwem klawisza TAB, ponieważ do wspomnianego elementu "input" został dodany atrybut "tabindex" wraz z wartością "-1".

Interpretacja atrybutu tabindex

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak