Atrybuty HTML

Atrybuty HTML przekazują dodatkowe informacje lub modyfikują zachowanie elementów. Większość, np. type, wymaga podania wartości, ale istnieje grupa tzw. atrybutów logicznych, które jej nie wymagają.

Definicja typowego atrybutu składa się z nazwy atrybutu, znaku równości i wartości. W standardzie HTML5 wartość atrybutu może być ujęta w cudzysłów pojedynczy lub podwójny albo może w ogóle nie znajdować się w cudzysłowie. Wszystkie poniższe przykłady są prawidłowe w języku HTML5:

<div lang=pl>Sekcja dokumentu w języku polskim</div>
<div lang="pl">Sekcja dokumentu w języku polskim</div>
<div lang='pl'>Sekcja dokumentu w języku polskim</div>

W standardzie WHATWG HTML5 jest wymienionych wiele typów atrybutów HTML. Poniżej znajduje się opis najważniejszych grup.

Atrybuty treści

Atrybuty treści (ang. content attribute) są podstawowym typem atrybutów HTML. Są to wszystkie te atrybuty, które definiuje się bezpośrednio w znacznikach HTML, np.: type, src, content itd.

Ich wartość zawsze jest łańcuchem bez względu na jej rzeczywisty typ danych (np. liczba całkowita), a dostęp do nich można uzyskać z poziomu JavaScriptu za pomocą funkcji getAttribute() i setAttribute(), np.:

<textarea>Obszar tekstowy</textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.setAttribute("cols", "30");
</script>

W tym przypadku element textarea będzie miał szerokość 30 kolumn.

Atrybuty obsługi zdarzeń

Wszystkie elementy HTML obsługują tzw. atrybuty obsługi zdarzeń (ang. event handler). Nazwy tych atrybutów składają się z dwóch połączonych części: członu on i nazwy zdarzenia. Na przykład onclick.

Wartością atrybutu obsługi zdarzeń jest kod JavaScript, który ma być wykonany w reakcji na dane zdarzenie, np. kliknięcie myszą:

<button onclick="alert('Kliknięto mnie')">

Atrybuty IDL

Atrybuty IDL są „odbiciem” atrybutów treści, tzn. kiedy pobieramy lub ustawiamy atrybut IDL, to pobierany lub ustawiany jest analogiczny atrybut treści.

Ten rodzaj atrybutów jest nazywany własnościami JavaScript, ponieważ w JavaScripcie są one dostępne jako własności obiektów DOM, np.:

<textarea>Obszar tekstowy</textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.cols = 30;
</script>

Wartości atrybutów IDL nie muszą być łańcuchami. Jeśli atrybut ma wartość liczbową, należy taką zdefiniować. Jeśli użytkownik zdefiniuje liczbę w postaci łańcucha, np. textarea.cols = "30", to i tak wartość ta zostanie przekonwertowana na liczbę.

W przypadku atrybutów logicznych odpowiedni atrybut IDL zwraca prawdę, jeśli dany atrybut treści jest ustawiony, oraz fałsz, jeśli dany atrybut treści nie jest ustawiony.

Ponadto atrybuty IDL zawsze zwracają rzeczywistą wartość atrybutu, tzn. jeśli ustawimy input.type = "cokolwiek", to atrybut IDL i tak zwróci domyślną wartość atrybutu type, czyli text.

Atrybuty logiczne

Atrybuty logiczne (ang. boolean attributes) działają jak przełączniki włączające pewną właściwość elementu. Obecność danego atrybutu logicznego oznacza prawdę, a nieobecność — fałsz.

Wartością atrybutu logicznego może być pusty łańcuch lub sama nazwa tego atrybutu w cudzysłowie pojedynczym lub podwójnym albo bez cudzysłowu. Wszystkie poniższe definicje są prawidłowe:

<input type=text readonly name=telefon>
<input type=text readonly=readonly name=telefon>
<input type=text readonly="readonly" name=telefon>
<input type=text readonly="" name=telefon>

Atrybuty globalne

W HTML5 istnieje grupa atrybutów, które można definiować dla wszystkich elementów, choć nie w każdym przypadku ma to sens, ponieważ nie wywołuje żadnego efektu. Poniżej znajduje się lista atrybutów globalnych HTML5.

accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title