Nouveaux types d'entrée de formulaire en HTML5 - mannequins

est centré autour de l'élément d'entrée humble mais flexible. HTML5 ajoute un certain nombre de formes d'entrée très utiles qui permettent de transformer HTML en un outil d'interface utilisateur plus moderne.

Bien que la prise en charge de ces étiquettes ne soit pas universelle, vous pouvez commencer à les utiliser dès maintenant. Tout navigateur (même IE6) qui ne comprend pas les types d'entrée avancés retournera à l'entrée type = "text", qui fonctionnera exactement comme prévu (mais pas avec les améliorations de validation et d'interface utilisateur des balises les plus récentes).

La norme indique que les différents types seront supportés, mais la manière exacte dont les éléments sont supportés peut varier d'un navigateur à l'autre. Par exemple, le champ de courrier électronique peut ressembler à un champ de texte ordinaire à un utilisateur sur un ordinateur de bureau standard, mais le clavier virtuel sur un périphérique mobile peut être modifié pour inclure le @ lorsqu'il rencontre un champ de messagerie.

La plupart de ces champs de spécialité supportent la validation, donc au minimum, il est utile de définir un style CSS: invalide afin que l'utilisateur puisse dire si les données sont sur le terrain. Voici les types d'entrée avec un exemple de codage:

• couleur : Permet à l'utilisateur de choisir une couleur en utilisant des formats web standard - noms de couleurs reconnus (jaune) et valeurs hexadécimales précédées d'un symbole # (# FF0033).

• date : Certains navigateurs (Firefox 3. 5) affichent un champ de texte, d'autres (Opera 10) affichent un contrôle de calendrier spécial, d'autres navigateurs (Chrome) incluent du texte et un calendrier pop-up. Si la date est entrée par du texte, elle doit être entrée dans un format aaaa-mm-jj:

  Vous pouvez limiter les dates autorisées à une plage spécifique en appliquant les attributs min et max à l'élément.

• heure : L'heure est enregistrée au format hh: mm. Certains navigateurs incluent un deux-points directement dans le champ, et d'autres modifient le clavier virtuel avec des chiffres et le caractère deux-points. Il est également possible qu'un navigateur affiche une sorte de sélecteur de temps personnalisé, mais ce n'est pas encore pris en charge dans les principaux navigateurs.

• datetime : Combine la date et l'heure en un seul élément. Il comprend également un mécanisme pour entrer dans le fuseau horaire.

  Certains navigateurs affichent un contrôle de calendrier pour la date et une entrée formatée pour l'heure. D'autres peuvent modifier les claviers virtuels pour la saisie de la date et de l'heure.

  Le format officiel complet de la date et de l'heure renvoyé par les différents éléments date et heure est un code spécialisé: aaaa-mm-jjThh: mm + ff: gg:

  • aaaa : Quatre chiffres pour le an.

  • - : Un caractère tiret réel, qui doit être placé entre l'année et le mois.Un autre tiret est placé entre le mois et le jour.

  • mm : Deux chiffres pour le mois.

  • dd : Deux chiffres pour le jour.

  • T : La majuscule T indique le début de la partie heure du code.

  • hh : Deux chiffres pour l'heure, au format 24 heures.

  • : : Le caractère deux-points entre l'heure et les minutes. Un autre deux-points apparaît entre l'heure et les minutes du décalage du fuseau horaire.

  • mm : Deux chiffres pour les minutes.

  • + / - / Z : Le décalage horaire est indiqué par une majuscule Z (si l'heure est l'heure Zulu ou GMT) ou le symbole + ou - si le temps est dans un autre fuseau horaire.

  • ff : Si le fuseau horaire n'est pas l'heure Zulu, indiquez le nombre d'heures décalées par rapport à GMT.

  • gg : Nombre de minutes décalées par rapport à l'heure Zulu. Généralement, il s'agit de 00, mais il est possible que le fuseau horaire soit décalé de 15, 30 ou 45 minutes.

  Par exemple, le 11 octobre 2011, à 17h30, à New York ressemble à ceci:

  2011-10-11T17: 30-05: 00
  

  La date et l'heure doivent être dans cette format à considérer comme valide pour les navigateurs qui valident un champ dateTime.

• datetime-local : Tout comme l'élément datetime sans indicateur de fuseau horaire:

• email : Cela ressemble à un champ de texte brut, mais il peut être modifié selon comment il est accédé.

• mois : Cela génère une année à quatre chiffres suivie d'un mois à deux chiffres:

• nombre : Les données numériques peuvent être constituées d'un champ de texte suivi d'une sorte de sélecteur (par exemple, les flèches haut et bas), ou cette balise peut changer le clavier virtuel d'un périphérique portable pour gérer uniquement les entrées numériques.

  Le type de saisie numérique prend en charge plusieurs attributs spéciaux:

  • min : La valeur minimale autorisée.

  • max : La valeur maximale autorisée.

  • étape : Cette valeur indique à quel point les outils de l'interface visuelle (généralement de petites flèches vers le haut et vers le bas) changent la valeur lorsqu'elle est activée.

  • valeur : La valeur numérique de l'élément.

  Tous les attributs de l'élément numéro peuvent être des nombres entiers ou à virgule flottante. Cependant, les navigateurs actuels qui supportent cette balise (Opera et Chrome) ne semblent pas aussi bien valider avec des valeurs à virgule flottante qu'avec des valeurs entières. Pour plus de contrôle de l'entrée numérique, tenez compte du type d'entrée de gamme.

• plage : La plupart des boîtes à outils de l'interface utilisateur disposent d'un mécanisme de curseur ou de barre de défilement, qui permet aux utilisateurs d'entrer facilement une valeur numérique. La construction ajoute enfin cette fonctionnalité aux formulaires HTML.

  L'entrée de plage prend les mêmes attributs que nombre, min, max, valeur et pas. Si le navigateur prend en charge la balise de plage, l'utilisateur verra un scroller; sinon, un type d'entrée en texte brut apparaîtra.

  Le type de plage n'affiche pas la valeur exacte et il peut être plus difficile d'obtenir des résultats précis qu'avec le type d'entrée numérique. Une solution consiste à associer une balise de sortie à la plage et à utiliser JavaScript pour mettre à jour la sortie lorsque la plage est modifiée.Un exemple de formulaire qui incorpore cette idée:

  128
  

  Lorsque la valeur de plage est modifiée, elle appelle une fonction JavaScript appelée updateOutput:

  function updateOutput () {// récupère les éléments var myRange = document. getElementById ("myRange"); var myOutput = document. getElementById ("monOutput"); // Copie la valeur sur myOutput. value = myRange. valeur}} // fin de la fonction
  

  Comme le type d'entrée de nombre, la plage peut recevoir des valeurs à virgule flottante si vous le souhaitez.

• search : Permet de récupérer du texte destiné à être utilisé dans le cadre d'une recherche (interne ou via un service de recherche). Sur la plupart des navigateurs, cette balise s'affiche comme un champ de texte ordinaire. Il a parfois un comportement spécial. Sur Safari, le champ de recherche est affiché avec un petit x , ce qui efface le contenu de la recherche. Sur Chrome, les fonctions d'auto-complétion de la barre de recherche principale (qui est également l'élément d'entrée URL dans Chrome) sont automatiquement appliquées au champ de recherche.

  Comme les autres nouveaux types d'entrée, l'utilisation de l'élément de recherche dans les navigateurs qui ne le prennent pas en charge n'est pas pénalisante. Le repli est une entrée en texte brut.

  L'élément de recherche ne fait aucune recherche. Pour le rendre fonctionnel, vous devez écrire du code.

• tel : Ce champ attend trois chiffres suivis d'un tiret et de quatre chiffres - un numéro de téléphone local. Vous devrez peut-être jouer avec l'attribut pattern si vous souhaitez autoriser un code régional ou des extensions à valider.

• url : Les navigateurs qui supportent cet élément vérifieront le préfixe // pour une adresse web. Les navigateurs mobiles peuvent également adapter le clavier virtuel pour inclure les caractères généralement présents dans les URL: les deux points (:), la barre oblique (/) et le tilde (~).

• semaine : Permet à l'utilisateur de choisir une semaine à partir d'un contrôle de calendrier. Il renvoie une valeur au format suivant: aaaa-Wnn

  • aaaa : Représente une année à quatre chiffres.

  • - : Le caractère de tiret.

  • W : Le caractère majuscule W .

  • nn : La semaine sous forme de nombre à deux chiffres.

  Certains navigateurs affichent le contrôle de calendrier standard. Lorsque l'utilisateur sélectionne une date (ou une semaine), seules l'année et la semaine seront renvoyées. D'autres navigateurs valident simplement le format approprié.