Ce que vous devez savoir sur les inputs en HTML et leurs attributs

Les inputs HTML jouent un rôle essentiel dans la création de formulaires interactifs sur le web. Ils permettent aux utilisateurs de saisir et de soumettre des informations facilement. Dans cet article, nous explorerons en détail les inputs en HTML, en mettant l’accent sur les différents types et attributs disponibles. Nous fournirons des explications détaillées et des exemples de code pour chaque attribut, afin de faciliter votre compréhension et votre mise en pratique. Préparez-vous à découvrir les bases techniques des inputs en HTML !

I. Les types d’inputs et leurs utilisations

1. Text (texte) : Ce type d’input permet aux utilisateurs de saisir du texte. Il est généralement utilisé pour les noms, les commentaires, les adresses, etc.
2. Number (nombre) : Cet input est utilisé pour collecter des valeurs numériques.
3. Email : L’input de type « email » est conçu pour collecter les adresses e-mail.
4. Password (mot de passe) : Ce type d’input masque les caractères saisis, idéal pour la saisie de mots de passe.
5. Checkbox (case à cocher) : L’input de type « checkbox » permet à l’utilisateur de sélectionner une ou plusieurs options.
6. Radio : Les inputs de type « radio » permettent à l’utilisateur de choisir une seule option parmi un ensemble d’options.
7. Date (date) : Ce type d’input affiche un calendrier permettant à l’utilisateur de sélectionner une date.
8. File (fichier) : L’input de type « file » permet aux utilisateurs de télécharger des fichiers depuis leur ordinateur.

II. Les attributs d’inputs et leur utilisation

1. Placeholder (indication) : L’attribut « placeholder » affiche un texte d’indication à l’intérieur de l’input.
2. Required (obligatoire) : L’attribut « required » spécifie que l’input doit être rempli avant de soumettre le formulaire.
3. Disabled (désactivé) : L’attribut « disabled » désactive l’input, empêchant l’utilisateur de le modifier.
4. Readonly (lecture seule) : L’attribut « readonly » rend l’input en lecture seule, empêchant l’utilisateur de modifier sa valeur.
5. Maxlength (longueur maximale) : L’attribut « maxlength » spécifie le nombre maximum de caractères pouvant être saisis.
6. Autocomplete : L’attribut « autocomplete » permet au navigateur de suggérer automatiquement des valeurs précédemment saisies.

III. Glossaire des types et attributs d’inputs

Types

• Button : Crée un bouton cliquable.
• Checkbox : Permet à l’utilisateur de sélectionner une ou plusieurs options.
• Color : Permet de choisir une couleur à partir d’un sélecteur de couleurs.
• Date : Affiche un calendrier pour la sélection d’une date.
• Email : Collecte une adresse e-mail.
• File : Permet aux utilisateurs de télécharger des fichiers.
• Hidden : Cache l’input de manière invisible pour l’utilisateur.
• Image : Affiche une image cliquable.
• Month : Permet de choisir un mois et une année.
• Number : Collecte des valeurs numériques.
• Password : Saisie d’un mot de passe masqué.
• Radio : Permet à l’utilisateur de choisir une seule option parmi un groupe d’options.
• Range : Permet de sélectionner une valeur numérique dans une plage spécifiée.
• Reset : Réinitialise le formulaire à ses valeurs par défaut.
• Search : Collecte une chaîne de recherche.
• Submit : Soumet le formulaire.
• Tel : Collecte un numéro de téléphone.
• Text : Collecte du texte.
• Time : Collecte une heure.
• URL : Collecte une URL.
• Week : Permet de choisir une semaine de l’année.

Attributs

• Accept : Spécifie les types de fichiers acceptés lors de l’utilisation de l’input « file ».
• Alt : Fournit un texte alternatif pour les images.
• Autocomplete : Active ou désactive la fonction de saisie semi-automatique du navigateur.
• Capture : Spécifie la méthode de capture d’une image ou d’une vidéo à partir de l’appareil photo ou du microphone.
• Checked : Indique que l’input de type « checkbox » ou « radio » est pré-sélectionné.
• Dirname : Spécifie le nom du répertoire lors de l’envoi de fichiers.
• Disabled : Désactive l’input pour l’utilisateur.
• Form : Spécifie le formulaire auquel l’input appartient.
• Formaction : Spécifie l’URL du script de traitement du formulaire.
• Formenctype : Spécifie le type d’encodage utilisé lors de l’envoi du formulaire.
• Formmethod : Spécifie la méthode d’envoi des données du formulaire.
• Formnovalidate : Désactive la validation des contraintes du formulaire lors de la soumission.
• Formtarget : Spécifie où afficher les résultats du formulaire après la soumission.
• Height : Définit la hauteur de l’input.
• List : Spécifie l’ID de l’élément « datalist » associé pour fournir des suggestions.
• Max : Spécifie la valeur maximale pour les inputs de type « number », « date », « range », etc.
• Maxlength : Spécifie le nombre maximum de caractères autorisés pour la saisie.
• Min : Spécifie la valeur minimale pour les inputs de type « number », « date », « range », etc.
• Minlength : Spécifie le nombre minimum de caractères requis pour la saisie.
• Multiple : Permet à l’utilisateur de sélectionner plusieurs fichiers lors de l’utilisation de l’input « file ».
• Name : Spécifie le nom de l’input.
• Pattern : Spécifie une expression régulière pour valider la saisie de l’utilisateur.
• Placeholder : Affiche un texte d’indication à l’intérieur de l’input.
• Readonly : Rend l’input en lecture seule.
• Required : Spécifie que l’input est obligatoire et doit être rempli.
• Size : Définit la largeur visible de l’input.
• Src : Spécifie l’URL de l’image affichée par l’input « image ».
• Step : Spécifie l’incrément utilisé lors de la sélection de valeurs pour les inputs de type « number » ou « range ».
• Type : Définit le type d’input.
• Value : Spécifie la valeur par défaut de l’input.
• Width : Définit la largeur de l’input.

Conclusion 

Les inputs en HTML sont des éléments essentiels pour créer des formulaires interactifs sur le web. Dans cet article, nous avons exploré différents types d’inputs et leurs utilisations, en mettant en évidence les attributs clés qui permettent de personnaliser leur comportement. En comprenant et en maîtrisant ces concepts, vous pourrez créer des formulaires conviviaux et interactifs qui répondent aux besoins des utilisateurs. N’hésitez pas à expérimenter avec les exemples de code fournis et à adapter les attributs en fonction de vos besoins spécifiques.

Site MDN