Les champs de formulaires issus du HTML 4

#1 Introduction open

Les champs de formulaires étant très nombreux, je les ai divisés en deux catégories.

Dans ce tutoriel, vous trouvez la catégorie des champs qui existaient déjà en HTML 4. Non seulement ils existent encore en HTML 5, mais de nouveaux attributs ont été ajoutés. Ils sont signalés par un HTML 5. Un clic sur cette icône vous permettra de consulter les informations relatives à cet attribut sur le site www.caniuse.com.

Vous trouverez des informations générales sur les formulaires dans le tutoriel précédent Les bases des formulaires.

La suite de ce tutoriel dans le tutoriel suivant Les champs de formulaires issus du HTML 5.

#2 Le champ input de type text open

Le champ de type text permet la saisie de caractères inscriptibles sur une seule ligne.

Parmi les attributs les plus courants, on trouve :

  1. size qui est un entier qui permet de régler la taille du champ en nombre de caractères.

  2. maxlength qui est un entier qui permet de limiter le nombre de caractères saisis. Ci-dessous un exemple avec un input de type text avec size et maxlength.

    Tester le code

  3. value qui permet de mettre un contenu textuel par défaut. Ci-dessous un exemple avec un input de type text avec value.

    Tester le code

#3 PlaceHolder / Disabled / Readonly open

Les attributs suivants sont courants et utilisables sur d'autres champs de formulaire. On va les voir ici.

  1. placeholderHTML 5 permet de mettre un contenu textuel qui sera visible jusqu'à ce que l'utilisateur saisisse un caractère. Ci-dessous, un exemple de champ input de type text avec placeholder.

    Tester le code

  2. disabled désactive le champ. A ce moment-là, le champ est grisé, ne reçoit plus le focus, et ne sera pas passé au script de traitement. Ci-dessous, l'exemple d'un input de type text avec disabled.

    Tester le code

  3. readonly place le champ en lecture seule, mais contrairement au disabled le champ n'est pas grisé, reçoit le focus et sera passé au script de traitement. Ci-dessous l'exemple d'un input de type text avec readonly.

    Tester le code

#4 Le champ textarea open

Le champ de type textarea permet la saisie de caractères sur plusieurs lignes.

Parmi les attributs les plus courants, on trouve :

  1. row qui est un entier qui permet de spécifier le nombre de lignes.

    cols qui est un entier qui permet de spécifier le nombre de colonnes.

    maxlength HTML 5 qui est un entier qui permet de spécifier le nombre maximum de caractères saisis.

    Tester le code

  2. spellcheck HTML 5 qui est une chaîne qui permet d'activer ou désactiver le correcteur orthographique dans la langue du document. Ci-dessous, l'exemple d'un textarea avec l'attribut spellcheck.

    Tester le code

  3. Vous pouvez mettre un contenu initial dans votre textarea. Il faut placer ce contenu textuel entre les balises de l'élément textarea. Ci-dessous, un exemple d'un textarea avec un contenu initial.

    Tester le code

#5 Le champ select open

Le champ select permet d'envoyer une valeur choisie parmi une liste. Ci-dessous un exemple avec un select simple.

C'est l'élément html select qui sert de conteneur à la liste. Toutefois, l'élément select est un élément de type inline. Chaque alternative de la liste est encapsulée dans l'élément option.

  1. L'attribut name de l'élément select spécifie le nom du tableau qui sera envoyé au PHP.

    Tester le code

  2. Vous pouvez utiliser un attribut value sur l'élément option si vous voulez envoyer autre chose que ce qui est contenu entre les balises option. Ci-dessous, l'exemple d'un select avec value. Par exemple ci-dessous, si vous choisissez RC-TOULON vs SARACENS, ce sera la chaîne de caractères '1' qui sera envoyée.

    Tester le code

  3. Vous pouvez présélectionner une option par défaut autre que la première. Cette option sera présélectionnée au chargement de la page. Pour cela, mettez l'attribut selected dans l'option à présélectionner. Ci-dessous, l'exemple d'un select avec selected.

    Tester le code

  4. Vous pouvez grouper les options en utilisant l'élément optgroup. L'attribut label donnera un nom à ce regroupement. Ce label restera toujours côté client et ne sera pas passé au serveur. Ci-dessous, l'exemple d'un select avec optgroup.

    Tester le code

  5. Vous pouvez afficher plusieurs options au lieu d'une seule en utilisant l'attribut size de l'élément select. Ci-dessous, l'exemple d'un select avec size.

    Tester le code

  6. Vous pouvez demander à pouvoir sélectionner plusieurs options. Attention, il faut mettre deux crochets à droite de la variable match[] pour indiquer que c'est un tableau d'options qui va être passé. Ci-dessous, l'exemple d'un select multiple.

    Tester le code

#6 Le checkbox open

Pour fabriquer un checkbox, il faut utiliser l'élément input avec l'attribut type à la valeur checkbox.

  1. Si le checkbox est coché sans autre précision, le script de traitement reçoit une entrée dans un tableau [choix] => on. Si le checkbox n'est pas coché, le script de traitement ne reçoit rien. Ci-dessous, l'exemple d'un checkbox.

    Tester le code

  2. Vous pouvez demander, à ce que le checkbox soit coché par défaut, au chargement de la page en écrivant checked. Ci-dessous, l'exemple d'un checkbox coché par défaut.

    Tester le code

  3. Vous pouvez spécifier la valeur que vous voulez recevoir lorsque le checkbox est coché en utilisant l'attribut value. Ci-dessous, l'exemple d'un checkbox avec value.

    Tester le code

  4. Vous pouvez sélectionner plusieurs options, en mettant plusieurs checkbox, pour fabriquer une zone de sélection multiple. Ci-dessous, l'exemple d'un checkbox avec choix multiple.

    Notez bien tout l'intérêt du label. Ici la zone de clic a été facilement agrandie, ce qui est capital sur un écran de smartphone.

    Notez bien également le name=choix[] dans chaque input qui permet de passer un tableau au script de traitement.

    Tester le code

#7 Le radio bouton open

Pour fabriquer un radio bouton, il faut utiliser l'élément input avec l'attribut type à la valeur radio. Etant donné qu'il s'agit de choisir entre plusieurs valeurs, vous aurez au minimum deux champs. Ci-dessous, un exemple d'un radio bouton.

Attention, au point ci-dessous, au moment de la création d'un radio. On fait souvent cette erreur.

Tous les attributs name de chaque radio doivent avoir la même valeur.

La valeur de l'attribut name doit être la même sur tous les radio
Tester le code

#8 L'upload de fichier open

Pour uploader des fichiers, il faut mettre en place un formulaire complet côté client, avec en autre, la manière d'encrypter les données. Un certain travail est aussi nécessaire côté serveur. Ci-dessous, je vous montre simplement les différentes façons de choisir un ou plusieurs fichiers.

Pour fabriquer un champ qui permette d'uploader un fichier, il faut utiliser l'élément input avec l'attribut file.

  1. Vous pouvez avoir besoin de télécharger un seul fichier. Ci-dessous l'exemple d'un upload d'un fichier.

    Tester le code

  2. Vous pouvez avoir besoin de télécharger plusieurs fichiers (mais un nombre déterminé). Ci-dessous l'exemple d'un upload d'un nombre déterminé de fichiers. Notez la différence entre le userfile de l'exemple précédent et le userfile[] de cet exemple.

    Tester le code

  3. multiple HTML 5 est un attribut qui vous permet de télécharger un nombre indéterminé de fichiers. Ci-dessous l'exemple d'un upload d'un nombre indéterminé de fichiers.

    Tester le code

#9 Le champ caché de type hidden open

Lorsqu'une page web reçoit des informations lors de son chargement, il arrive que certaines informations aient besoin d'être mémorisées dans un formulaire pour être repassées à la page suivante. C'est même très fréquent.

Vous avez la possibilité de stocker ces informations dans ce que l'on appelle un champ caché.

On fabrique un champ de ce type en utilisant un élément input de type='hidden'. Ce champ fonctionne un peu comme un champ de type='text' sauf que l'internaute ne le voit pas. Ci-dessous un exemple avec un champ caché.

Tester le code

#10 Le champ de type bouton open

Avant de demander le traitement du formulaire, il arrive que l'on ait besoin de déclencher une action. Pour ça vous avez besoin d'un bouton.

Ce bouton se fait avec un élément input dans lequel la valeur de l'attribut type est fixée à button.

Ce bouton aura le même aspect qu'un bouton de soumission, mais déclenchera une action qui sera programmée en JavaScript.

Ci-dessous un exemple avec un bouton qui pourrait déclencher un calcul.

Tester le code

Politique de confidentialité

Mentions Légales