Corsi on-line

Implementare l’elemento output di HTML5 nei form

L’elemento output di HTML5 nasce per essere utilizzato all’interno dei form e lo si potrà impiegare facilmente per la rappresentazione del risultato di un calcolo; l’esempio proposto di seguito mostra uno snippet all’interno del quale le cifre da sommare vengono introdotte tramite l’input type number, mentre la funzione parseInt di JavaScript consentirà di convertire le stringhe di input in numeri interi.

<h1>Calcolo con ouput</h1>
<form onsubmit="return false" oninput="z.value = parseInt(x.value) + parseInt(y.value)">
 <input name="x" type="number" step="any"> +
 <input name="y" type="number" step="any"> =
 <output name="z" value="0"></output>
</form>

Il form proposto permetterà di selezionare la prima e la seconda cifra da sommare, il risultato sarà stampato a video in quanto delimitato dall’elemento output come nella figura proposta di seguito:

Cattura1

L’utilizzo di parseInt potrà comunque essere evitato grazie all’utilizzo della proprietà valueAsNumber, quest’ultima consentirà di ottenere comunque il risultato di un calcolo senza la necessità di conversione in interi o in numeri in virgola mobile (tramite parseFloat in JavaScript); utilizzando tale proprietà il codice proposto in precedenza potrebbe essere riscritto in questo modo:

<h1>Calcolo con ouput</h1>
<form onsubmit="return false" oninput="z.value = x.valueAsNumber + y.valueAsNumber">
  <input name="x" id="x" type="number" step="any"> +
  <input name="y" id="y" type="number" step="any"> =
  <output name="z" for="x y"></output>
</form>

Da notare in questo secondo caso l’utilizzo dell’attributo for, esso in pratica permetterà di definire una lista composta da identificatori (separati da spazi) degli elementi i cui valori prenderanno parte al calcolo.

Per approfondire

Post correlati
I più letti del mese
Tematiche