<input> : Démo HTML5
Mise à jour : 2017-01-22
Inchangés depuis HTML2 (1996),
les formulaires ont fait l'objet de débauches techniques.
L'enjeu des formulaires HTML5
est l'intégration de nouvelles fonctionnalités et l'automatisation de certains comportements,
se plaçant comme un intermédiaire entre les formulaires actuels
et XForms.
<input>
- Attribut type :
- date : Calendrier perpétuel.
- time : Saisir une heure.
- number : Saisir un nombre.
- range : Slider.
- color : Saisir une couleur.
- email : Saisir une adresse mail.
- url : Saisir une URL.
- search : Champ de recherche.
- file : Cf. la page sur File API.
- ...
- Autres attributs :
- autofocus : Place le focus sur un champ spécifique.
- placeholder : Suggestion de saisie apparaîssant uniquement lorsque le champ est vide et non sélectionné.
- required : Saisie obligatoire.
- maxlength : Nombre maximal de caractères.
- min : Valeur minimale.
- max : Valeur maximale.
- step : Valeur du pas d'incrément (exemple: 2 par 2).
- pattern : Format défini par une expression regulière.
- title : Bulle d'aide et message d'erreur personnalisé.
- ...
Détails du support
date | ||||
time | ||||
number | ||||
range | ||||
color | ||||
url | ||||
search | ||||
autofocus | ||||
placeholder | ||||
required | ||||
vérif. auto |
Notes sur le tuto
- Le projet webforms2 est une implémentation JavaScript de ces nouveaux formulaires, pour les navigateurs qui ne les supportent pas nativement.
- Le validateur du W3C donne une erreur lorsque l'attribut "value" d'un input de type "url" n'est pas une URL valide et vérifie aussi (depuis juin 2011) la valeur par défaut du type "color".
- Chrome et Opéra permettent de styler le type "range" via CSS et la balise <datalist>.
- Edge apporte le support du type "date". Démonstration du type range sur ce convertisseur de mesures anglo-saxonnes.
- Limitations :
- La date est récupérée dans la page d'action via $_GET["myDate"] au format ISO 8601 (AAAA-MM-JJ).
- IE supporte les formulaires HTML5
depuis la version 10.
Depuis la version sous Windows 7, IE supporte aussi les types "number" et "range" :
- number : sans aide à la saisie.
- range : indique la valeur courante pendant le déplacement du curseur, mais n'envoit pas d'évènement "oninput",
contrairement aux autres navigateurs, mais "onchange" (que les autres navigateurs ne renseignent qu'Ã la fin).
Edge se comporte comme les autres navigateurs.
Exemple de code HTML5
<!--_pseudo-class.css input:optional {background-color: silver} input:required {background-color: fuchsia} input:invalid {background-color: red} --> <!--_range.css input[type="range"] {position: relative} input[type="range"]:before, input[type="range"]:after {position: absolute; top: 30px} input[type="range"]:before {left: 0; content: attr(min)} input[type="range"]:after {right: 0; content: attr(max)} --> <form action="_input.php"> Date : <input type="date" name="myDate" title="Date (aaaa-mm-jj)" value="2009-01-15" required><br> <br> Time : <input type="time" name="myTime" title="Heure (hh:mn)" value="08:16" required><br> <br> Number : <input type="number" name="myNumber" title="Nombre" value="10" min="8" max="12" step="2" required><br> <br> Range : <input type="range" name="myRange" title="Curseur" value="0" min="0" max="10" step="2" onchange="document.getElementById('rangeOutputOnChange').textContent=value" oninput="document.getElementById('rangeOutputOnInput').textContent=value" list=graduations> <datalist id=graduations style="display:none"> <option>0</option> <option>2</option> <option>4</option> <option>6</option> <option>8</option> <option>10</option> </datalist> OnChange = <span id="rangeOutputOnChange">0</span> / OnInput = <span id="rangeOutputOnInput">0</span><br> <br> Color : <input type="color" name="myColor" title="Couleur en anglais" value="#666666"><br> <br> Email : <input type="email" name="myEmail" title="Courriel" value="html5demo@braincracking.org" required><br> <br> URL : <input type="url" name="myURL" title="URL" value="http://html5demo.braincracking.org" required><br> <br> PlaceHolder & AutoFocus : <input type="text" name="myPhone" title="N° à 10 chiffres avec espace" pattern="^0[1-9]( [0-9]{2}){4}$" placeholder="06 01 02 03 04" autofocus required><br> <br> Search : <input type="search" name="mySearch" title="Recherche" required><br> <br> <input type="submit" value="Valider"> </form>
Démonstration du résultat HTML5
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isAttributeSpecified("myDate", "type", "date") isAttributeSpecified("myTime", "type", "time") isAttributeSpecified("myNumber","type", "number") isAttributeSpecified("myRange", "type", "range") isAttributeSpecified("myColor", "type", "color") isAttributeSpecified("myEmail", "type", "email") isAttributeSpecified("myURL", "type", "url") isAttributeSpecified("mySearch","type", "search") isAttributeSupported("input", "autofocus") isAttributeSupported("input", "placeholder") isAttributeSupported("input", "required") isAttributeSupported("input", "min") isAttributeSupported("input", "max") isAttributeSupported("input", "step") </script>