≡

Les champs de formulaires issus du HTML 4

#1 Introduction

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

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

Parmi les attributs les plus courants, on trouve :

size qui est un entier qui permet de régler la taille du champ en nombre de caractères.
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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form method='GET' action='traiter-formulaire.php'> <label for='identifiant'>Votre identifiant</label> <input type='text' size=10 maxlength=15 id='identifiant' name='identifiant'> <input type='submit' value='Traiter'> </form> </body> </html> Tester le code
value qui permet de mettre un contenu textuel par défaut. Ci-dessous un exemple avec un input de type text avec value.
<label for='identifiant'>Votre identifiant</label> <input type='text' id='identifiant' name='identifiant' value='Web_Nice_06'> Tester le code

#3 PlaceHolder / Disabled / Readonly

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

placeholder 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.
<label for='identifiant'>Votre identifiant</label> <input type='text' size=50 id='identifiant' name='identifiant' placeholder='10 caractères max. Lettres ou Chiffres ou Underscore'> Tester le code
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.
<label for='identifiant'>Votre identifiant</label> <input type='text' size=25 maxlength=30 id='identifiant' name='identifiant' value='Web_Nice_06' disabled> Tester le code
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.
<label for='identifiant'>Votre identifiant</label> <input type='text' size=25 id='identifiant' name='identifiant' value='Web_Nice_06' readonly> Tester le code

#4 Le champ textarea

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

Parmi les attributs les plus courants, on trouve :

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 qui est un entier qui permet de spécifier le nombre maximum de caractères saisis.
<label for='comment'>Votre commentaire</label> <textarea row=5 cols=20 maxlength=10 name='comment' ></textarea> Tester le code
spellcheck 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.
<label for='comment'>spellcheck='false'<br> <textarea row=5 cols=20 spellcheck='false' name='text1'></textarea> </label> <label for='comment'>spellcheck à sa valeur par défaut soit true<br> <textarea row=5 cols=20 name='text2'></textarea> </label> Tester le code
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.
<label for='comment'>Votre commentaire</label><br> <textarea row=5 cols=20 spellcheck='false'> Un contenu initial </textarea> Tester le code

#5 Le champ select

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.

L'attribut name de l'élément select spécifie le nom du tableau qui sera envoyé au PHP.
<select name='match'> <option>RC-TOULON vs SARACENS</option> <option>LEINSTER vs MUNSTER</option> <option>RACING92 vs ASM</option> <option>PAU vs AGEN</option> </select> Tester le code
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.
<select name='match'> <option value='1'>RC-TOULON vs SARACENS</option> <option value='2'>LEINSTER vs MUNSTER</option> <option value='3'>RACING92 vs ASM</option> <option value='4'>PAU vs AGEN</option> </select> Tester le code
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.
<select name='match'> <option>RC-TOULON vs SARACENS</option> <option selected>LEINSTER vs MUNSTER</option> <option>RACING92 vs ASM</option> <option>PAU vs AGEN</option> </select> Tester le code
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.
<select name='match'> <optgroup label="Coupe d'Europe"> <option>RC-TOULON vs SARACENS</option> <option>LEINSTER vs MUNSTER</option> </optgroup> <optgroup label="TOP 14"> <option>RACING92 vs ASM</option> <option>PAU vs AGEN</option> </optgroup> </select> Tester le code
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.
<select size=2 name='match'> <option value='1'>RC-TOULON vs SARACENS</option> <option value='2'>LEINSTER vs MUNSTER</option> <option value='3'>RACING92 vs ASM</option> <option value='4'>PAU vs AGEN</option> </select> Tester le code
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.
<select name='match[]' multiple> <option value='1'>RC-TOULON vs SARACENS</option> <option value='2'>LEINSTER vs MUNSTER</option> <option value='3'>RACING92 vs ASM</option> <option value='4'>PAU vs AGEN</option> </select> Tester le code

#6 Le checkbox

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

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.
<label for='choix'>Cocher l'option </label> <input id='choix' name='choix' type='checkbox'> Tester le code
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.
<label for='choix'>Cocher l'option </label> <input id='choix' name='choix' type='checkbox' checked> Tester le code
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.
<label for='choix'>Cocher l'option </label> <input id='choix' name='choix' type='checkbox' value='1'> Tester le code
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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> label { display:block ; padding : 1em ; cursor:pointer;} </style> </head> <body> <form method='GET' action='traiter-formulaire.php'> <label for='choix-1'>Cocher l'option 1 <input id='choix-1' name='choix[]' type='checkbox' value='1'> </label> <label for='choix-2'>Cocher l'option 2 <input id='choix-2' name='choix[]' type='checkbox' value='2'> </label> <label for='choix-3'>Cocher l'option 3 <input id='choix-3' name='choix[]' type='checkbox' value='3'> </label> <input type='submit' value='Traiter'> </form> </body> </html> Tester le code

#7 Le radio bouton

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

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.

Vous pouvez avoir besoin de télécharger un seul fichier. Ci-dessous l'exemple d'un upload d'un fichier.
<input name='userfile' type='file'> Tester le code
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.
<label for='fichier'>Choisissez deux fichiers </label> <input name='userfile[]' type='file'> <input name='userfile[]' type='file'> Tester le code
multiple 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.
<label for='fichier'>Choisissez les fichiers (appuyer sur CTRL)</label> <input name='userfile[]' type='file' multiple> Tester le code

#9 Le champ caché de type hidden

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

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