input type="range" en html5

Dans un formulaire, le type range permet de générer une barre de choix...
La balise output permet d'afficher la valeur d'un formulaire ou le résultat d'un calcul à partir des valeurs saisies dans un formulaire par l'utilisateur.
Code: Select all
<form method="post" action="#" oninput="result.value=Range.value">
<fieldset>
<input style="margin-left:4%;width:82%" type="range" step="0.01" name="Range" value="" min="-2" max="2" >
<br/>
value= <output for="out" name="result"></output>
</fieldset>
</form>
Affichage:

value=
On peut aussi très bien se débrouiller sans cette balise, en utilisant une variable php. Les pages générée en php étant statiques, cette méthode oblige néanmoins à recharger la page à chaque interaction.
C'est cette méthode qui est utilisée là: cf. taux d'accroisement
Code: Select all
<?php if (isset($_POST['value'])) {$value=$_POST['value'];} else {$value=0;}?>
<form method="post" action="#">
<fieldset>
<input style="margin-left:4%;width:82%" type="range" step="0.01" name="value"
value="" min="-2" max="2" list="accroissement"
onchange="this.form.submit()" onclick="this.form.submit()">
<datalist id="accroissement">>
<option>1.5</option>
<option>2</option>
<option>-0.5</option>
<option>0</option>
<option>0.5</option>
<option>1</option>
<option>1.5</option>
<option>2</option>
<datalist>
<input type="hidden" name="f2wt" value=""/>
</fieldset>
</form>
Affichage:
value=0