Construction de formulaires

entre Vous et Nous

Le problème

Nous voulons réaliser un formulaire de saisie. Nous voulons donc que celui-ci soit :

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 :

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$"/></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>
Le résultat directement produit à partir du code précédent
valeurs de saisie
valeurs temporelles
valeurs de couleurs et de nombres

produit des deux valeurs précédentes : résultat

valeurs de champs textuels divers