HTML - Formulaires

Éléments de formulaire

<form action="/submit-form" method="POST">
  <!-- Les contrôles de formulaire vont ici -->
</form>

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

  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea><br>

  <label for="country">Pays :</label>
  <select id="country" name="country">
    <option value="usa">États-Unis</option>
    <option value="canada">Canada</option>
    <option value="uk">Royaume-Uni</option>
  </select><br>

  <button type="submit">Soumettre</button>
</form>

Types d'entrée de formulaire

HTML propose plusieurs types d'entrée qui déterminent le comportement et l'apparence des contrôles de formulaire. Chaque type d'entrée sert un but spécifique et fournit une interface utilisateur différente. Voici quelques types d'entrée de formulaire couramment utilisés :

1. Entrée de texte (type="text") : L'entrée de texte est le contrôle de formulaire le plus basique. Elle permet aux utilisateurs de saisir une seule ligne de texte. Elle est créée en utilisant l'élément <input> avec l'attribut type défini sur "text".

2. Entrée de mot de passe (type="password") : L'entrée de mot de passe est similaire à l'entrée de texte, mais elle masque les caractères saisis par l'utilisateur, les remplaçant par des points ou des astérisques. C'est utile pour les informations sensibles comme les mots de passe. Elle est créée en utilisant l'élément <input> avec l'attribut type défini sur "password".

3. Boutons radio (type="radio") : Les boutons radio permettent aux utilisateurs de sélectionner une seule option parmi un groupe d'options mutuellement exclusives. Ils sont créés en utilisant l'élément <input> avec l'attribut type défini sur "radio". Plusieurs boutons radio avec le même attribut name forment un groupe radio.

4. Cases à cocher (type="checkbox") : Les cases à cocher permettent aux utilisateurs de sélectionner plusieurs options parmi un groupe d'options. Elles sont créées en utilisant l'élément <input> avec l'attribut type défini sur "checkbox". Chaque case à cocher fonctionne indépendamment des autres.

5. Téléchargement de fichier (type="file") : L'entrée de téléchargement de fichier permet aux utilisateurs de sélectionner et de télécharger des fichiers depuis leur machine locale. Elle est créée en utilisant l'élément <input> avec l'attribut type défini sur "file".

6. Champs cachés (type="hidden") : Les champs cachés ne sont pas visibles pour les utilisateurs mais contiennent des données qui doivent être soumises avec le formulaire. Ils sont créés en utilisant l'élément <input> avec l'attribut type défini sur "hidden". Les champs cachés sont souvent utilisés pour transmettre des informations supplémentaires ou des métadonnées au serveur.

7. Boutons de soumission et de réinitialisation (type="submit" et type="reset") : Les boutons de soumission et de réinitialisation sont utilisés pour contrôler la soumission du formulaire. Le bouton de soumission envoie les données du formulaire au serveur pour traitement, tandis que le bouton de réinitialisation efface tous les champs du formulaire et les réinitialise à leurs valeurs par défaut. Ils sont créés en utilisant l'élément <input> avec l'attribut type défini sur "submit" ou "reset", respectivement.

Ce ne sont que quelques exemples des types d'entrée disponibles dans les formulaires HTML. Chaque type d'entrée offre une manière spécifique aux utilisateurs d'interagir avec le formulaire et de saisir des données.

Attributs de formulaire

Les éléments de formulaire HTML possèdent des attributs qui permettent de contrôler leur comportement et d'apporter des fonctionnalités. Ces attributs aident à identifier les champs du formulaire, à définir des valeurs par défaut, à fournir des indices aux utilisateurs et à appliquer une validation. Examinons quelques attributs de formulaire couramment utilisés :

1. L'attribut name :

   L'attribut name attribue un identifiant unique à un contrôle de formulaire. Il est important pour le traitement côté serveur des données du formulaire. Lorsqu'un formulaire est soumis, les données sont envoyées sous forme de paires clé-valeur, où l'attribut name sert de clé. Il est également utilisé pour référencer les contrôles de formulaire en JavaScript.

2. L'attribut value :

   L'attribut value spécifie la valeur initiale ou par défaut d'un contrôle de formulaire. Pour les champs de texte et les zones de texte, il définit le texte par défaut qui apparaît dans le champ. Pour les boutons radio et les cases à cocher, il définit la valeur envoyée au serveur lorsque le contrôle est sélectionné. Pour les boutons de soumission, il définit le texte qui apparaît sur le bouton.

3. L'attribut placeholder :

   L'attribut placeholder fournit un indice ou un exemple de texte affiché à l'intérieur d'un contrôle de formulaire lorsqu'il est vide. Il aide les utilisateurs à comprendre quel type de saisie est attendu dans le champ. Le texte de l'indicateur disparaît lorsque l'utilisateur commence à taper ou lorsque le champ reçoit le focus.

4. L'attribut required :

   L'attribut required est un attribut booléen qui spécifie si un contrôle de formulaire doit être rempli avant que le formulaire puisse être soumis. Si un champ obligatoire est laissé vide, le formulaire ne sera pas soumis et l'utilisateur sera invité à remplir les informations manquantes. Cet attribut aide à la validation du formulaire côté client.

5. Les attributs disabled et readonly :

   L'attribut disabled est utilisé pour désactiver un contrôle de formulaire, le rendant non modifiable et non cliquable. Les contrôles de formulaire désactivés ne sont pas soumis avec les données du formulaire. L'attribut readonly, quant à lui, rend un contrôle de formulaire en lecture seule, empêchant les utilisateurs de modifier sa valeur mais permettant toujours de le soumettre avec le formulaire.

Ces attributs offrent un contrôle et une fonctionnalité supplémentaires aux éléments de formulaire HTML, vous permettant de créer des formulaires plus interactifs et conviviaux. En utilisant ces attributs, vous pouvez guider les utilisateurs, définir des valeurs par défaut, effectuer une validation de base du formulaire et contrôler le comportement des contrôles de formulaire.

Validation de formulaire

La validation de formulaire améliore l'intégrité des données et l'expérience utilisateur. HTML fournit des attributs et des mécanismes pour la validation côté client des formulaires avant leur envoi au serveur.

La validation côté client utilise les attributs HTML et JavaScript. Elle permet un retour instantané à l'utilisateur sur sa saisie et aide à empêcher l'envoi de données invalides au serveur.

L'attribut pattern est couramment utilisé pour la validation de formulaire. Il vous permet de spécifier un modèle d'expression régulière auquel la valeur saisie doit correspondre. Si la valeur saisie ne correspond pas au modèle, le formulaire ne sera pas envoyé.

<input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>

L'attribut pattern dans l'exemple valide un champ de saisie d'e-mail. Le modèle d'expression régulière spécifie que la saisie doit contenir des caractères, des chiffres et des symboles spécifiques, suivis d'un symbole "@", d'un nom de domaine et d'un domaine de premier niveau.

Pour valider les champs de saisie numérique, HTML fournit les attributs min, max et step. Les attributs min et max définissent les valeurs minimale et maximale autorisées pour la saisie, tandis que l'attribut step spécifie les intervalles numériques légaux.

<input type="number" name="quantity" min="1" max="10" step="1" required>

L'attribut min fixe la valeur minimale autorisée à 1, l'attribut max fixe la valeur maximale autorisée à 10, et l'attribut step spécifie que la valeur doit s'incrémenter de 1.

Pour les champs de saisie de texte, l'attribut maxlength limite le nombre maximal de caractères pouvant être saisis. Cela restreint la saisie à une longueur spécifique.

<input type="text" name="username" maxlength="20" required>

L'attribut maxlength limite la saisie à un maximum de 20 caractères.

Dans certains cas, vous pouvez vouloir désactiver la validation de formulaire. L'attribut novalidate peut être ajouté à la balise <form> pour indiquer que le formulaire ne doit pas être validé lors de la soumission.

<form action="/submit" method="post" novalidate>
  <!-- Contrôles de formulaire -->
</form>

L'attribut novalidate soumettra le formulaire sans validation côté client, et toute validation devra être gérée côté serveur.

Bien que la validation côté client améliore l'expérience utilisateur et réduise les requêtes inutiles au serveur, elle ne devrait pas être utilisée seule. La validation côté serveur doit toujours être mise en place pour garantir l'intégrité et la sécurité des données, car la validation côté client peut être contournée par les utilisateurs.

Stylisation des formulaires

Vous pouvez styliser les formulaires HTML en utilisant CSS pour améliorer leur apparence et les rendre plus faciles à utiliser. CSS dispose de sélecteurs et de propriétés qui vous permettent de cibler et de styliser les éléments de formulaire. Voici quelques façons de styliser les formulaires.

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px #4CAF50;
}

input:valid {
  border-color: #4CAF50;
}

input:invalid {
  border-color: #ff0000;
}

input[type="text"],
textarea {
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

select {
  appearance: none;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-image: url("arrow-down.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

Soumission de formulaire

La soumission de formulaire est le processus d'envoi des données d'un formulaire du côté client (navigateur web) au côté serveur pour traitement. Lorsque vous remplissez un formulaire et cliquez sur le bouton de soumission, les données du formulaire sont collectées et envoyées au serveur en utilisant une méthode et un type d'encodage spécifiés.

Lors de la soumission d'un formulaire, le navigateur envoie une requête HTTP au serveur avec les données du formulaire incluses dans le corps de la requête ou les paramètres d'URL, selon l'attribut method du formulaire. Le serveur reçoit la requête, traite les données du formulaire, et répond généralement avec une nouvelle page ou envoie des données au client.

Il existe deux méthodes courantes pour envoyer des données de formulaire :

Lorsque les données du formulaire sont envoyées au serveur, elles sont encodées selon un format spécifique. Les deux types d'encodage courants sont :

1. application/x-www-form-urlencoded :

   • C'est le type d'encodage par défaut pour la soumission de formulaire.
   • Les données du formulaire sont encodées sous forme de paires clé-valeur séparées par des esperluettes (&).
   • Les caractères spéciaux sont encodés en URL, les remplaçant par leur code ASCII précédé d'un signe de pourcentage (%).
   • Exemple : nom=Jean&age=25

2. multipart/form-data :

   • Ce type d'encodage est utilisé lorsque le formulaire inclut des téléchargements de fichiers.
   • Les données du formulaire sont divisées en plusieurs parties, chacune représentant un champ de formulaire ou un fichier.
   • Chaque partie a son propre ensemble d'en-têtes et de limites pour la séparer des autres parties.
   • Cet encodage permet la transmission efficace de données binaires, comme des fichiers, avec d'autres champs de formulaire.

Côté serveur, les données du formulaire sont reçues et traitées en fonction de la technologie et du framework utilisés. Les langages et frameworks côté serveur courants, tels que PHP, Node.js (Express.js), Ruby on Rails et Python (Django), fournissent des moyens de gérer et d'accéder aux données de formulaire soumises via les méthodes GET et POST.

<form action="/submit" method="post" enctype="multipart/form-data">
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>

  <label for="file">Fichier :</label>
  <input type="file" id="file" name="file">

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

Il est important de gérer la soumission de formulaire de manière sécurisée pour prévenir les attaques comme le cross-site scripting (XSS) et le cross-site request forgery (CSRF). La validation côté serveur, l'assainissement des données et l'utilisation de jetons CSRF sont des pratiques recommandées pour se protéger contre ces vulnérabilités.