De nouveaux types de saisie de formulaire en HTML5

Formulaires HTML sont centrées autour de l'humble mais flexible contribution élément. HTML5 ajoute un certain nombre de formes très utiles d'entrée qui aident à tourner HTML en un outil d'interface utilisateur plus moderne.

Bien que le soutien de ces balises est pas universel, il est sûr de commencer à les utiliser maintenant. Tout navigateur (même IE6) qui ne comprennent pas les types d'entrée avancées reviendront à input type = "texte", qui sera toujours travailler exactement comme prévu (mais pas avec les améliorations de la validation et de l'interface utilisateur des balises plus récents).

La norme indique que les différents types seront pris en charge, mais la manière exacte les éléments sont pris en charge peut varier d'un navigateur à. Par exemple, le champ e-mail peut ressembler à un champ de texte ordinaire à un utilisateur sur un ordinateur de bureau standard, mais le clavier virtuel sur un appareil mobile pourrait changer d'inclure le @ quand il rencontre un champ e-mail.

La plupart de ces domaines de spécialité en charge la validation, donc au minimum, il est utile de définir une : invalide Style CSS afin que l'utilisateur peut dire si les données sont dans le champ. Voici les types d'entrée avec codage de l'échantillon:

• couleur: Permet à l'utilisateur de choisir une couleur en utilisant des formats standards du web - noms reconnus de couleur (jaune) et les valeurs hexadécimal précédé par un symbole # (# FF0033).

• date: Certains navigateurs (Firefox 3.5) affichent un champ de texte, d'autres (10) Opéra afficher un contrôle de calendrier spécial, encore d'autres navigateurs (Chrome) inclure à la fois le texte et un calendrier de pop-up. Si la date est saisie d'un texte, il doit être entré dans un format yyyy-mm-dd:

  Vous pouvez restreindre les dates autorisées à une gamme spécifique en appliquant la min et max les attributs de l'élément.

• temps: Temps est stocké dans le format hh: mm. Certains navigateurs comprennent un colon directement sur le terrain, et certains modifient le clavier virtuel avec des chiffres et le caractère du côlon. Il est également possible que d'un navigateur apparaîtra une sorte de sélecteur de temps de coutume, mais cela n'a pas encore été pris en charge dans tous les navigateurs principaux.

• datetime: Coalitions date et temps en un seul élément. Il comprend également un mécanisme de saisie du fuseau horaire.

  Certains navigateurs pop up un contrôle de calendrier pour la date et une entrée formatée pour le moment. D'autres peuvent modifier les claviers virtuels pour la date et l'entrée de temps.

  Le format de la date et de l'heure officielle complète de rentrer des différents éléments de date et d'heure est un code spécialisé: aaaa-mm-jjThh: mm + ff: gg:

• aaaa: Quatre chiffres pour l'année.

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

• mm: Deux chiffres pour le mois.

• dd: Deux chiffres pour le jour.

• T: La capitale T indique le début de la partie temporelle du code.

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

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

• 
  
  
  
  

  mm: Deux chiffres pour les minutes.

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

• ff: Si le fuseau horaire est pas le temps Zulu, indiquer le nombre d'heures de décalage GMT.

• gg: Nombre de minutes de décalage de temps Zulu. Typiquement, cela est 00, mais il est possible que le fuseau horaire sera compensée par 15, 30 ou 45 minutes.

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

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

La nécessité de date et l'heure d'être dans ce format pour être considérée comme valide pour les navigateurs qui valident une dateTime champ.

Tous les attributs de la nombre élément peut être entier ou virgule flottante. Cependant, les navigateurs actuels qui soutiennent cette balise (Opera et Chrome) ne semblent pas valider ainsi avec des valeurs à virgule flottante comme ils le font avec des valeurs entières. Pour plus de contrôle de l'entrée numérique, envisager la gamme type d'entrée.

 updateOutput fonction () {// get elementsvar myRange = document.getElementById ("myRange") - var myOutput = document.getElementById ("myOutput") - // copier la valeur overmyOutput.value = myRange.value-} // fonction de fin

Certains navigateurs apparaître le contrôle de calendrier standard. Lorsque l'utilisateur sélectionne une date (ou une semaine), seule l'année et la semaine seront retournés. Les autres navigateurs il suffit de valider pour le format approprié.