Vous êtes ici : Accueil » programmation » type de Champ en html, php
email
Toujours très proche du type text
, ce champ est équivalent au type url, seul le format attendu change.
Ce champ attend au minium un caractère (caractère non accentué comprenant les séparateurs tiret ou underscore) suivi d'un @ suivi à son tour d'un caractère.
Exemple d'entrée invalide : é@ç
Exemples d'entrées valides : -@_ , f@r
Une nouvelle fois, le clavier du SmartPhone compatible avec ce type de champ de formulaire vous présentera un clavier adapté incluant le symbole arobase.
email
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 10+ | Affiche une infobulle en cas d'invalidation. | |
Firefox 4+ Firefox Mobile (Androi 4) |
Affiche une infobulle en cas d'invalidation. |
|
Chrome 6+ |
Partiel jusqu'à Chrome 10. Affiche une infobulle en cas d'invalidation. Affiche un clavier de type e-mail. |
|
Opera 9+ Opera Mobile (Android 4) |
Affiche une infobulle en cas d'invalidation. Propose un style par défaut du champ jusqu'à la version 11. Affiche un champ de type text . |
|
Safari 5+ |
Affiche une infobulle en cas d'invalidation. Propose un clavier de type e-mail. |
|
Android Browser 3.1+ | Aucune infobulle en cas d'invalidation - Propose un clavier de type e-mail si votre clavier est "Android". |
month
et week
month
Le type de champ month
permet de renseigner un mois dans une année. Il attend donc un format proche du type date
duquel on retire l'information sur le jour.
La liste des attributs compatibles reste la même que pour le type date
.
Le format attendu correspond à cette syntaxe : aaaa-mm
(ex: 2012-01
).
La présentation des contrôles sur Safari et Opera se rapproche de ceux rencontrés précédemment pour les autres types de champ.
Il s'agit bien ici de sélectionner un mois dans une année précise.
month
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 9 | Affiche un champ de type text . |
|
Firefox 4 - 10 Firefox Mobile (Android 4) |
Affiche un champ de type text .Affiche un champ de type text sur mobile. |
|
Chrome 16 Chrome Mobile (Android 4) |
Affiche un champ de type text . Fonctionnait sous Chrome 10.Affiche un champ select avec controle de type mois et année (Chrome Mobile) |
|
Opera 10.6+ |
Affiche des controles d'aide à la saisie de type datepicker. Idem sur Mobile. |
|
Safari 5+ |
Affiche un champ avec bouton d'incrémentation et décrémentation partant du mois courant. Affiche une aide à la saisi de type mois et année (Safari mobile) |
|
Android Browser 3.1+ | Affiche un champ de type text . |
number
Le type de champ number
permet de renseigner une valeur numérique.
Le champ de formulaire est alors transformé en une sorte de boite permettant l'incrémentation et la décrémentation d'une valeur numérique initiale (0 par défaut), lorsque la prise en charge par le navigateur est complète.
Lorsque ce type de champ est pris en charge par le navigateur, celui-ci renvoie la valeur numérique renseignée dans ce champ. Si un autre type de contenu est renseigné, aucune valeur n'est retournée à la soumission du formulaire.
À noter que les tests sous SmartPhone (ici iPhone) nous ont présenté un clavier de type numérique.
step
Cet attribut permet de définir le pas de l'incrémentation.
step="8">
Dans le cas de ce code HTML, l'incrémentation et la décrémentation se feront de 8 en 8, les valeurs négatives étant admises.
Internet Explorer 10 prend en charge step
en affichant une erreur lorsque le chiffre renseigné "manuellement" n'est pas un multiple du pas ; mais il n'affiche pas de bouton d'incrémentation. Le seul regret étant que le message d'erreur n'affiche aucun indice à l'utilisateur sur le pas.
min
et max
Ces deux attributs permettent de limiter le nombre dans un intervalle défini.
min="0" max="64">
Ici les possibilités pour l'utilisateur vont être minces, puisqu'en partant de 0 (value
), il pourra choisir les valeurs de 8 en 8 (step
) comprises entre 0 (min
) et 64 (max
).
number
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 10 | Affiche un champ de type text . Doit respecter un pattern numérique. |
|
Firefox 4 - 10 Firefox Mobile (Android 4) |
Affiche un champ de type text .Affiche un champ de type text et clavier numérique. |
|
Chrome 10+ Chrome Mobile Beta (Android 4) |
Affiche un champ avec bouton d'incrémentation et décrémentation. Fonctionnait partiellement sous Chrome 9. Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique. Alignement à gauche du nombre. Affiche un champ classique avec clavier numérique. |
|
Opera 11+ Opera Mobile (Android 4) |
Affiche un champ avec bouton d'incrémentation et décrémentation. Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique. Alignement à droite du nombre. Identique sous mobile. |
|
Safari 5+ |
Affiche un champ avec bouton d'incrémentation et décrémentation. Aucun pattern à respecter mais ne renvoit aucune valeur si différente d'un pattern numérique. Alignement à gauche du nombre. Affiche un champ de type text avec clavier numérique. (Safari mobile) |
|
Android Browser 3.1+ | Affiche un champ de type text avec clavier numérique. |
tel
: donne ton 06 ! champ téléphoneIl s'agit d'une déclinaison d'un champ de type text
. Aussi, aucun format spécifique n'est attendu par le navigateur. Il n'y a donc pas de pattern précis qui vérifirait si au moins un chiffre est renseigné.
Cependant, sur certains navigateurs de SmartPhone, comme sur Safari pour iOS par exemple, l'entrée du numéro de téléphone est facilitée par le basculement à un clavier de type numérique.
Ce clavier présente tous les chiffres en clavier principal et tous les caractères mathématiques en second clavier.
Le navigateur ne proposant pas cette vérification, un contrôle plus fin grâce à l'attribut pattern
ainsi qu'un contrôle côté serveur sera nécessaire.
Pour effectuer ce type de contrôle, vous aurez besoin d'une expression régulière pour détecter un numéro de téléphone local ou international.
^((+d{1,3}(-| )?(?d)?(-| )?d{1,5})|((?d{2,6})?))(-| )?(d{3,4})(-| )?(d{4})(( x| ext)d{1,5}){0,1}$
Ainsi le contrôle grâce à l'attribut pattern
nous donnerait un code de ce type :
Le contrôle du côté serveur ne sera pas détaillé ici.
tel
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 10+ | Affiche un simple champ de type text sur les versions inférieures à 10 |
|
Firefox 4+ Firefox Mobile (Android 4) |
Affiche un clavier de type Tel (Mobile) | |
Chrome 6+ Chrome Mobile (Android 4) |
Affiche un clavier de type Tel (Mobile) | |
Opera 10.6+ Opera Mobile (Android 4) |
Rien à signaler. | |
Safari 5+ |
Propose un clavier de type numérique (mobile) | |
Android Browser 3.1= | Propose un clavier de type numérique. (ne fonctionne pas sur Andorid 4 ?) |
url
: un site web ?En apparence ce champ ressemble à celui de type text
. Cependant, le navigateur attend cette fois un format bien spécifique devant respect un pattern de type url
.
Tous les types d'URL sont admis (ftp://, mailto:, http://, etc.). Par défaut, sur Opera, lorsque vous ne spécifiez pas le type de protocole, le navigateur ajoute automatiquement le type http://, ce qui valide forcément le format attendu pour ce champ.
À l'instar du type tel
, le type url
permet à un SmartPhone compatible d'afficher un clavier proposant les caractères courants d'une URL.
url
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 10+ | Affiche une infobulle en cas d'invalidation. | |
Firefox 4+ Firefox Mobile (Android 4) |
Affiche une infobulle en cas d'invalidation. Affiche un clavier de type "chemin" (légèrement différent du type URL) |
|
Chrome 6+ Chrome Mobile (Android 4) |
Partiel jusqu'à Chrome 10. Affiche une infobulle en cas d'invalidation. Affiche un clavier de type URL (poonctuation supplémentaire). |
|
Opera 9+ Opera Mobile ( Android 4) |
Affiche une infobulle en cas d'invalidation. Propose un style par défaut du champ jusqu'à la version 11. La version 11 ajoute automatiquement "http://" si le protocole n'est pas renseigné. Affiche un clavier de type URL (mobile) |
|
Safari Desktop |
Aucun support, affiche un champ de type text .Propose un clavier de type URL. |
|
Android Browser | Aucun support, affiche un champ de type text . |
date
, time
et datetime
date
Ce champ visuellement proche de celui de type text
vous permet d'activer une aide au remplissage (type datepicker) présente uniquement sur quelques navigateurs et différente de l'un à l'autre.
Le contenu attendu est une date du calendrier Grégorien au format RFC3339 sans précision de la timezone, mais le champ accepte un contenu vide ou mal formaté sans retourner d'erreur.
La liste des attributs compatible est la suivante :
name
, disabled
, form
, type
, autocomplete
, autofocus
, list
, min
, max
, step
(chiffre entier), readonly
, required
, value
, pattern
ainsi que les attributs classiques, d'événements et xml.
Pour le moment, Internet Explorer 9 et Firefox 13 ne proposent aucune aide particulière au remplissage.
Voici le comportement en image de Safari 5.1.2 et Opera 11.6, et Chrome 20.
La solution d'Opera propose une accessibilité au clavier plutôt intéressante grâce à différents raccourcis : flèche base/droite ou gauche/haut pour décrémenter ou incrémenter d'un jour, alt+flèche bas pour ouvrir le datepicker, Tab + flèche droite pour naviguer sur les mois, flèche droite ou gauche pour passer du mois à l'année, etc. Les valeurs renvoyées par ce type de champ de formulaire semblent identiques sur Safari et Opera (ex : 2012-01-26
) .
Ce type permet également aux smartphones compatibles d'afficher un module avancé basé sur le format attendu (qui va différer selon la langue de votre machine).
date
Navigateurs | Versions | Détails |
---|---|---|
Internet Explorer 9 | Affiche un champ de type text . |
|
Firefox 4 - 10 Firefox Mobile (Android 4) |
Affiche un champ de type text .Idem sur mobile avec clavier de type numérique. |
|
Chrome 16 Chrome Mobile Beta (Android 4) |
Affiche un champ de type |
|
Opera 10.6+ Opera Mobile (Android 4) |
Affiche des controles d'aide à la saisie de type datepicker. Idem sur mobile. |
|
Safari 5+ |
Affiche un champ avec bouton d'incrémentation et décrémentation partant de la date du jour. Affiche une aide à la saisie de type date. (Safari mobile) |
|
Android Browser 3.1+ | Affiche un champ de type text . |
Les attributs min
et max
peuvent être appliqués sur ce type de champ pour offrir un intervalle précis de dates (testé sous Opera).