Le problème
Nous voulons réaliser un formulaire de saisie. Nous voulons donc que celui-ci soit :
- d'un aspect agréable sur un écran d'ordinateur,
- simple d'utilisation sur un téléphone mobile.
Le but de cette page est de montrer comment exploiter les éléments de saisie du HTML5 permettant de déclarer des dates, des nombre, des couleurs, .... Vous pourrez ainsi les tester sur vos téléphones, tablettes et ordinateurs.
Pour cela nous allons recourir au code suivant, qui je l'espère, est suffisamment explicite pour ne pas nécessiter plus de commentaires excepté de préciser qu'il repose sur les types suivants de la balise input :
- time pour l'heure seule,
- week pour une semaine,
- month pour un mois,
- date pour une date seule,
- datetime pour la date et l'heure,
- color pour une couleur,
- range pour un potentiomètre,
- number pour une valeur numérique,
- email pour une adresse de courrier électronique,
- url pour une URL,
- search pour une expression de recherche.
Nous exploiterons également la balise output pour afficher le résultat d'un calcul.
La solution
Le code suivant illustre un tel cas :
<datalist id="mois_list">
<option>2015-12</option>
<option>2016-01</option>
<option>2017-09</option>
<option>2019-08</option>
</datalist>
<datalist id="color_list">
<option>#FF00FF</option>
<option>#FFFF00</option>
<option>#FF8000</option>
<option>#888888</option>
<option>#0088FF</option>
</datalist>
<form action="#test_time" id="test_time"
onsubmit="alert('tout est bon !');return false"
oninput="respot.value=potentiometre.value*valnum.value">
<fieldset><legend>valeurs de saisie</legend>
<fieldset>
<legend>valeurs temporelles</legend>
<label>Entrez l'heure : <input type="time" value="12:14:00" required="true" name="heure"/></label>
<label>Entrez la semaine : <input type="week" value="2015-W23" name="semaine" step="3"/></label>
<label>Entrez le mois : <input type="month" value="2015-12" name="mois" list="mois_list"/></label>
<label>Entrez la date : <input type="date" value="2015-12-14" name="date"/></label>
<label>Entrez la date complète : <input type="datetime-local" value="2015-12-14T12:14:18" name="date_heure" step="0.1"/></label>
</fieldset>
<fieldset>
<legend>valeurs de couleurs et de nombres</legend>
<label>Entrez le couleur : <input type="color" value="#FFFF00" name="couleur" list="color_list"/></label>
<label>Entrez le valeur : <input type="number" min="-100" max="150" value="20" name="valnum" step="2.5"/></label>
<input type="range" min="-100" max="150" value="20" name="potentiometre" step="5"/>
<p>produit des deux valeurs précédentes : <output name="respot" for="potentiometre"/>résultat</output></p>
</fieldset>
<fieldset>
<legend>valeurs de champs textuels divers</legend>
<label>Votre nom : <input type="text" placeholder="Jean Valjean" pattern="^[\u00A0-\u2FFFF\w-]+$" name="nom"/></label>
<label>Votre E-Mail : <input type="email" placeholder="JValjean@roman.fr" name="email"/></label>
<label>Votre téléphone : <input type="tel" placeholder="0123456789" name="telephone" pattern="^[0-9]{2}([- ]?)[0-9]{2}\1[0-9]{2}\1[0-9]{2}\1[0-9]{2}$" title="un numéro doit être composé de 10 chiffres éventuellement séparés par un délimiteur (espace ou tiret)"/></label>
<label>Votre site web : <input type="url" placeholder="http://mon-site.fr" name="url"/></label>
<label>Vous recherchez : <input type="search" placeholder="expression" name="ce que je cherche"/></label>
</fieldset>
</fieldset>
<input type="submit"/>
</form>