Nouveaux champs de saisie

Dans le cours de HTML4 nous avons vu les formulaires et les différents champs qu'ils peuvent accueillir. En HTML5 un éventail plus étendu de champs de formulaire est proposé. En gros il s'agit de zones de texte (comme la fameuse <input type="text">) mais elles sont modifiées pour désigner quel type de texte on entend réellement).

Champ type tel

Le champ type tel (<input type="tel">) est une zone de texte modifiée destinée à accueillir un numéro de téléphone. Vous imaginez peut être que si le client entre quelque chose d'autre qu'un numéro de téléphone, ce qu'il a saisi sera refusé. En fait, non. Pour contrôler la saisie du client il faut faire appel à un script (coté serveur de préférence comme PHP). Cependant, l’intérêt du champs tel se manifeste quand on se sert d'un smartphone, celui ci affichera un clavier numérique quand vous tentez de saisir le champs type tel.

Champ type email

Le champ type email est une zone de texte destinée à accueillir une adresse email. Le clavier proposé par le smartphone quand en tente de saisir ce champ est adapté aux adresses email en incluant le symbole @.

Champ type number

Le champ type number est une zone de texte adaptée aux nombres.

Champ type url

Le champ type url sert à éditer des URL (adresse Web). Il supporte tous les types d'URL (http://, https://, ftp://...)

Champ type date

Le champ type date sert à éditer les dates. Selon le navigateur, il peut être associé automatiquement à un calendrier qui facilite la sélection de la date.

Champ type range

Le champ type range affiche un curseur dont la valeur est comprise entre 0 et 100. Sa forme change d'un navigateur à un autre.

Champ type color

Le champ type color sert à avoir une zone de texte transformée pour accueillir le code de la couleur sélectionnée dans une palette générée automatiquement. Le code de la couleur est exprimée en hexadécimal.

Attribut required

L'attribut required est un attribut booléen. Il suffit donc de le déclarer au sein de la balise sans lui attribuer une valeur. L'attribut required rend le champ courant obligatoire et exige la saisie avant de soumettre le formulaire. Si le champ est laissé vide alors un message propre au navigateur utilisé est affiché et invite l'utilisateur à saisir le champ.

Bien que ce simple attribut semble pratique puisqu'il facilite le contrôle de saisie, il reste en fait faiblement efficace vu qu'un utilisateur mal intentionné peut bidouiller le code afin de désactiver cette vérification vu que ce contrôle est fait en HTML qui est un langage coté client. Par conséquent, pour prévoir un contrôle de saisie efficace il est préférable de faire appel à un langage de programmation coté serveur comme le langage PHP.

Exemple: