Boutons dans les formulaires
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 45 sur 60.
Les boutons jouent un rôle clé dans les formulaires, où ils aident à soumettre des données ou à réinitialiser des champs. Voyons comment ils fonctionnent :
Bouton de soumission :
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Envoie les données du formulaire au serveur.
Bouton de réinitialisation :
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": Efface tous les champs et les réinitialise à leurs valeurs par défaut.
Défi
FacileCréez un document HTML qui inclut un formulaire avec différents types de boutons. Le formulaire doit comporter les éléments suivants :
- Un champ de saisie de texte avec le name "message" et un placeholder qui indique "Enter your message".
- Ajoutez un bouton de soumission (
<button type="submit">) avec le texte "Send". - Ajoutez un bouton de réinitialisation (
<button type="reset">) avec le texte "Clear". - Ajoutez un bouton générique (
<button>) avec le texte "Click Me".
Aide-mémoire
Les boutons dans les formulaires ont différents types pour des fonctions spécifiques :
Bouton de soumission :
<button type="submit">Submit</button>type="submit": Envoie les données du formulaire au serveur
Bouton de réinitialisation :
<button type="reset">Reset</button>type="reset": Efface tous les champs et les réinitialise à leurs valeurs par défaut
Bouton générique :
<button>Click Me</button>- Bouton par défaut sans comportement de formulaire spécifique
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez votre code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page9Formulaires et entrées, partie 2
Boutons radioCases à cocherListes déroulantesBoutonsBoutons dans les formulairesRécapitulatif - Formulaires n°1Récapitulatif - Formulaires n°2