Page 122 - Guida tascabile HTML5

<output name="somma" for="a b">-</output>
</form>
In questo semplice listato di esempio, per concentrarci sul markup del tag

output, è stato volutamente omesso il codice JavaScript legato al funzionamento del
controllo.

L’attributo name è fondamentale per fare riferimento all’elemento con gli script,

mentre l’attributo for raccoglie i riferimenti ai campi coinvolti nel calcolo
dell’output. Il contenuto del tag rappresenta il valore di default visualizzato al

caricamento della pagina.

NOTA L’istruzione associata a un eventuale tag <button> per restituire la somma dei

due valori potrebbe essere la seguente:

onclick="somma.value=parseInt(a.value)+parseInt(b.value)"
Altri due controlli, affini tra loro ma con valore semantico differente, sono

<progress> e <meter>, utili per fornire all’utente un feedback visivo rispettivamente

sull’avanzamento di un task e su una misura: questi tag, abbinati a script JavaScript

dedicati, permettono di aggiornare l’utente in tempo reale.
Iniziamo ad analizzare la sintassi di <progress>:

Compilazione:<br>
<progress value="8" max="12">8 su 12</progress>

Figura 6.28 Safari su OS X esegue il rendering del tag <progress>.

L’esempio mostra lo stato di avanzamento nell’ipotetica compilazione di un

form: viene mostrato graficamente all’utente che ha compilato otto sezioni (valore
dell’attributo value) su dodici totali (valore dell’attributo max).

Il browser si occuperà di effettuare la proporzione e colorare la giusta porzione

di barra. Il testo contenuto nel tag invece può essere utile per fornire una soluzione
di fallback qualora il browser in uso non supportasse questo tag.

NOTA Con adeguate regole CSS, è possibile intervenire sull’aspetto della barra di
avanzamento in maniera anche piuttosto complessa, definendo dimensioni, colori,
gradienti e persino animazioni.