în HTML

Învață cum afișezi rezultatele calculelor matematice sau ale interacțiunilor dintr-un formular cu tagul semantic <output> și atributul for.

Sintaxă tag
<output name="total" for="cantitate pret">0</output>

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.