Menu
Coddy logo textTech

Récapitulatif - Formulaires n°1

Fait partie de la section Fondamentaux du Journey HTML de Coddy. Leçon 46 sur 60.

challenge icon

Défi

Facile

Construisons un formulaire simple de commande de boissons en HTML, comme indiqué sur l’image ci-dessous.

Voici ce qu’il faut inclure :

  1. Une balise <form> pour tout englober.
  2. Un groupe de boutons radio (nom : "drink") pour permettre aux utilisateurs de choisir leur boisson. Les libellés doivent être "Water", "Coke" ou "Sprite".
  3. Un groupe de cases à cocher (nom : "extras") pour les ajouts facultatifs. Les libellés doivent être "Ice", "Lemon" ou "Sugar".
  4. Un menu déroulant (nom : "size") pour choisir la taille de la boisson. Les options doivent être "Small", "Medium" ou "Large".
  5. Un bouton d’envoi libellé "Place Order".
  6. Un bouton de réinitialisation libellé "Clear".

⚠️ Important : Utilise une seule balise <form>. HTML n’autorise pas les balises <form> imbriquées : placer une balise <form> à l’intérieur d’une autre <form> est invalide et entraînera la détection de tes champs en dehors du formulaire, ce qui fera échouer les tests. Place tous tes boutons radio, cases à cocher, menu déroulant et boutons directement à l’intérieur de l’unique <form> externe : n’entoure pas les sections de balises <form> supplémentaires.

Essayez vous-même

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- Écrivez le code ici -->
            
            <p>Select extras: </p>
            <!-- Écrivez le code ici -->
            
            <p>Select size: </p>
            <!-- Écrivez le code ici -->
            
        </form>
    </body>
</html>

Toutes les leçons de Fondamentaux

Entraînez-vous par vous-même : Playground Web