Qu'est-ce qu'un formulaire HTML ?

Les formulaires HTML permettent de collecter des données auprès des utilisateurs. Ils contiennent divers champs d'entrée tels que des zones de texte, des cases à cocher, des boutons radio, des menus déroulants et des boutons de soumission.

Structure d'un formulaire

Un formulaire est défini par la balise <form> et peut contenir plusieurs champs d'entrée. Il utilise les attributs action (URL de destination) et method (GET ou POST) pour envoyer les données.

                
                <form action="/submit" method="post">
                    <!-- Champs du formulaire -->
                </form>
                
            

Exemples de champs de formulaire

Champ de texte

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

Champ email

                
                <label for="email">Email :</label>
                <input type="email" id="email" name="email" placeholder="exemple@mail.com" required>
                
            

Mot de passe

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

Cases à cocher

                
                <input type="checkbox" id="newsletter" name="newsletter">
                <label for="newsletter">S'abonner à la newsletter</label>
                
            

Boutons radio

                
                <input type="radio" id="homme" name="genre" value="homme">
                <label for="homme">Homme</label>
                <input type="radio" id="femme" name="genre" value="femme">
                <label for="femme">Femme</label>
                
            

Liste déroulante

                
                <label for="pays">Pays :</label>
                <select id="pays" name="pays">
                    <option value="france">France</option>
                    <option value="canada">Canada</option>
                    <option value="belgique">Belgique</option>
                </select>
                
            

Zone de texte

                
                <label for="message">Message :</label>
                <textarea id="message" name="message" rows="4" cols="30" placeholder="Votre message..."></textarea>
                
            

Bouton de soumission

                
                <input type="submit" value="Envoyer">
                
            

Exemple de formulaire complet

                
                <form action="/submit" method="post">
                    <label for="name">Nom :</label>
                    <input type="text" id="name" name="name" required><br><br>

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

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

                    <input type="submit" value="Envoyer">
                </form>