HTML značka output

Co si pod tím představit?

Vynásobte si 2 čísla:

× = 8

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číchuká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:

Funkčnost Postup
IE 8+ Použít neutrální značku <span>.
IE 9+ Neutrální značka <span> nebo <output> vyjdou na stejno.
mimo IE Použít <output>.

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ářů ↓

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Reset políčka pro nahrávání souboru

Resetování <input type=file>

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

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

Napodívání přes <datalist>

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

Input

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

Komentáře