HTML5 - Pour mieux présenter vos pages Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML5 - Pour mieux présenter vos pages Web Niveau recommandé pour le cours de HTML5 - Pour mieux présenter vos pages Web Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz disponible pour ce cours

Page 4: Nouveaux champs de formulaire

Toutes les pages

HTML5 - Pour mieux présenter vos pages Web

Nouveaux champs input

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.
<input type="tel" name="telephone" size="30" placeholder="Votre numéro de télélphone ici" />
L'attribut placeholder a été introduit par HTML5, il permet d'afficher un texte de remplacement dans le champs. Celui ci disparaît dès qu'on commence la saisie.

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 @.
<input type="email" name="email" size="30" placeholder="Votre adresse email ici" />

Champ type number

Le champ type number est une zone de texte adaptée aux nombres.
<input type="number" name="age" />

Champ type url

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

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.
<input type="date" name="date_de_naissance" />

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.
<input type="range" name="appreciation" />

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.
<input type="color" name="fond" />