Formulaires HTML

Formulaires HTML

Les formulaires HTML sont essentiels pour collecter les entrées utilisateur sur les pages web, permettant des interactions comme les connexions, les recherches, les inscriptions et les soumissions de commentaires.

L’élément

L’élément <form> agit comme un conteneur pour divers contrôles de saisie.

<form action="/submit-handler" method="post">
  <!-- Form elements like input, label, textarea, button go here -->
</form>

Attributs clés de l’élément <form> :

• action : Spécifie l’URL où les données du formulaire doivent être envoyées pour traitement (souvent un script côté serveur ou un endpoint d’API). Si omis, les données sont envoyées à l’URL de la page actuelle.
• method : Spécifie la méthode HTTP à utiliser lors de la soumission du formulaire. Les valeurs courantes sont GET et POST.

Éléments de formulaire : , , , <select>, <button>

Les formulaires contiennent divers éléments pour capturer différents types d’entrées :

1. L’élément <input> :

L’élément de formulaire le plus polyvalent. Son comportement est déterminé par l’attribut type.

Les valeurs courantes de type incluent :

Type d’entrée	Description
text	Saisie de texte sur une seule ligne.
password	Saisie de texte sur une seule ligne où les caractères sont masqués.
email	Champ de saisie optimisé pour les adresses e-mail (fournit une validation).
number	Champ de saisie pour les valeurs numériques.
date	Contrôle de sélection de date.
checkbox	Permet de sélectionner zéro ou plusieurs options.
radio	Permet de sélectionner exactement une option parmi un groupe.
file	Permet aux utilisateurs de télécharger des fichiers.
submit	Un bouton qui soumet les données du formulaire.
button	Un bouton générique (souvent utilisé avec JavaScript).

2. L’élément <label> :

Crucial pour l’accessibilité et l’utilisabilité. L’élément <label> fournit une légende pour un contrôle de formulaire. Cliquer sur l’étiquette (label) permet de focaliser ou d’activer le contrôle associé.

Associez une étiquette (label) à un champ de saisie en utilisant l’attribut for, qui doit correspondre à l’id de l’élément input.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Alternativement, vous pouvez envelopper le champ de saisie dans l’étiquette :

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

Utilisez toujours <label> pour vos contrôles de formulaire.

3. L’élément <textarea> :

Définit un champ de saisie de texte multi-lignes.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

4. L’élément <select> :

Crée une liste déroulante à l’aide d’éléments <option> imbriqués.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">--Please choose an option--</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

5. L’élément <button> :

Crée un bouton cliquable. Peut être de type submit, reset ou button.

<button type="submit">Submit Application</button>
<button type="reset">Clear Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

Pour soumettre des formulaires, <button type="submit"> est généralement préféré à <input type="submit"> car il permet un contenu plus riche à l’intérieur (comme des icônes ou une mise en forme de texte complexe).

L’attribut name

Pour que la valeur d’un contrôle de saisie soit envoyée lors de la soumission du formulaire, elle doit avoir un attribut name.

L’attribut name fournit la clé, et la value du champ de saisie fournit la valeur, formant des paires clé-valeur qui sont envoyées au serveur (par exemple, username=JohnDoe).

Exemple : Seul le champ ‘email’ sera soumis car ‘comments’ n’a pas d’attribut name.

<form action="/subscribe" method="post">
  <label for="email_sub">Email:</label>
  <input type="email" id="email_sub" name="subscriber_email">

  <label for="comments">Comments (will not be sent):</label>
  <textarea id="comments" rows="3"></textarea>

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

Méthodes de soumission de formulaire : GET vs. POST

L’attribut method détermine comment les données du formulaire sont envoyées :

GET :

• Ajoute les données du formulaire directement à l’URL spécifiée dans l’attribut action (par exemple, /search?query=html+forms).
• Les données sont visibles dans l’URL, l’historique du navigateur et les journaux du serveur.
• Convient aux données non sensibles comme les requêtes de recherche ou les paramètres de filtrage.
• A des limitations sur la quantité de données pouvant être envoyées (varie selon le navigateur/serveur).
• Les requêtes GET peuvent être mises en signet et mises en cache.
• Méthode par défaut si l’attribut method est omis.

Exemple de formulaire GET :

<form action="/search" method="get">
  <label for="search_query">Search:</label>
  <input type="text" id="search_query" name="query">
  <button type="submit">Search</button>
</form>

POST :

• Envoie les données du formulaire dans le corps de la requête HTTP, séparément de l’URL.
• Les données ne sont pas visibles dans l’URL, ce qui les rend plus sécurisées pour les informations sensibles (mots de passe, données personnelles).
• Pas de limitations significatives sur la taille des données.
• Convient pour soumettre des données qui modifient l’état du serveur (par exemple, créer un compte, publier un commentaire).
• Les requêtes POST ne sont généralement pas facilement mises en signet ou mises en cache.

Exemple de formulaire POST :

<form action="/login" method="post">
  <div>
    <label for="login_user">Username:</label>
    <input type="text" id="login_user" name="username">
  </div>
  <div>
    <label for="login_pass">Password:</label>
    <input type="password" id="login_pass" name="password">
  </div>
  <button type="submit">Log In</button>
</form>

Utilisez POST lorsque :

• Vous soumettez des données sensibles (mots de passe, informations de carte de crédit).
• Les données soumises entraîneront des modifications sur le serveur (création, mise à jour, suppression de données).
• Vous soumettez de grandes quantités de données.
• Vous téléchargez des fichiers.

Utilisez GET lorsque :

• La soumission représente une recherche ou un filtre.
• Les données ne sont pas sensibles.
• Vous souhaitez que l’URL résultante puisse être mise en signet.

Regroupement d’éléments de formulaire :

et

L’élément <fieldset> regroupe les contrôles associés au sein d’un formulaire, souvent rendu visuellement avec une bordure.

L’élément <legend> fournit une légende ou un titre pour le groupe <fieldset>. C’est important pour l’accessibilité, aidant les utilisateurs à comprendre le contexte des contrôles regroupés.

Exemple :

<form action="/register" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="first_name">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="last_name">
    </div>
  </fieldset>

  <fieldset>
    <legend>Contact Details</legend>
    <div>
      <label for="email_reg">Email:</label>
      <input type="email" id="email_reg" name="email">
    </div>
  </fieldset>

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

L’utilisation de <fieldset> et <legend> améliore la structure et l’accessibilité des formulaires complexes.

Validation de formulaire

HTML5 a introduit des fonctionnalités de validation de formulaire côté client intégrées :

• L’utilisation de types d’input spécifiques comme email, url, number vérifie automatiquement le format.
• Des attributs comme required, minlength, maxlength, min, max, pattern vous permettent de spécifier des règles de validation.

Les navigateurs empêcheront généralement la soumission du formulaire et afficheront des messages d’erreur si les règles de validation ne sont pas respectées.

Vous pouvez désactiver la validation intégrée d’un formulaire en utilisant l’attribut novalidate sur l’élément <form>.

<form action="/submit" method="post" novalidate>
  <!-- Browser validation is disabled for this form -->
</form>

Important : La validation côté client est une amélioration de l’utilisabilité, mais elle peut être contournée. Implémentez toujours une validation robuste côté serveur également pour garantir l’intégrité et la sécurité des données.

Autres attributs de formulaire

Attribut	Description
target	Spécifie où afficher la réponse après la soumission (par exemple, _blank pour un nouvel onglet). Similaire aux cibles de lien.
enctype	Spécifie comment les données du formulaire doivent être encodées avant d’être envoyées. La valeur par défaut est application/x-www-form-urlencoded. Utilisez multipart/form-data lors du téléchargement de fichiers. Utilisez text/plain pour le débogage (rarement utilisé en production).
autocomplete	Contrôle si le navigateur doit proposer l’autocomplétion pour les champs de formulaire (on ou off). Peut également être défini sur des champs de saisie individuels.
novalidate	Désactive la validation de formulaire HTML5 intégrée au navigateur.