1. Description de la balise <input> HTML
La balise <input> est l'une des balises HTML les plus couramment utilisées pour créer des zones de saisie interactives dans une page web. Elle est généralement utilisée pour collecter des données d'entrée de l'utilisateur, telles que du texte, des numéros, des cases à cocher, des boutons radio et bien d'autres.
2. Liste des attributs de la balise <input>
Voici une description des attributs et des utilisations courantes de la balise <input> :
- Type (type) : L'attribut type détermine le type de champ d'entrée que la balise <input> représente. Les valeurs courantes pour l'attribut type comprennent :
- text : Champ de texte simple permettant à l'utilisateur de saisir du texte.
- password : Champ de texte masqué pour les mots de passe.
- checkbox : Une case à cocher qui peut être cochée ou décochée.
- radio : Un bouton radio permettant à l'utilisateur de choisir parmi plusieurs options.
- submit : Un bouton de soumission de formulaire.
- file : Un champ permettant de télécharger un fichier.
- email : Champ de texte pour la saisie d'adresses e-mail.
- number : Champ de texte pour la saisie de nombres.
- date : Champ de texte pour la saisie de dates.
- color : Champ de sélection de couleur.
- Name (name) : L'attribut name attribue un nom au champ d'entrée, qui est utilisé pour identifier la valeur de ce champ lorsqu'un formulaire est soumis.
- Value (value) : L'attribut value définit la valeur par défaut du champ d'entrée. Cela peut être utile pour pré-remplir un champ avec une valeur spécifique.
- Placeholder (placeholder) : L'attribut placeholder permet de fournir un texte indicatif ou une suggestion pour l'utilisateur, qui disparaît lorsque l'utilisateur commence à saisir.
- Required (required) : Lorsque l'attribut required est présent, l'utilisateur doit remplir ce champ avant de soumettre le formulaire.
- Disabled (disabled) : L'attribut disabled désactive le champ d'entrée, ce qui signifie qu'il ne peut pas être modifié ni soumis.
- Autres attributs spécifiques au type : Certains types d'entrées (comme date, email, number, etc.) ont des attributs spécifiques qui leur sont propres pour définir des contraintes ou des formats de saisie.
3. Exemple d'usage de la balise <input>
Voici un exemple simple d'utilisation de la balise <input> pour créer un champ de texte :
1 2 |
<label for="nom">Nom :</label> <input type="text" id="nom" name="nom" placeholder="Entrez votre nom" required> |
Explication:
- <input>: permet de créer un champ de texte où les utilisateurs peuvent saisir leur nom.
- L'attribut name : est utilisé pour identifier ce champ dans le formulaire,
- placeholder : fournit un texte indicatif,
- required : rend obligatoire la saisie de ce champ pour soumettre le formulaire.
Exemple complet (formulaire identification)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulaire d'Identification</title> </head> <body> <h1>Connexion</h1> <form action="/votre-page-de-traitement" method="post"> <pre> <!-- Champ pour l'identifiant (nom d'utilisateur ou e-mail) --> <label for="identifiant">Identifiant :</label> <input type="text" id="identifiant" name="identifiant" placeholder="Entrez votre nom d'utilisateur ou e-mail" required> <!-- Champ pour le mot de passe --> <label for="motDePasse">Mot de passe :</label> <input type="password" id="motDePasse" name="motDePasse" placeholder="Entrez votre mot de passe" required> <!-- Bouton de soumission du formulaire --> <button type="submit">Se Connecter</button> </pre> </form> </body> </html> |
Younes Derfoufi
CRMEF OUJDA
1 thought on “La balise <input> HTML”