Tag HTML <output>
Usa il tag <output> per definire l'area del risultato di un calcolo. Descrizione, attributi ed esempi.
Il tag <output> è uno degli elementi HTML5. Definisce un'area in cui visualizzare il risultato di un calcolo eseguito da uno script, o l'esito dell'interazione dell'utente con un modulo. Di solito viene abbinato ai controlli <input> all'interno di un <form>, ed è particolarmente adatto per risultati in tempo reale come un totale progressivo, un prezzo scontato o una conversione valutaria.
Perché usare <output> invece di uno <span>?
Potresti mostrare un valore calcolato in un semplice <span>, ma <output> aggiunge semantica e accessibilità che <span> non offre:
- È una live region implicita.
<output>ha il ruolo ARIAstatusper impostazione predefinita, il che lo rende una live region di tipo cortese. Quando il suo contenuto testuale cambia, le tecnologie assistive come gli screen reader annunciano automaticamente il nuovo valore — senza dover aggiungere attributiroleoaria-live. - È semanticamente collegato al modulo. Browser e strumenti trattano
<output>come un vero elemento associato al form, quindi la relazione del valore con i suoi input fa parte del significato del documento, non solo del suo layout. - L'attributo
fordocumenta la relazione. Elenca gli ID dei controlli che hanno contribuito al risultato, esprimendo l'intenzione nel markup.
Grazie al comportamento della live region, un utente vedente vede il numero aggiornarsi mentre un utente che utilizza uno screen reader lo sente aggiornare. Uno <span> offre solo la modifica visiva.
L'attributo for e il collegamento con oninput
L'attributo for accetta un elenco di ID di elementi separati da spazi — i controlli i cui valori alimentano il calcolo. È puramente dichiarativo: indica a lettori e strumenti da quali input dipende il risultato. Non ricalcola nulla da solo.
Il ricalcolo è gestito da JavaScript. Inserire oninput nel <form> è un metodo comune: l'evento input si propaga verso l'alto, quindi un singolo gestore sul form si attiva ogni volta che qualsiasi controllo al suo interno cambia. All'interno di quel gestore si leggono i valori degli input e si assegna il risultato a output.value.
Esempio di base
Nell'esempio seguente, un gestore oninput sul form mantiene <output> sincronizzato al variare di uno dei due controlli. L'attributo for="a b" registra che il risultato dipende dagli input con ID a e b.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" id="a" value="50" /> +
<input type="number" id="b" value="25" /> =
<output name="x" for="a b">75</output>
</form>
</body>
</html>Il 75 scritto tra i tag è il valore predefinito dell'elemento — il valore mostrato prima che venga modificato qualsiasi input, e il valore a cui <output> viene ripristinato quando il form viene azzerato.
Collegamento con addEventListener
oninput inline è conciso ma mescola il comportamento con il markup. Nei progetti reali, è preferibile separare lo script e collegare il gestore con addEventListener. Questa versione moltiplica due numeri e riutilizza un unico gestore per l'evento input del form:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form id="calc">
<input type="number" id="e" value="6" /> ×
<input type="number" id="f" value="7" /> =
<output id="result" for="e f">42</output>
</form>
<script>
const form = document.getElementById("calc");
const result = document.getElementById("result");
form.addEventListener("input", () => {
const e = document.getElementById("e").valueAsNumber;
const f = document.getElementById("f").valueAsNumber;
result.value = e * f;
});
</script>
</body>
</html>Nota valueAsNumber: per gli input number e range restituisce un numero reale (o NaN per input vuoto o non valido), evitando così la conversione con parseInt. Se l'utente svuota un campo, il risultato diventa NaN; in produzione è opportuno gestire questo caso se un campo vuoto deve mostrare 0 o una stringa vuota.
L'attributo form (output disassociati)
Per impostazione predefinita, un <output> appartiene al form in cui è annidato. L'attributo form consente di associare un output a un form anche quando si trova al di fuori del markup di quel form — utile quando il layout impone al risultato di trovarsi altrove nella pagina. Punta form all'id del form di destinazione:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form id="sum-form" oninput="total.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" value="10" /> +
<input type="number" id="b" value="5" />
</form>
<p>
The total is:
<!-- This output lives outside the form but belongs to it -->
<output name="total" form="sum-form" for="a b">15</output>
</p>
</body>
</html>Il valore viene inviato con il form?
No. Anche se <output> accetta un attributo name, il suo valore non viene trasmesso quando il form viene inviato. Il name esiste affinché gli script possano fare riferimento all'elemento e per le API correlate ai form, non per trasmettere dati al server. Se hai bisogno del risultato calcolato lato server, copialo in un input nascosto (<input type="hidden">) o ricalcolalo lato server.
Quando il form viene azzerato, <output> torna al suo valore predefinito — il contenuto testuale presente nell'HTML — anziché all'ultimo valore assegnato da uno script.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| for | element_id | Definisce uno o più ID di elementi separati da spazi, specificando la connessione tra il risultato del calcolo e gli elementi usati nel calcolo. |
| form | form_id | Definisce uno o più form a cui appartiene l'elemento output. |
| name | name | Definisce il nome dell'elemento. |
Il tag <output> supporta gli Attributi Globali e gli Attributi di Evento.
Pagine correlate
- Tag HTML
<input>— i controlli che forniscono i valori a un<output>. - Tag HTML
<form>— il contenitore a cui è associato un<output>.