Redazione
a- a+

Min, max, step e output per i campi numerici nei moduli HTML5

Vediamo cosa sono e come funzionano gli attributi Min e Max, Step e Output. Codici ed esempi.

Min e Max

Gli attributi “min” e “max” indicano rispettivamente i valori minimi e i valori massimi da potere (o dovere) inserire in un campo testuale.

<form action="invia_form.php" method="get">
Valori: <input type="number" name="points" min="5" max="15" />
<input type="submit" />
</form>

Il browser Opera è l’unico che supporta tali attributi in modo completo. Google Chrome e Apple Safari lo “leggono” in modo parziale. Internet Explorer e Mozilla Firefox non sono inclusi invece nell’elenco.

Step

L’attributo “step” indica un intervallo tra valori.

<form action="demo_form.asp" method="get">
<input type="numeri" name="points" step="3" />
<input type="submit" />
</form>

L’esempio in alto indica che è possibile inserire all’interno del form solo valori con multipli di 3 (3, 6, 12). L’attributo “step” non è supportato da Mozilla Firefox e Internet Explorer.

<output>

Il tag <output> restituisce a video il risultato di un calcolo.

<form action="invia_form.php">
<input name="numa" type="number"> +
<input name="numb" type="number"> =
<output name="result" onforminput="value=numa.valueAsNumber + numb.valueAsNumber"></output><br />
<input type="submit" />
</form>

La compatibilità browser completa è solo su Opera e Mozilla Firefox (versione 4 e superiori). Google Chrome e Safari lo supportano in modo parziale. Internet Explorer non rientra nell’elenco software.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Luca
Ti è piaciuto l'articolo?