Formulaires HTML - Concepts et balises essentiels

Les formulaires HTML sont des éléments fondamentaux pour rendre un site web interactif. Ils permettent de collecter des informations auprès des utilisateurs, ce qui est indispensable pour de nombreuses applications web, comme les inscriptions, les connexions, les enquêtes, ou encore les commandes en ligne. Cette fiche présente les concepts clés et les balises essentielles pour créer et gérer des formulaires en HTML.

Introduction aux formulaires

Un formulaire HTML est un conteneur qui regroupe différents champs de saisie destinés à recueillir des données. Ces données sont ensuite envoyées à un serveur pour traitement via un langage côté serveur (PHP, Python, etc.). Les formulaires sont donc un pont entre l'utilisateur et le serveur, permettant d'interagir avec le site.

Ils peuvent aussi être « décorés » avec du CSS pour améliorer leur apparence et leur ergonomie, mais la structure de base repose sur des balises spécifiques.

La balise <form>

La balise <form> est l’élément racine d’un formulaire. Elle définit la zone dans laquelle les champs de saisie sont regroupés.

Attributs importants de <form> :

• action : spécifie l’URL du script serveur qui traitera les données du formulaire.
• method : définit la méthode d’envoi des données, généralement GET ou POST.
• enctype : indique le type d’encodage des données (utile pour l’envoi de fichiers).

Exemple :

<form action="traitement.php" method="POST">
  <!-- Champs du formulaire -->
</form>

La balise <label>

La balise <label> est utilisée pour associer un texte descriptif à un champ de formulaire. Elle améliore l’accessibilité et facilite la sélection du champ par l’utilisateur.

Utilisation :

• L’attribut for de <label> doit correspondre à l’attribut id du champ associé.
• Cliquer sur le texte du label active le champ correspondant.

Exemple :

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">

Les balises <input>

La balise <input> est la plus polyvalente pour créer différents types de champs de saisie. Son comportement dépend de l’attribut type.

Types courants d’<input> :

• text : champ de saisie texte simple.
• password : champ de saisie masquée pour mots de passe.
• hidden : champ caché, non visible par l’utilisateur, utilisé pour transmettre des données invisibles.
• checkbox : case à cocher, permet une sélection multiple.
• radio : bouton radio, permet une sélection unique dans un groupe.
• submit : bouton pour envoyer le formulaire.
• reset : bouton pour réinitialiser les champs du formulaire.

Exemple d’un champ texte :

<input type="text" name="prenom" id="prenom">

Le champ <textarea>

Le champ <textarea> permet de saisir un texte sur plusieurs lignes, contrairement à <input type="text"> qui est limité à une seule ligne.

Attributs importants :

• rows : nombre de lignes visibles.
• cols : nombre de colonnes visibles.

Exemple :

<textarea name="message" rows="5" cols="30"></textarea>

Les balises <select> et <option>

Ces balises créent une liste déroulante permettant à l’utilisateur de choisir une option parmi plusieurs.

• <select> définit la liste.
• <option> définit chaque élément de la liste.

Exemple :

<select name="pays">
  <option value="fr">France</option>
  <option value="us">États-Unis</option>
  <option value="es">Espagne</option>
</select>

Boutons dans les formulaires

Bouton "submit"

Le bouton de type submit permet d’envoyer les données du formulaire au serveur.

<input type="submit" value="Envoyer">

Bouton "reset"

Le bouton de type reset réinitialise tous les champs du formulaire à leur valeur initiale.

<input type="reset" value="Annuler">

Balise <button>

La balise <button> est plus flexible que <input> car elle peut contenir du texte ou des éléments HTML.

Exemple :

<button type="submit">Envoyer</button>

Regroupement des champs : <fieldset> et <legend>

Pour organiser visuellement et logiquement les champs d’un formulaire, on utilise la balise <fieldset>. Elle crée un cadre autour d’un groupe de champs.

La balise <legend> permet de donner un titre à ce groupe.

Exemple :

<fieldset>
  <legend>Informations personnelles</legend>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom">
</fieldset>

Résumé des interactions dans un formulaire HTML

[Diagramme]

Conclusion

Les formulaires HTML sont essentiels pour interagir avec les utilisateurs et collecter des données. La maîtrise des balises <form>, <label>, <input>, <textarea>, <select>, ainsi que des boutons et des regroupements avec <fieldset> et <legend>, permet de construire des formulaires efficaces et accessibles. Ces éléments, combinés à un traitement côté serveur, rendent les sites web dynamiques et interactifs.

"La saisie de formulaire est la base de l’interaction utilisateur sur le web" @doc04_HTML_formulaires_diapos.pdf