Cours HTML

Les formulaires - balises de texte

Zones de saisie

Zone de texte sur une ligne

La balise input est la balise essentielle des formulaires, car elle permet de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante :

 <form><input type="text" size="20" name="T1" ></form>

• L'attribut size permet de régler la longueur de la zone de saisie.
• L'attribut maxlength règle le nombre maximum de caractères saisis
• L'attribut minlenght règle le nombre minimal de caractères saisis
• L'attribut value préremplit le champ avec un texte choisi
• L'attribut placeholder prérempli le champ avec un texte grisé qui dosparaît lorsque l'on clique dans la zone.

Zone de mot de passe

En employant lla valeur password de l'attribut type , on créé un champ de saisie, dans lequel les caractères écrits apparaissent sous forme d'astérisques afin de camoufler la saisie de l'utilisateur

 <form> <label for="pseudo">Votre mot de passe :</label><input type="password" name="mot de passe" id="pseudo"></form>

Zone de texte sur plusieurs lignes

La balise <textaera> permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise <input/>. Cette balise possède les attributs suivants :

• cols : permet de régler le nombre de caractères que peut contenir une ligne
• rows : permet de régler le nombre de lignes
• name : c'est le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur
• readonly="readonly" : empêche l'utilisateur de modifier le texte entré par défaut dans le champ (exemple : les chartes utilisateur)
• value : c'est la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur

Voici la manière dont elle se rédige :

 <form><textarea name="S1" rows="2" cols="10"></textarea></form>

La largeurs et la hauteur de la zone se règlent également avec les feuilles de style en employant les propriétés height et width.

Zones de saisie enrichies

Le passage du langage HTML à la version HTML5 amène des amélioration notamment dans les zones de saisie. Il existe de nouvelles valeur à l'attribut type du bouton input.

Envoyer un mail

Les navigateurs modernes sauront adapter l'affichage, en affichant une zone d'erreur si l'email est mal rédigé et, pour les smartphones, qui proposeront un clavier adapté. Voici la manière de rédiger :

 <form><input type="email" name="Mail" ></form>

Et le résultat :

Écrire une URL

C'est le même principe pour pour l'email; les navigateurs modernes sauront détecter une erreur de redaction et, les smartphones proposeront un clavier adapté. Voici la manière de rédiger :

 <form><input type="url" name="adresse" ></form>

Et le résultat :

Écrire un numéro de téléphone

Ce champ est employé pour les numéros de téléphone ; Sur les iPhones, une clavier numérique apparaîtra pour la saisie. Voici la manière de rédiger :

 <form><input type="tel" name="phone"></form>

Et le résultat :

Écrire un nombre

Voici la manière de rédiger :

 <form><input type="number" name="nombre"></form>

Et le résultat :

Les attributs suivants peuvent être employés :

• min : valeur minimale autorisée.
• max : valeur maximale autorisée.
• step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).

Rédiger une couleur

L'emploi de cette valeur permettra l'apparition d'un cercle de couleur avec une flèche aidant à choisir une couleur. Voici la manière de rédiger :

 <form><input type="color" name="couleur"></form>

Et le résultat :

É une date

Cette valeur n'est pas reconnue par tous les navigateurs. Voici la manière de rédiger :

 <form><input type="date" name="date"></form>

Et le résultat :

Des attributs

L'attribut required

L'attribut s'ajoute dans une balise lorsque ce champest obligatoire

 <form><input type="text" name="nom" required></form>

Et le résultat :

Pour obtenir le trait rouge, il faut ajouter du style :

:required {border: 1px solid red;}

L'attribut placeholder

L'attribut s'ajoute pour donner des indications à l'intérieur de certains champs : il permet de placer un texte en grisé qui s'efface lorsque l'on remplit le champ.

 <form><input type="text" name="nom" placeholder="entrez un texte"></form>

Et le résultat :

Pour en savoir plus, suivre le lien sur Open ClassRooms