7. Atrybuty HTML

> Dodaj do ulubionych |
Share

Atrybuty HTML przekazują dodatkowe informacje lub modyfikują zachowanie elementów. Większość, np. title, 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 HTML5 jest wymienionych wiele typów atrybutów HTML. Tutaj zajmiemy się tylko paroma najważniejszymi z naszego punktu widzenia.

Atrybuty treści

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

Ich wartość zawsze jest łańcuchem znaków bez względu na jej rzeczywisty typ danych (może to być 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.

Ręka zmieniająca położenie przełącznika

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 logiczne nie mogą mieć wartości true ani false do oznaczania stanów „włączenia” i „wyłączenia”. Stan włączenia określa sama obecność atrybutu, a stan wyłączenia — jego brak.

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

W specyfikacji HTML5 napisano, że atrybuty te „mogą być definiowane dla wszystkich elementów HTML (nawet niezdefiniowanych w tej specyfikacji)”.

Wiesz już naprawdę dużo na temat elementów i atrybutów HTML, umiesz posługiwać się edytorami kodu i masz przygotowane kompletne środowisko pracy. Najwyższa pora, aby zacząć poważną naukę posługiwania się językiem HTML.

W następnym rozdziale nauczysz się definiować akapity i nagłówki oraz dowiesz się, jak tworzyć złamania wiersza w obrębie akapitów.

Podsumowanie

Sum
  • Atrybuty HTML przekazują dodatkowe informacje lub modyfikują zachowanie elementów.
  • Wartość atrybutu HTML może być ujęta w cudzysłów podwójny lub pojedynczy oraz w niektórych przypadkach może być zdefiniowana bez cudzysłowu.
  • Najbardziej ogólną kategorią są atrybuty treści.
  • Atrybuty obsługi zdarzeń jako wartość przyjmują kod JavaScript.
  • Atrybuty IDL są „odbiciem” atrybutów treści.
  • Atrybuty logiczne działają jak przełączniki włączające pewną właściwość elementu.
  • Atrybuty globalne można definiować we wszystkich elementach, choć nie zawsze ma to sens.
Kurs HTML i CSS