Moderní tvorba webových aplikací

O webu

HTML atribut hidden

HTML atribut hidden jde použít pro skrytí obsahu.

2 minuty
<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

Související články

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Query string v URL

Řetězec dotazu je část URL za otazníkem obsahující nejrůznější parametry.

10 minut

HTML atribut download

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

3 minuty

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025