Elementul <output> reprezintă rezultatul unui calcul matematic, al unei acțiuni a utilizatorului sau al unui script dintr-un formular. El rezolvă o problemă clasică de accesibilitate: înainte, dezvoltatorii afișau rezultatele în div-uri sau span-uri generice, ceea ce făcea ca cititoarele de ecran să nu înțeleagă că acea valoare este o consecință directă a valorilor introduse în câmpurile anterioare.
Exemplu: Calculator de preț în timp real fără framework-uri
<form oninput="total.value = (parseInt(cantitate.value) * parseInt(pretUnitar.value)) + ' RON'">
<label for="cantitate">Cantitate (bucăți):</label>
<input type="range" id="cantitate" name="cantitate" min="1" max="10" value="2">
<label for="pret">Preț unitar (RON):</label>
<input type="number" id="pret" name="pretUnitar" value="150" min="10" step="10">
<!-- Atributul for listează ID-urile câmpurilor din care este calculat rezultatul -->
<p>Preț Total Calculat:
<output name="total" for="cantitate pret">300 RON</output>
</p>
</form>
Atribute Specifice
for: O listă separată prin spații a ID-urilor elementelor care contribuie la calculul valorii afișate.form: ID-ul formularului căruia îi aparține elementul (în cazul în care tagul este amplasat în afara blocului<form>).name: Numele câmpului, util când datele formularului sunt trimise pe server.