Administration

Vous êtes ici : Accueil » programmation » type de Champ en html, php

type de Champ en html, php

Champ de type 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

<input type="email" name="user_email">

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.

Compatibilité du type email
Navigateurs Versions Détails
Internet Explorer Internet Explorer 10+ Affiche une infobulle en cas d'invalidation.
Firefox Firefox 4+
Firefox Mobile (Androi 4)

Affiche une infobulle en cas d'invalidation.
Affiche un clavier de type e-mail.

Chrome

Chrome 6+
Chrome Mobile (Android 4)

Partiel jusqu'à Chrome 10. Affiche une infobulle en cas d'invalidation.
Affiche un clavier de type e-mail.
Opera 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

Safari 5+
Safari Mobile (iOS 3.1)

Affiche une infobulle en cas d'invalidation.
Propose un clavier de type e-mail.
Android Browser Android Browser 3.1+ Aucune infobulle en cas d'invalidation - Propose un clavier de type e-mail si votre clavier est "Android".
 

 

Champ de type month et week

Champ de type 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).

<input type="month" name="holidays">

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.

        

Compatibilité du type month
Navigateurs Versions Détails
Internet Explorer Internet Explorer 9 Affiche un champ de type text.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)

 
Affiche un champ de type text.
Affiche un champ de type text sur mobile.
Chrome 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

Opera 10.6+
Opera Mobile (Android 4)

Affiche des controles d'aide à la saisie de type datepicker.
Idem sur Mobile.
Safari

Safari 5+
Safari Mobile (iOS 4)

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 Android Browser 3.1+ Affiche un champ de type text.

 

Champ de type number

Le type de champ number permet de renseigner une valeur numérique.

<input type="number" name="howmuch">

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.

L'attribut step

Cet attribut permet de définir le pas de l'incrémentation.

<input type="number" 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 stepen 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.

Démonstration

Les attributs min et max

Ces deux attributs permettent de limiter le nombre dans un intervalle défini.

<input type="number" step="8" value="0" 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).

Compatibilité du type number
Navigateurs Versions Détails
Internet Explorer Internet Explorer 10 Affiche un champ de type text. Doit respecter un pattern numérique.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)
Affiche un champ de type text.
Affiche un champ de type text et clavier numérique.
Chrome 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 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

Safari 5+
Safari Mobile (iOS 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 à gauche du nombre.
Affiche un champ de type text avec clavier numérique. (Safari mobile)
Android Browser Android Browser 3.1+ Affiche un champ de type text avec clavier numérique.
 

 

Champ de type tel : donne ton 06 ! champ téléphone

Il 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 :

<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$">

Le contrôle du côté serveur ne sera pas détaillé ici.

Compatibilité du type tel
Navigateurs Versions Détails
Internet Explorer Internet Explorer 10+ Affiche un simple champ de type text sur les versions inférieures à 10
Firefox Firefox 4+
Firefox Mobile (Android 4)
Affiche un clavier de type Tel (Mobile)
Chrome Chrome 6+
Chrome Mobile (Android 4)
Affiche un clavier de type Tel (Mobile)
Opera Opera 10.6+
Opera Mobile (Android 4)
Rien à signaler.
Safari

Safari 5+
Safari Mobile (iOS 3.1)

Propose un clavier de type numérique (mobile)
Android Browser Android Browser 3.1= Propose un clavier de type numérique. (ne fonctionne pas sur Andorid 4 ?)
 

 

Champ de type 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.

<input type="url" value="http://" name="website">

À l'instar du type tel, le type url permet à un SmartPhone compatible d'afficher un clavier proposant les caractères courants d'une URL.

Compatibilité du type url
Navigateurs Versions Détails
Internet Explorer Internet Explorer 10+ Affiche une infobulle en cas d'invalidation.
Firefox 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 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 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

Safari Desktop
Safari Mobile (iOS 3.1)

Aucun support, affiche un champ de type text.
Propose un clavier de type URL.
Android Browser Android Browser Aucun support, affiche un champ de type text.

 

Champ de types datetime et datetime

Champ de type 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 :
namedisabledformtypeautocompleteautofocuslistminmaxstep (chiffre entier), readonlyrequiredvaluepattern ainsi que les attributs classiques, d'événements et xml.

<input type="date" name="anniversaire">

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).

       

Compatibilité du type date
Navigateurs Versions Détails
Internet Explorer Internet Explorer 9 Affiche un champ de type text.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)
Affiche un champ de type text.
Idem sur mobile avec clavier de type numérique.
Chrome Chrome 16
Chrome Mobile Beta (Android 4)

Affiche un champ de type text. Fonctionnait sous Chrome 10.
Affiche un select avec un controle de type jour, mois et année (Mobile).

Opera Opera 10.6+
Opera Mobile (Android 4)
Affiche des controles d'aide à la saisie de type datepicker.
Idem sur mobile.
Safari

Safari 5+
Safari Mobile (iOS 4)

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 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).

 


Date de publication:   12/10/2014


Algorithme qui calcule le PGCD et PPCM

Algorithme qui calcule le PGCD et PPCM

Page précédent 69 70 71 72 73 74 75 76 77 Page suivante

Laisser un commentaire





abdjpwy9


zack77 Vendredi 25 Mai 2018

Aucun commentaire pour le moment concernant le sujet « type de Champ en html, php »!