Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Formulieren

Het element <output>

Het <output>-element van HTML is een containerelement waarin een site of app het resultaat van een berekening of de uitkomst van een gebruikersactie kan plaatsen.

Auteur: Maarten Soetens

Attributen

Dit element bevat de globale attributen.

for

Een door spaties gescheiden lijst van id's van andere elementen, die aangeeft dat die elementen invoerwaarden hebben geleverd voor (of anderszins invloed hebben gehad op) de berekening.

form

Het <form>-element waaraan de output gekoppeld is (de formuliereigenaar). De waarde van dit attribuut moet de id zijn van een <form> in hetzelfde document. (Als dit attribuut niet is ingesteld, is de <output> gekoppeld aan het voorouder-<form>-element, indien aanwezig.)

Met dit attribuut kun je <output>-elementen koppelen aan <form>-elementen die zich overal in het document kunnen bevinden, niet alleen binnen een <form>. Het kan ook een voorouder-<form>-element overschrijven. De naam en inhoud van het <output>-element worden niet verzonden wanneer het formulier wordt verzonden.

name

De naam van het element. Wordt gebruikt in de API form.elements.

De waarde, naam en inhoud van <output> worden NIET verzonden bij het indienen van het formulier.

Toegankelijkheid

Veel browsers implementeren dit element als een aria-live-regio. Ondersteunende technologie zal daardoor de resultaten van UI-interacties die erin geplaatst worden aankondigen, zonder dat de focus hoeft te verschuiven van de bedieningselementen die deze resultaten produceren.

Voorbeelden

In het volgende voorbeeld biedt het formulier een schuifregelaar waarvan de waarde kan variëren tussen 0 en 100, en een <input>-element waarin je een tweede getal kunt invoeren. De twee getallen worden bij elkaar opgeteld en het resultaat wordt weergegeven in het <output>-element telkens wanneer de waarde van een van de bedieningselementen verandert.

HTML
<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
JS
const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

Resultaat

Technische samenvatting

Inhoudscategorieën Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
Toegestane inhoud Phrasing content.
Weglaten van tags Niet toegestaan; zowel de begin- als eindtag zijn verplicht.
Toegestane bovenliggende elementen Elk element dat phrasing content accepteert.
Impliciete ARIA-rol status
Toegestane ARIA-rollen Elke rol
DOM-interface HTMLOutputElement

Verwante elementen

<button> <datalist> <fieldset> <form> <input> <label> <legend> <meter>