id
Unikalny identyfikator elementu w całym dokumencie.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<nav>
<a href="#cennik">Przejdź do cennika</a>
</nav>
<label for="email">E-mail</label>
<input id="email" type="email" placeholder="ty@example.com">
<h2 id="cennik">Cennik</h2>
<p>Kliknięcie w etykietę „E-mail” przenosi kursor do pola.</p>Definicja i zastosowanie
#Atrybut id nadaje elementowi nazwę, która musi być jedyna na całej stronie. Dzięki niej możesz podlinkować konkretne miejsce (href="#kontakt"), powiązać etykietę z polem formularza (<label for="email">) albo szybko znaleźć element w JavaScripcie.
Wartość nie może zawierać spacji i nie powinna być pusta. Formalnie może zaczynać się od cyfry, ale w selektorach CSS taki identyfikator trzeba wtedy escapować, więc lepiej zaczynać od litery.
Do stylowania wygodniej używać klas. Selektor #id ma bardzo wysoką specyficzność, przez co trudno go później nadpisać.
Składnia
#<element id="unikalna-nazwa">…</element>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Powtórzony
idto błąd.getElementByIdzwróci tylko pierwszy element, a etykiety i kotwice mogą trafić w złe miejsce. - Używaj opisowych nazw z myślnikami, na przykład
formularz-kontaktowy.
Powiązane hasła
#- classLista nazw klas, po których CSS i JavaScript odnajdują element.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
Widzisz błąd albo brakuje przykładu? Napisz do nas.