open

Les champs de formulaires issus du HTML 4

#1 Introduction open

Les champs de formulaires étant très nombreux je les ai divisé 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. placeholder HTML 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.

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

    Tester le code
  2. spellcheckHTML 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 fichier. 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