html

tp-les-formulaires-html

Un cours complet pour maîtriser tp-les-formulaires-html.

0 chapitres 0 QCM Accès gratuit

1. Objectif des Travaux Pratiques

L'objectif de ce TP est de mettre en pratique vos connaissances sur les balises HTML permettant de créer des interfaces de saisie de données. Vous allez concevoir un formulaire d'inscription complet pour un site web fictif. Cet exercice vous permettra de manipuler les balises <form>, <input>, <select>, <textarea>, ainsi que les éléments de structuration comme <fieldset> et <legend>.

2. Énoncé de l'exercice

Vous devez réaliser une page HTML contenant un formulaire d'inscription. Ce formulaire doit être structuré de manière logique et claire pour l'utilisateur. Voici le cahier des charges :

A. Structure globale du formulaire

Le formulaire doit envoyer les données vers une page nommée traitement.php (même si elle n'existe pas encore).
La méthode d'envoi doit être POST pour garantir la confidentialité des données.

B. Sections du formulaire (Utilisation de Fieldset)

Votre formulaire sera divisé en trois grandes sections distinctes (utilisez <fieldset> et <legend> pour chacune d'elles) :

Informations personnelles :
- Civilité : Des boutons radio permettant de choisir entre "M." et "Mme". (L'attribut name doit être identique pour lier les choix).
- Nom : Un champ de texte obligatoire.
- Prénom : Un champ de texte obligatoire.
- Date de naissance : Un champ adapté à la saisie d'une date (type date).

Coordonnées de contact :
- Email : Un champ de texte spécifique pour l'email (type email), obligatoire.
- Numéro de téléphone : Un champ de texte (type tel).
- Pays : Une liste déroulante (<select>) proposant au moins 4 pays (ex: Tunisie, France, Maroc, Canada). Tunisie doit être sélectionnée par défaut.

Informations complémentaires :
- Comment nous avez-vous connus ? : Des cases à cocher (Checkbox) avec les options "Google", "Réseaux sociaux", "Un ami", "Autre". L'utilisateur peut cocher plusieurs cases.
- Vos attentes (Message) : Une zone de texte multiligne (<textarea>) permettant à l'utilisateur de laisser un message de plusieurs lignes.

C. Boutons d'action

À la fin du formulaire, ajoutez deux boutons :
- Un bouton "Créer mon compte" pour soumettre le formulaire (Submit).
- Un bouton "Réinitialiser" pour vider tous les champs du formulaire (Reset).

3. Corrigé de l'exercice

Voici une proposition de correction répondant à l'ensemble du cahier des charges. Lisez attentivement les balises et les attributs utilisés pour comprendre comment chaque élément a été construit.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>TP - Formulaire d'inscription</title>
</head>
<body>

    <h2>Formulaire d'inscription</h2>

    <!-- Début du formulaire -->
    <form action="traitement.php" method="POST">

        <!-- Section 1 : Informations personnelles -->
        <fieldset>
            <legend>Informations personnelles</legend>
            
            <p>
                <label>Civilité :</label>
                <input type="radio" id="homme" name="civilite" value="M" checked>
                <label for="homme">M.</label>
                
                <input type="radio" id="femme" name="civilite" value="Mme">
                <label for="femme">Mme</label>
            </p>

            <p>
                <label for="nom">Nom :</label>
                <input type="text" id="nom" name="user_nom" required placeholder="Votre nom">
            </p>

            <p>
                <label for="prenom">Prénom :</label>
                <input type="text" id="prenom" name="user_prenom" required placeholder="Votre prénom">
            </p>

            <p>
                <label for="date_naissance">Date de naissance :</label>
                <input type="date" id="date_naissance" name="date_naissance">
            </p>
        </fieldset>

        <br>

        <!-- Section 2 : Coordonnées de contact -->
        <fieldset>
            <legend>Coordonnées de contact</legend>

            <p>
                <label for="email">Adresse E-mail :</label>
                <input type="email" id="email" name="user_email" required placeholder="exemple@domaine.com">
            </p>

            <p>
                <label for="telephone">Numéro de téléphone :</label>
                <input type="tel" id="telephone" name="user_telephone" placeholder="+216 00 000 000">
            </p>

            <p>
                <label for="pays">Pays de résidence :</label>
                <select id="pays" name="pays_residence">
                    <option value="tn" selected>Tunisie</option>
                    <option value="fr">France</option>
                    <option value="ma">Maroc</option>
                    <option value="ca">Canada</option>
                </select>
            </p>
        </fieldset>

        <br>

        <!-- Section 3 : Informations complémentaires -->
        <fieldset>
            <legend>Informations complémentaires</legend>

            <p>
                <label>Comment nous avez-vous connus ?</label><br>
                
                <input type="checkbox" id="connu_google" name="source[]" value="google">
                <label for="connu_google">Moteur de recherche (Google)</label><br>

                <input type="checkbox" id="connu_reseaux" name="source[]" value="reseaux_sociaux">
                <label for="connu_reseaux">Réseaux sociaux (Facebook, LinkedIn...)</label><br>

                <input type="checkbox" id="connu_ami" name="source[]" value="ami">
                <label for="connu_ami">Recommandation par un ami</label><br>

                <input type="checkbox" id="connu_autre" name="source[]" value="autre">
                <label for="connu_autre">Autre</label>
            </p>

            <p>
                <label for="message">Quelles sont vos attentes ? (Message) :</label><br>
                <textarea id="message" name="user_message" rows="5" cols="50" placeholder="Écrivez votre message ici..."></textarea>
            </p>
        </fieldset>

        <br>

        <!-- Boutons d'action -->
        <div style="text-align: center;">
            <input type="submit" value="Créer mon compte">
            <input type="reset" value="Réinitialiser les champs">
        </div>

    </form>

</body>
</html>

4. Analyse des éléments clés du corrigé

<label for="...">: Remarquez comment chaque balise <label> est associée à son champ de saisie via l'attribut for qui correspond à l'id de l'input. C'est essentiel pour l'accessibilité (cliquer sur le texte sélectionne la case).
Les attributs HTML5 : L'utilisation de required force l'utilisateur à remplir les champs Nom, Prénom et Email avant de pouvoir soumettre. L'attribut placeholder donne une indication visuelle (un exemple) à l'intérieur du champ vide.
Les types d'Input : Utiliser type="email" ou type="date" au lieu d'un simple type="text" permet aux navigateurs (surtout sur smartphone) d'afficher un clavier virtuel adapté (avec le @ pour l'email, ou un calendrier pour la date).
Boutons Radio vs Checkbox : Pour la civilité (choix unique), on utilise type="radio" et on leur donne le même attribut name="civilite" pour qu'ils soient liés. Pour les sources (choix multiples), on utilise type="checkbox".

Rédigé et structuré par : Med Khalil Kribi