Hidden atribut
<p hidden>
  Obsah odstavce nebude vidět.
</p>

Jedná se o tzv. globální atribut – tedy jde použít u všech HTML elementů. Element s atributem hidden nebude na stránce vidět – jako by měl nastaveno display: none.

Podpora

Použití hidden zneviditelní obsah od IE 11. Pro starší Internet Explorery jde teoreticky použít atributový selektor:

[hidden] {
    display: none;
}

Využití

Atribut hidden neslouží ke skrývání/odkrývání textu, jak by se mohlo zdát. Neměl by se používat ani k přepínání záložek.

Je vhodný k označení obsahu, který ještě nebo už není relevantní. Využití má tedy hlavně u JS aplikací, kdy jsou na stránce různé bloky kódu, které se nevyužívají najednou.

Příklad použití

Specifikace uvádí příklad s přihlášením, kdy je zobrazen přihlašovací formulář a skrytý obsah.

Příklad použití atributu hidden

Obsah bude skrytý pomocí hidden.

<form id="prihlaseni">
…
</form>
<div id="obsah" hidden>
…
</div>

Po přihlášení se potom hidden prohodí (nastaví pro přihlašovací formulář a zruší pro obsah):

document.getElementById("prihlaseni").hidden = true;
document.getElementById("obsah").hidden = false;

Živá ukázka

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Atribut pattern pro formuláře

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

HTML atribut scoped

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

Autocomplete

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

Placeholder

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

Atribut download

HTML atribut download

HTML atribut download zlepšuje uživatelský dojem ze stahovaného souboru.

Komentáře