HTML & CSS - Le Guide du Débutant - Chapitre 9 - Concevoir des formulaires en HTML

Les bases du formulaire HTML

Plan de la formation

La balise <form> et ses attributs.
Le champ <input> et ses attributs.
La balise <label>.
La balise <textarea>.
Le bouton de soumission <button type="submit">.

La balise <form> et ses attributs

La paire de balises <form> est l'élément de base pour créer un formulaire en HTML. Elle peut contenir différents types de champs de saisie, des boutons, des zones de texte, etc. Les attributs les plus courants de la balise <form> sont :

method
action

L'attribut method

L'attribut method spécifie la méthode HTTP utilisée pour envoyer les données du formulaire. Les deux méthodes les plus courantes sont GET et POST. Le choix de la méthode dépend du type de données que vous souhaitez envoyer et de la manière dont vous souhaitez les traiter sur le serveur.

GET :
Les données du formulaire sont envoyées dans l'URL, ce qui les rend visibles et limitées en taille. C'est généralement utilisé pour les formulaires de recherche ou de filtrage.
POST :
Les données du formulaire sont envoyées dans le corps de la requête HTTP, ce qui les rend plus sécurisées et permet d'envoyer de grandes quantités de données. C'est généralement utilisé pour les formulaires d'inscription, de connexion, ou tout formulaire qui modifie des données sur le serveur.

<form method="post">
  ...
</form>

L'attribut action

L'attribut action spécifie l'URL vers laquelle les données du formulaire seront envoyées lors de la soumission. Cette URL peut être une page sur votre propre site ou une URL externe. Si l'attribut action est omis, les données du formulaire seront envoyées à la même URL que celle de la page actuelle.

Astuce :
Il est recommandé d'utiliser une URL sécurisée (HTTPS) pour l'attribut action afin de protéger les données sensibles envoyées par le formulaire.

La valeur de l'attribut action ne peut pas être un fichier HTML car le HTML n'est pas un langage de programmation. Pour traiter les données du formulaire, vous devez utiliser un langage côté serveur comme PHP, Python, ou Node.js, qui peut recevoir les données envoyées par le formulaire et effectuer des actions en conséquence (comme enregistrer les données dans une base de données, envoyer un email, etc.).

<form action="traitement.php">
  ...
</form>

Le champ <input> et ses attributs

La balise seule <input> est utilisée pour créer différents types de champs de saisie dans un formulaire. Les attributs les plus courants de la balise <input> sont :

type :
Spécifie le type de champ de saisie (texte, email, mot de passe, etc.).
id :
Fournit un identifiant unique pour le champ de saisie, utilisé pour lier le champ à une étiquette <label>.
name :
Spécifie le nom du champ de saisie, utilisé pour identifier les données lors de l'envoi du formulaire. Le nom peut être différent de l'id, mais il est souvent recommandé de les faire correspondre pour faciliter la gestion des données.
value :
Spécifie la valeur initiale du champ de saisie.
required :
Indique que le champ de saisie est obligatoire et doit être rempli avant de soumettre le formulaire.
placeholder :
Fournit un texte d'exemple à afficher lorsque le champ de saisie est vide.

<input type="text">

L'attribut type

L'attribut type spécifie le type de champ de saisie que vous souhaitez créer. Les types les plus courants sont :

text : champ de texte simple.
email : champ de saisie pour les adresses email, avec une validation intégrée.
password : champ de saisie pour les mots de passe, où les caractères saisis sont masqués.
number : champ de saisie pour les nombres, avec des flèches pour augmenter ou diminuer la valeur.
date : champ de saisie pour les dates, avec un sélecteur de date intégré.

La balise <label>

La paire de balises <label> est utilisée pour associer une étiquette à un champ de saisie dans un formulaire. Cela améliore l'accessibilité et la convivialité du formulaire. L'attribut le plus important de la balise <label> est for, qui doit correspondre à l'attribut id du champ de saisie associé.

Par exemple :

<label for="prenom">Votre prénom :</label>
<input type="text" id="prenom">

Dans cet exemple, le label "Votre prénom :" est associé au champ de saisie de texte grâce à l'attribut for="prenom", qui correspond à l'attribut id="prenom" du champ de saisie. Cela permet aux utilisateurs de cliquer sur le label pour sélectionner le champ de saisie, ce qui améliore l'expérience utilisateur.

La balise <textarea>

La paire de balises <textarea> est utilisée pour créer une zone de texte multilignes dans un formulaire. Contrairement à la balise <input>, qui est auto-fermante, la balise <textarea> nécessite une balise de fermeture et peut contenir du texte par défaut entre les balises d'ouverture et de fermeture. Les attributs les plus courants de la balise <textarea> sont :

id
name
rows : spécifie le nombre de lignes visibles dans la zone de texte.
cols : spécifie le nombre de colonnes visibles dans la zone de texte.
placeholder : fournit un texte d'exemple à afficher lorsque la zone de texte est vide.

Le bouton de soumission <input type="submit">

La balise <input type="submit"> est utilisée pour créer un bouton qui soumet le formulaire lorsqu'il est cliqué. Lorsque ce bouton est activé, les données du formulaire sont envoyées à l'URL spécifiée dans l'attribut action de la balise <form>, en utilisant la méthode spécifiée dans l'attribut method.
L'attribut value permet de définir le texte affiché sur le bouton. La valeur par défaut du bouton est "Submit", traduit dans la langue en cours du navigateur.

Par exemple :

<input type="submit" value="Valider ce formulaire">