Libellés pour les champs
Fait partie de la section Fundamentals du Journey HTML de Coddy. Leçon 39 sur 60.
Il n'est pas toujours très clair de savoir à quoi sert un champ de saisie sans étiquette. Une étiquette donne aux utilisateurs un indice visuel clair sur le type de saisie attendu dans ce champ. Les étiquettes sont créées à l'aide de la balise <label>.
Voici la syntaxe de base :
<label for="field">Label text</label>
<input type="text" id="field"><label>: La balise qui crée le libellé.
for: Un lien entre l'étiquette et un champ de formulaire. La valeur defordoit correspondre à l'iddu champ de formulaire.
- Texte de l'étiquette : Le texte qui décrit à quoi sert le champ du formulaire.
<input>: Le champ de formulaire auquel l'étiquette se réfère.
id: l'identifiant unique du champ de formulaire, qui correspond à l'attributforde l'étiquette.
Défi
FacileAjoutez les balises suivantes à l'intérieur de la balise <form> :
- Un
<label>avec le texte 'First Name:' et l'attributfordéfini sur 'firstname'. - Un champ
<input>avectype="text". - Le champ
<input>doit avoir unidqui correspond à l'attributforde la balise label.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Écrire le code ici -->
</form>
</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 pageEntraînez-vous par vous-même : Playground Web