Exercices : Formulaires HTML

Exercice 1 : Créer un formulaire simple

Créez un formulaire HTML avec un champ de texte pour le nom et un bouton de soumission.

Indice : Utilisez les balises <form>, <input>, et <button>.

<form>
    
    
</form>

Corrigé :

<form>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">
    <button type="submit">Envoyer</button>
</form>

Explication : La balise <input type="text"> crée un champ de texte. Le bouton de type submit permet d'envoyer le formulaire.

Exercice 2 : Ajouter une zone de texte et une case à cocher

Ajoutez une zone de texte pour un message et une case à cocher pour accepter les conditions d'utilisation.

Indice : Utilisez <textarea> pour la zone de texte et <input type="checkbox"> pour la case à cocher.

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

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

Corrigé :

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

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

    <input type="checkbox" id="conditions" name="conditions">
    <label for="conditions">J'accepte les conditions d'utilisation</label>

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

Explication : La balise <textarea> permet de saisir un texte long. La balise <input type="checkbox"> crée une case à cocher.

Exercice 3 : Ajouter une liste déroulante

Ajoutez une liste déroulante avec trois options : "Choix 1", "Choix 2", et "Choix 3".

Indice : Utilisez les balises <select> et <option>.

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

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

Corrigé :

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

    <label for="choix">Choix :</label>
    <select id="choix" name="choix">
        <option value="choix1">Choix 1</option>
        <option value="choix2">Choix 2</option>
        <option value="choix3">Choix 3</option>
    </select>

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

Explication : La balise <select> crée une liste déroulante, et chaque <option> représente une option.

Exercice 4 : Ajouter des boutons radio

Ajoutez un groupe de boutons radio pour choisir entre "Option A" et "Option B".

Indice : Utilisez <input type="radio"> et donnez-leur le même attribut name pour les regrouper.

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

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

Corrigé :

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

    <input type="radio" id="optionA" name="option" value="A">
    <label for="optionA">Option A</label>

    <input type="radio" id="optionB" name="option" value="B">
    <label for="optionB">Option B</label>

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

Explication : Les boutons radio avec le même attribut name forment un groupe où une seule option peut être sélectionnée.

Exercice 5 : Ajouter un champ de mot de passe et un champ email

Ajoutez un champ pour le mot de passe et un champ pour l'email.

Indice : Utilisez <input type="password"> et <input type="email">.

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

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

Corrigé :

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

    <label for="mdp">Mot de passe :</label>
    <input type="password" id="mdp" name="mdp">

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

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

Explication : Le type password masque les caractères saisis, et le type email valide automatiquement le format de l'email.