DEVENIR-WEBMASTER.COM Log In
 31
close

Les champs de formulaires issus du HTML 4

Visiter ma chaine Youtube

# Introduction close

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

Ici 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.

# Le champ input de type text close

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. Exemple : un input de type text avec size et maxlength

.
Code html d'un input avec size et maxlength

value qui permet de mettre un contenu textuel par défaut. Exemple : un input de type text avec value

.
Code html d'un input avec value

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

placeholder HTML 5 permet de mettre un contenu textuel qui sera visible jusqu'à ce que l'utilisateur saisisse un caractère. Exemple : un input de type text avec placeholder.

Code html d'un formulaire avec placeholder

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. Exemple : un input de type text avec disabled.

Code html d'un formulaire avec disabled

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. Exemple : un input de type text avec readonly.

Code html d'un formulaire avec readonly

# Le champ textarea close

Le champ de type textarea permet la saisie de caractères inscriptibles 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.

maxlengthHTML 5 qui est un entier qui permet de spécifier le nombre maximum de caractères saisis. Exemple : un textarea avec maxlength.

Code d'un textarea avec maxlength

spellcheckHTML 5 qui est une chaîne qui permet d'activer ou désactiver le correcteur orthographique . Exemple : un textarea avec spellcheck.

Code d'un textarea avec spellcheck

Vous pouvez mettre un contenu initial dans votre textarea. Exemple : un textarea avec contenu initial.

Code d'un textarea avec contenu initial

# Le champ select close

Le champ select permet d'envoyer une valeur choisie parmi une liste. Exemple : un select simple

C'est l'élément html select qui sert de conteneur à la liste. 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 de l'entrée du tableau qui sera envoyé au php.

Un select

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. Exemple : un select avec value.

Un select en utilisant value

Vous pouvez présélectionner une option par défaut autre que la première. Pour cela mettez l'attribut selected dans l'option à présélectionner. Exemple : un select avec selected.

Un select en utilisant selected

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. Exemple : un select avec optgroup.

Un select en utilisant optgroup

Vous pouvez afficher plusieurs options au lieu d'une seule en utilisant l'attribut size de l'élément select. Exemple : un select avec size.

Un select en utilisant size

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é. Exemple : un select multiple.

Un select en utilisant multiple

# Le checkbox close

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

Sans autre précision le script de traitement reçoit une entrée dans un tableau [choix] => on si la case est cochée. Si la case n'est pas cochée il ne reçoit rien. Exemple : un checkbox.

Code HTML d'un checkbox

Vous pouvez demander à ce que la case soit cochée par défaut en écrivant checked. Exemple : un checkbox coché par défaut.

Code HTML d'un checkbox coché par défaut

Vous pouvez spécifier la valeur que vous voulez recevoir lorsque la case est cochée en utilisant l'attribut value. Exemple : un checkbox avec value.

Code HTML d'un checkbox avec attribut value

Vous pouvez sélectionner plusieurs options en mettant plusieurs checkbox pour fabriquer une zone de sélection multiple. Exemple : 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.

Code HTML d'une liste de checkbox pour choix multiple

# Le radio bouton close

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. Exemple : un radio bouton

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

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

La valeur de l'attibut name doit être la même sur tous les radio
Code HTML de trois radio boutons

# L'upload de fichier close

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. Exemple : un upload d'un fichier

Code HTML pour uploader un fichier

Vous pouvez avoir besoin de télécharger plusieurs fichiers (mais un nombre déterminé). Exemple : un upload d'un nombre déterminé de fichiers

Code HTML pour uploader deux fichiers

multiple HTML 5 est un attribut qui vous permet de télécharger un nombre indéterminé de fichier. Exemple : un upload d'un nombre indéterminé de fichiers

Code HTML pour uploader un nombre indéterminé de fichiers

# Le champ caché de type hidden close

Lorsqu'une page web reçoit des informations lors de son chargement, il arrive que ces 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 fonction un peu comme un champ de type='text' sauf que l'internaute ne le voit pas. Exemple : un champ caché.

Code HTML pour stocker des informations cachées

# Le champ de type bouton close

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.

Exemple : un bouton qui pourrait déclencher un calcul.

Code HTML d'un formulaire avec un bouton