Les formulaires

Usages

Les formulaires servent à transmettre des données entre l'utilisateur et le serveur aux travers de différents types de champs. Les formulaires peuvent être utiliser pour :

• contact
• recherche
• panier d'achat
• inscription
• connexion
• etc.

Les balises

Form

Cette balise contiendra nos champs. Pour fonctionner, nous devons lui passers les attributs action & method.

Action

Cet attribut indique l'url du fichier qui traitera les informations fournies dans le formulaire.

Method

Method détermine la finalité des données envoyées. Nous allons voir 2 valeurs :

• GET : sert à récupérer des données.
  Ex: Champ de recherche
• POST : sert à envoyer des données.
  Ex: Formulaire d'inscription

Champ

Un champ est composé de 2 éléments: input et label.

Label

Le label permet de donner un titre à notre champ. Cela booste l'accessiblité et l'expérience utilisateur. L'attribut for permet lié la balise au champ via une id.

Titre

Input

La balise input permet de créer des champs. Plusieurs attributs doivent être définis :

• type: Change le type du champ.
• name: Nomme l'information de ce champ.
• id: Permet l'association avec une balise label
• required (optionnel): rend le champ obligatoire

Input [ type='text' ]

Le type de champ le plus répandu, il permet d'insérer une ligne de texte d'une longueur indéfinie. Cela ne permet de faire de retour à la ligne, ce champ est plutôt dédié à des données courtes.

Input [ type='email' ]

Ce champ permet d'insérer un email. Il permet de faire une pré-validation en vérifiant si les informations contiennent bien un @ et une extention, comme un .com.

Input [ type='password' ]

Ce champ est dédié pour les mots de passe. Il remplace les caractères par un point  •  ou une astérisque  * .

Input [ type='number' ]

Ce champ est dédié aux nombres, il vient avec la possibilité d'incrémenter/décrémenter la valeur ainsi que d'invalider les valeurs non-numériques. On peut aussi lui fournir les attributs min et max pour contenir la valeur.

Input [ type='range' ]

Similaire au champ number, le type range se focalise sur une valeur numérique entre 2 valeurs. En plus de min et max, on peut lui passer l'attribut step qui indique un palier d'incrémentation/décrémentation.

Input [ type='checkbox' ]

Affiche une boite à cocher. Cela permet de . L'attribut name doit être le même qu'une autre checkbox pour être considérer comme un ensemble de choix, et ajouter l'attribut value pour lui donner une valeur.

Input [ type='radio' ]

Similaire au champ checkbox à la différence que l'utilisateur ne peut sélectionner qu'une seule des valeurs proposées.

Input [ type='file' ]

Permet de téléverser un fichier. L'attribut accept défini le type de fichier accepté, par défaut il n'y a pas de restriction.

Input [ type='submit' ]

Ce champ prend la forme d'un bouton, qui permet de soumettre le formulaire s'il est valide. L'attribut value est utilisé pour changer son texte.

Autres types

D'autres types existent mais reste moins utilisés ou manquent de comptatibilité avec les navigateurs.

Textarea

Dédié aux longs textes. Il permet de faire des retours à la ligne et ses dimensions sont par défaut modifiable par l'utilisateur.

Contenu par défaut

Select

Un champ qui crée une boite de sélection avec plusieurs valeurs possibles. Il se compose de la balise select qui contient au moins une balise option.

Option

Ajoute une valeur pour la balise select. Un attribut value doit être défini ainsi qu'un contenu textuel pour que ce champ soit valide et opérationnel. Un attribut selected sans valeur peut être ajouter pour pré-sélectionner une option.

  Belgique
  …

Optgroup

Structure les balises option avec des titres via l'attribut label.

  
    Belgique
    France
  
  …

Balise de structure

Fieldset
& legend

Permet de regrouper des champs entre eux, ce qui permet de les identifier plus facilement. La balise legend permet d'y ajouter un titre.

  
Votre profil
  …

Reproduction

Sur base de l'image suivante, reproduire en html le formulaire présenté. Le but est d'être le plus précis possible dans la construction de vos champs.

Sur base de l'exercice du cours précédent

Pour vos 3 films, jeux ou séries préférés, ajouter une page contact.html contenant :

• un titre principal
• un formulaire
• un champ prénom et champ nom
• un champ adresse mail
• une zone de texte
• 3 choix de type de radio qui demande de choisir parmis vos 3 médias présentés
• un bouton Envoyer
• Valider votre code via le W3C validator