Autor publikacji: Virtual Patriot - Administrator

tabindex

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Październik 01 2019

Zobacz również: w3.org - the tabindex attribute (HTML5)

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`

: tak
: tak
: tak
: tak
: tak
: tak