Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Formulaires HTML : input, select, textarea et attributs de validation

Bienvenue dans cette leçon sur les formulaires HTML ! Les formulaires sont des composants essentiels de toute application web interactive. Ils permettent aux utilisateurs de saisir des informations, de les envoyer au serveur et d'interagir avec votre site. Que ce soit pour une inscription, une connexion, un commentaire, une recherche ou un achat, les formulaires sont partout.

Dans cette leçon, nous allons explorer en détail les éléments fondamentaux des formulaires HTML : <input>, <select>, et <textarea>, ainsi que les attributs de validation qui améliorent l'expérience utilisateur et la robustesse de vos formulaires.

1. Comprendre les Formulaires HTML

Un formulaire HTML est une section d'un document qui contient des contrôles interactifs permettant à l'utilisateur de fournir des informations. Ces informations sont ensuite envoyées à un serveur web pour traitement.

Structure de base d'un formulaire : l'élément <form>

Tous les éléments de formulaire doivent être encapsulés dans une balise <form>. Cette balise possède des attributs importants :

  • action : Cet attribut spécifie l'URL vers laquelle les données du formulaire seront envoyées une fois soumises. C'est généralement un script côté serveur (ex: PHP, Python, Node.js) qui traitera les données.
  • method : Cet attribut définit la méthode HTTP utilisée pour envoyer les données. Les deux valeurs les plus courantes sont :
    • GET : Les données du formulaire sont ajoutées à l'URL sous forme de paramètres de requête. C'est idéal pour les recherches ou les données non sensibles. Les données sont visibles dans l'historique du navigateur.
    • POST : Les données du formulaire sont envoyées dans le corps de la requête HTTP. C'est la méthode recommandée pour les données sensibles (mots de passe, informations personnelles) ou de grande taille. Les données ne sont pas visibles dans l'URL.

Exemple :

<form action="/traitement-donnees" method="post">
    <!-- Ici iront nos champs de formulaire -->
</form>

2. L'élément <input> : Le couteau suisse des formulaires

L'élément <input> est de loin l'élément de formulaire le plus polyvalent. Son comportement et son apparence sont déterminés par son attribut type.

Chaque <input> doit idéalement avoir un attribut name et un attribut id :

  • name : C'est le nom de la donnée qui sera envoyée au serveur. Par exemple, si vous avez un champ pour le prénom, son name pourrait être "prenom". Le serveur utilisera ce nom pour récupérer la valeur correspondante.
  • id : C'est un identifiant unique pour l'élément. Il est crucial pour lier l'input à un <label> (voir section 5) et pour la manipulation via JavaScript/CSS.

Voici quelques-uns des type d'input les plus courants :

Types de texte et de saisie spécifiques :

  • type="text" : Le type par défaut, pour une seule ligne de texte libre.
    • Ex: <input type="text" id="nom" name="nom">
  • type="password" : Pour les mots de passe. Les caractères saisis sont masqués (souvent remplacés par des points ou des astérisques).
    • Ex: <input type="password" id="mdp" name="motDePasse">
  • type="email" : Pour les adresses e-mail. Les navigateurs modernes peuvent offrir une validation de base de l'adresse e-mail.
    • Ex: <input type="email" id="email" name="emailUtilisateur">
  • type="number" : Pour les nombres. Le navigateur peut afficher des flèches pour augmenter/diminuer la valeur. Vous pouvez utiliser les attributs min et max pour définir une plage.
    • Ex: <input type="number" id="age" name="age" min="18" max="99">
  • type="date" : Pour les dates. Un sélecteur de date (calendrier) est souvent affiché par le navigateur.
    • Ex: <input type="date" id="dateNaissance" name="dateNaissance">
  • type="url" : Pour les URL. Le navigateur peut valider un format d'URL de base.
    • Ex: <input type="url" id="siteWeb" name="siteWeb">
  • type="tel" : Pour les numéros de téléphone. Aucun format spécifique n'est imposé, mais les navigateurs mobiles peuvent adapter le clavier.
    • Ex: <input type="tel" id="telephone" name="telephone">

Types de sélection :

  • type="checkbox" : Permet à l'utilisateur de sélectionner zéro ou plusieurs options parmi un ensemble. Chaque checkbox doit avoir son propre name (ou le même name si elles font partie d'un groupe, mais avec des value différentes).
    • Ex: <input type="checkbox" id="newsletter" name="newsletter" value="oui">
  • type="radio" : Permet à l'utilisateur de sélectionner une seule option parmi un ensemble. Tous les boutons radio d'un même groupe doivent avoir le même attribut name pour qu'ils fonctionnent ensemble (la sélection de l'un désélectionne les autres).
    • Ex: 
      <input type="radio" id="homme" name="genre" value="homme">
<input type="radio" id="femme" name="genre" value="femme">

Types d'action :

  • type="submit" : Un bouton qui soumet le formulaire.
    • Ex: <input type="submit" value="Envoyer"> (Le value est le texte affiché sur le bouton)
  • type="reset" : Un bouton qui réinitialise tous les champs du formulaire à leurs valeurs initiales.
    • Ex: <input type="reset" value="Effacer">
  • type="button" : Un bouton générique qui ne soumet pas et ne réinitialise pas le formulaire par défaut. Il est souvent utilisé avec JavaScript pour déclencher des actions personnalisées.
    • Ex: <input type="button" value="Cliquez-moi">

Autres types importants :

  • type="file" : Permet à l'utilisateur de sélectionner un ou plusieurs fichiers à envoyer. L'attribut enctype="multipart/form-data" doit être ajouté à la balise <form> pour que l'envoi de fichiers fonctionne.
    • Ex: <input type="file" id="fichier" name="fichierUpload">
  • type="hidden" : Un champ dont la valeur est envoyée avec le formulaire mais n'est pas visible pour l'utilisateur. Utile pour stocker des informations comme un ID d'utilisateur, un jeton de sécurité, etc.
    • Ex: <input type="hidden" id="userId" name="userId" value="12345">

Exemple de code : Formulaire simple avec divers inputs

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Formulaire HTML</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        form { background-color: #f4f4f4; padding: 20px; border-radius: 8px; max-width: 500px; margin: auto; }
        div { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        input[type="url"],
        input[type="tel"] {
            width: calc(100% - 22px); /* 100% - padding - border */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"],
        input[type="reset"] {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"] { background-color: #007bff; color: white; margin-right: 10px; }
        input[type="reset"] { background-color: #6c757d; color: white; }
        .radio-group label, .checkbox-group label { display: inline-block; margin-right: 10px; font-weight: normal; }
        .radio-group input, .checkbox-group input { vertical-align: middle; }
    </style>
</head>
<body>

    <h1>Formulaire d'Inscription</h1>

    <form action="/inscription" method="post">
        <div>
            <label for="nom">Nom :</label>
            <input type="text" id="nom" name="nom" placeholder="Votre nom complet">
        </div>
        <div>
            <label for="email">Email :</label>
            <input type="email" id="email" name="email" placeholder="votre.email@example.com">
        </div>
        <div>
            <label for="mdp">Mot de passe :</label>
            <input type="password" id="mdp" name="motDePasse">
        </div>
        <div>
            <label for="age">Votre âge :</label>
            <input type="number" id="age" name="age" min="1" max="120">
        </div>
        <div>
            <label for="dateNaissance">Date de naissance :</label>
            <input type="date" id="dateNaissance" name="dateNaissance">
        </div>
        <div class="radio-group">
            <label>Sexe :</label>
            <input type="radio" id="sexeM" name="sexe" value="M"> <label for="sexeM">Masculin</label>
            <input type="radio" id="sexeF" name="sexe" value="F"> <label for="sexeF">Féminin</label>
            <input type="radio" id="sexeX" name="sexe" value="X"> <label for="sexeX">Non binaire</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="conditions" name="conditions" value="accepte"> <label for="conditions">J'accepte les conditions d'utilisation</label>
        </div>
        <div>
            <input type="submit" value="S'inscrire">
            <input type="reset" value="Effacer les champs">
        </div>
    </form>

</body>
</html>

Ce bloc de code présente un formulaire d'inscription simple, utilisant les types d'input les plus courants (text, email, password, number, date, radio, checkbox) et les boutons de soumission/réinitialisation. Les balises <label> sont utilisées pour lier le texte descriptif à chaque champ, améliorant l'accessibilité. Des styles CSS de base sont inclus pour une meilleure lisibilité.

3. L'élément <select> : Les listes déroulantes

L'élément <select> est utilisé pour créer des listes déroulantes (menus de sélection). Chaque option dans la liste est définie par un élément <option> imbriqué.

  • <select> : L'élément conteneur pour toutes les options. Comme les <input>, il doit avoir un attribut name et un id.
  • <option> : Représente une option individuelle dans la liste déroulante.
    • L'attribut value de l'<option> est la donnée qui sera envoyée au serveur si cette option est sélectionnée.
    • Le texte entre les balises <option> est ce que l'utilisateur voit.
    • L'attribut selected (booléen) peut être ajouté à une <option> pour la rendre sélectionnée par défaut.

Attributs courants de <select> :

  • multiple (booléen) : Permet à l'utilisateur de sélectionner plusieurs options en maintenant la touche Ctrl (Windows/Linux) ou Cmd (Mac) enfoncée. Si cet attribut est présent, le serveur recevra un tableau de valeurs pour le name du <select>.
  • size : Définit le nombre d'options visibles simultanément sans avoir à faire défiler la liste. Si size > 1 (et multiple n'est pas utilisé), la liste ne sera plus déroulante mais une liste visible.

Groupement d'options avec <optgroup> :

L'élément <optgroup> permet de regrouper des options liées au sein d'une liste déroulante. L'attribut label de l'<optgroup> est affiché comme un titre de groupe.

Exemple :

<label for="pays">Choisissez un pays :</label>
<select id="pays" name="paysUtilisateur">
    <option value="">-- Veuillez choisir --</option>
    <optgroup label="Europe">
        <option value="fr">France</option>
        <option value="de">Allemagne</option>
        <option value="es">Espagne</option>
    </optgroup>
    <optgroup label="Amérique du Nord">
        <option value="ca">Canada</option>
        <option value="us">États-Unis</option>
    </optgroup>
</select>

4. L'élément <textarea> : Saisie de texte multi-lignes

Lorsque vous avez besoin de permettre aux utilisateurs de saisir de grandes quantités de texte, comme un commentaire ou un message, l'élément <textarea> est la solution.

  • Comme <input> et <select>, il doit avoir un attribut name et un id.
  • La valeur du textarea est le texte situé entre ses balises d'ouverture et de fermeture.
  • Il ne supporte pas l'attribut value.

Attributs courants de <textarea> :

  • rows : Spécifie le nombre visible de lignes de texte.
  • cols : Spécifie le nombre visible de colonnes (caractères) par ligne.
  • Ces attributs définissent la taille initiale de la zone de texte, mais l'utilisateur peut souvent la redimensionner (sauf si le CSS l'interdit).

Exemple :

<label for="commentaire">Votre commentaire :</label>
<textarea id="commentaire" name="commentaire" rows="5" cols="40" placeholder="Écrivez votre message ici..."></textarea>

5. Les étiquettes (<label>) : Améliorer l'accessibilité et l'expérience utilisateur

L'élément <label> est fondamental pour l'accessibilité et l'ergonomie des formulaires. Il associe un texte descriptif à un contrôle de formulaire.

  • L'attribut for du <label> doit correspondre à l'id de l'élément de formulaire qu'il décrit (input, select, textarea).
  • Cliquer sur le texte de l'étiquette mettra le focus sur le champ associé, ce qui est très utile, surtout pour les petites cases à cocher ou les boutons radio.
  • Les lecteurs d'écran utilisent les labels pour décrire les champs aux utilisateurs malvoyants.

Exemple :

<div>
    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom">
</div>

<div>
    <input type="checkbox" id="acceptCgu" name="acceptCgu">
    <label for="acceptCgu">J'accepte les conditions générales d'utilisation</label>
</div>

6. Attributs de validation HTML5 (Validation côté client)

HTML5 a introduit des attributs qui permettent une validation de base des formulaires côté client (dans le navigateur) avant que les données ne soient envoyées au serveur. C'est un premier niveau de validation ; une validation côté serveur est toujours nécessaire pour des raisons de sécurité et de robustesse.

Ces attributs améliorent l'expérience utilisateur en fournissant des retours immédiats, mais ne garantissent pas l'intégrité des données (un utilisateur malveillant peut contourner la validation HTML).

Attributs de validation courants :

  • required (booléen) : Indique qu'un champ doit être rempli avant la soumission du formulaire. Si le champ est vide, le navigateur affichera un message d'erreur.
    • Ex: <input type="text" id="prenom" name="prenom" required>
  • minlength et maxlength (pour les types text, email, password, url, tel, textarea) : Spécifient le nombre minimum et maximum de caractères autorisés.
    • Ex: <input type="password" id="mdp" name="mdp" minlength="8" maxlength="20" required>
    • Ex: <textarea id="message" name="message" rows="5" minlength="10"></textarea>
  • min et max (pour les types number, range, date, month, week, time, datetime-local) : Définissent la valeur numérique ou la date/heure minimale et maximale.
    • Ex: <input type="number" id="quantite" name="quantite" min="1" max="100">
  • pattern : Prend une expression régulière (regex) comme valeur. Le champ n'est valide que si sa valeur correspond au pattern.
    • Ex: <input type="text" id="codePostal" name="codePostal" pattern="[0-9]{5}" title="Cinq chiffres requis, ex: 75001">
    • Note: L'attribut title est souvent utilisé avec pattern pour fournir un indice à l'utilisateur sur le format attendu.
  • placeholder : Fournit une indication ou un exemple de la valeur attendue dans le champ, visible tant que le champ est vide. Ce n'est pas une alternative à <label>.
    • Ex: <input type="email" id="email" name="email" placeholder="nom.prenom@domaine.com">
  • autocomplete : Suggère au navigateur si et comment il doit auto-remplir le champ. Peut être on, off, ou des valeurs spécifiques comme name, email, tel, etc.
    • Ex: <input type="email" id="email" name="email" autocomplete="email">
  • readonly (booléen) : Rend le champ non modifiable par l'utilisateur, mais sa valeur est toujours envoyée avec le formulaire.
    • Ex: <input type="text" id="userId" name="userId" value="123" readonly>
  • disabled (booléen) : Rend le champ non modifiable et empêche l'envoi de sa valeur avec le formulaire. Le champ apparaît souvent grisé.
    • Ex: <input type="submit" value="Envoyer" disabled> (Le bouton est désactivé)

Exemple de code : Formulaire avec validation HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire avec Validation HTML5</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        form { background-color: #e6f7ff; padding: 25px; border-radius: 8px; max-width: 600px; margin: auto; border: 1px solid #b3e0ff; }
        div { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: bold; color: #0056b3; }
        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]),
        textarea,
        select {
            width: calc(100% - 22px);
            padding: 12px;
            border: 1px solid #80bdff;
            border-radius: 5px;
            box-sizing: border-box; /* Inclure padding et border dans la largeur */
            font-size: 16px;
        }
        input:focus,
        textarea:focus,
        select:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            outline: none;
        }
        input[type="submit"] {
            padding: 12px 25px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.2s;
        }
        input[type="submit"]:hover {
            background-color: #218838;
        }
        input:invalid:not(:placeholder-shown) {
            border-color: #dc3545; /* Rouge si invalide */
        }
        input:valid:not(:placeholder-shown) {
            border-color: #28a745; /* Vert si valide */
        }
        .info-text {
            font-size: 0.9em;
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <h1>Formulaire de Commande</h1>

    <form action="/commander" method="post">
        <div>
            <label for="nomProduit">Nom du produit :</label>
            <input type="text" id="nomProduit" name="nomProduit" placeholder="Ex: T-shirt graphique" required>
        </div>

        <div>
            <label for="quantite">Quantité :</label>
            <input type="number" id="quantite" name="quantite" min="1" max="10" value="1" required>
            <p class="info-text">Entre 1 et 10 articles.</p>
        </div>

        <div>
            <label for="emailClient">Votre email :</label>
            <input type="email" id="emailClient" name="emailClient" placeholder="contact@example.com" required autocomplete="email">
            <p class="info-text">Veuillez entrer une adresse email valide.</p>
        </div>

        <div>
            <label for="telephone">Numéro de téléphone :</label>
            <input type="tel" id="telephone" name="telephone" placeholder="Ex: 0612345678" pattern="[0-9]{10}" title="Veuillez entrer 10 chiffres (ex: 0612345678)" required>
            <p class="info-text">Format attendu : 10 chiffres sans espace.</p>
        </div>

        <div>
            <label for="messageSuppl">Message supplémentaire :</label>
            <textarea id="messageSuppl" name="messageSuppl" rows="4" minlength="10" maxlength="200" placeholder="Des instructions spéciales pour la livraison ?"></textarea>
            <p class="info-text">Min. 10 caractères, Max. 200 caractères.</p>
        </div>

        <div>
            <label for="paysLivraison">Pays de livraison :</label>
            <select id="paysLivraison" name="paysLivraison" required>
                <option value="">-- Choisissez un pays --</option>
                <option value="fr">France</option>
                <option value="be">Belgique</option>
                <option value="ch">Suisse</option>
                <option value="ca">Canada</option>
            </select>
        </div>

        <div>
            <label for="dateLivraison">Date de livraison souhaitée :</label>
            <input type="date" id="dateLivraison" name="dateLivraison" min="2023-01-01" required>
            <p class="info-text">Veuillez choisir une date future.</p>
        </div>

        <div>
            <input type="submit" value="Passer la commande">
        </div>
    </form>

</body>
</html>

Ce second bloc de code illustre l'utilisation de plusieurs attributs de validation HTML5 (required, min, max, minlength, maxlength, pattern, placeholder, autocomplete) sur différents types de champs. J'ai également inclus des styles CSS pour visualiser l'état de validité des champs (:invalid, :valid) et pour améliorer l'apparence générale du formulaire, rendant les interactions de validation plus claires pour l'utilisateur.

Conclusion

Les formulaires sont une pierre angulaire de l'interactivité web. En maîtrisant les éléments <input>, <select>, <textarea> et en utilisant judicieusement les attributs de validation HTML5, vous pouvez créer des formulaires robustes, accessibles et conviviaux.

N'oubliez jamais que la validation côté client (HTML5) est une première ligne de défense pour améliorer l'expérience utilisateur, mais qu'elle doit toujours être complétée par une validation côté serveur pour des raisons de sécurité et d'intégrité des données. Le HTML s'occupe de la structure et de la validation initiale, tandis que le CSS gère l'apparence, et JavaScript peut ajouter une validation et des comportements plus complexes et dynamiques.

Continuez à expérimenter avec ces éléments pour construire des interfaces utilisateur puissantes et intuitives !