HTML značka <output>

Co si pod tím představit?

V této jednoduché ukázce se značka <output> použije pro zobrazení výsledku. Jedná se tedy o jeden ze způsobů, jak vytvořit „<input>“, do kterého se nedá psát.

Obsah <output>u se podobně jako u <input type="disabled"> v případě odeslání formuláře neodesílá na server. Výchozí vzhled značky je neutrální.

Podpora

Značka <output> funguje plnohodnotně mimo Internet Explorer (včetně IE 11).

• Chrome 10+
• Firefox 4+
• Opera 11+

V nepodporujících prohlížečích se chová jako ostatní neznámé značky.

S trochou úprav může původní ukázka fungovat i ve starších prohlížečích – ukázka.

Zápis

Typický zápis <output>u vypadá následovně (koncová značka je povinná):

<output name="vysledek">
  Obsah
</output>

Kromě globálních/universálních atributů je možné nastavit:

name

Název políčka, hodí se pro zjednodušené přistupování k prvkům formuláře.

for

Odkaz na ID políček souvisejících s výpočtem, oddělují se mezerou. Nenapadá mě moc případů využití. V JS se k této hodnotě dá dostat přes nazevPolicka.htmlFor.

<input id="a">
<input id="b">
<output for="a b">

form

Umožní <output> přiřadit do formuláře, aniž by se nacházel ve <form>u. Jako hodnota se zadává atribut id cílového formuláře.

<form id="idecko">
</form>
<output form="idecko">

Používání JavaScriptu

Jelikož se <output> hodí pro výpis výsledků uživatelských akcí, je naprosto zásadní možnost s touto značkou pracovat pomocí JS.

To povyšuje <output> nad neutrální značku <span>, pochopitelně jen v podporovaných prohlížečích.

Zjednodušeně řečeno se chová jako kombinace značky <input> a právě <span>.

• Z pohledu vzhledu vypadá neutrálně (jako <span>).
• Z pohledu JS nabízí možnosti jako <input>.

Což přináší výhody.

1. Přístup k „políčku“ <output> pomocí atributu name (místo obtěžování se s metodami getElementBy* nebo querySelector).

2. Vlastnosti value a defaultValue místo innerHTML.

   <output>
     10
   </output>

   Ukázka přečtení obsahu pomocí value.

Závěr

Plnohodnotně značku <output> s ohledem na nepodporu v IE není úplně možné – bude se chovat jako obyčejná neznámá značka a v IE 8 nepůjde bez trochy JS stylovat. Pro návštěvníka nepřinese nic navíc.

Proto se doporučuji řídit touto tabulkou:

Odkazy jinam

• HTML5 Doctor: The output element
• W3C: The output element