Attributs des champs
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 37 sur 60.
Voici quelques autres attributs utiles pour les champs de saisie de texte :
placeholder: Fournit un court indice qui décrit la valeur attendue du champ de saisie (par ex., "Enter your name").value: Définit la valeur initiale du champ de saisie.maxlength: Spécifie le nombre maximum de caractères autorisés dans le champ de saisie.
Voici un exemple de la manière de créer une entrée de texte avec un espace réservé :
<input type="text" name="username" placeholder="Enter username">Dans cet exemple, nous avons un champ de saisie de texte avec le nom "username" et un placeholder qui indique "Enter username". Lorsque le champ de saisie est vide, le texte du placeholder sera affiché à l'intérieur du champ. Dès que l'utilisateur commence à saisir du texte, le texte du placeholder disparaîtra.
Défi
FacileCréez un document HTML qui inclut un formulaire avec les champs de saisie de texte suivants :
- Une saisie de texte avec le nom "firstname" et un espace réservé (placeholder) qui indique "Enter your first name".
- Une saisie de texte avec le nom "lastname" et un espace réservé (placeholder) qui indique "Enter your last name".
- Une saisie de texte avec le nom "email" et un espace réservé (placeholder) qui indique "Enter your email". Définissez la longueur maximale de cette saisie à 50 caractères.
Aide-mémoire
Attributs utiles pour les entrées de texte :
placeholder: Fournit un court indice qui décrit la valeur attendue du champ de saisievalue: Définit la valeur initiale du champ de saisiemaxlength: Spécifie le nombre maximum de caractères autorisés dans le champ de saisie
Exemple d'une entrée de texte avec un espace réservé (placeholder) :
<input type="text" name="username" placeholder="Enter username">Le texte de l'espace réservé s'affiche lorsque le champ de saisie est vide et disparaît lorsque l'utilisateur commence à taper.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le 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 page