Guide exhaustif avec tous types et utilisations expliquées

Si vous vous immergez dans le monde du développement Web, il y a un élément fondamental dont vous devez avoir une connaissance approfondie: le En html. Ce bloc de code petit mais polyvalent est chargé de faciliter l'une des fonctions les plus essentielles sur n'importe quelle page Web moderne: interaction utilisateur avec les formulaires. En envoyant un nom simple, en choisissant une date ou en téléchargeant un fichier, via les validations et l'accessibilité, l'entrée fait pratiquement tout.

Connaître complètement Comment fonctionne l'étiquette ses différents types et attributs, Il est essentiel de manipuler l'expérience utilisateur, de collecter des informations et de donner vie à nos projets Web. Dans cet article, nous allons vous dire absolument tout clairement, détaillé et avec des exemples, afin que vous n'ayez pas fin. Préparez-vous à découvrir tout ce que vous devez savoir sur les entrées dans HTML.

Quelle est l'étiquette En html?

L'étiquette C'est un composant de base utilisé dans les formulaires HTML. Il sert à capturer des informations utilisateur via différents mécanismes tels que les champs de texte, les boutons de sélection, les listes de drop -down ou les téléchargements de fichiers. Pour plus d'informations sur d'autres fonctionnalités importantes, nous vous recommandons de lire sur le sujet dans le contexte des fonctions d'entrée dans HTML.

Chaque type d'entrée est défini par l'attribut type. Cet attribut détermine le comportement spécifique et l'apparence du champ. S'il n'est pas spécifié, par défaut il est interprété comme text.

Sa structure générale est très simple:

Même s'il s'agit d'une étiquette auto-contenue (elle ne ferme pas avec ), esta puede personalizarse ampliamente con otros atributos que modifican su valor, visibilidad, validación y comportamiento.

Liste complète des types d'entrée

HTML5 a considérablement étendu le nombre de types possibles . Voici une ventilation des plus utilisés et comment ils fonctionnent:

• Texte: Champ de texte unique. Idéal pour les noms, les adresses, etc.
• Mot de passe: Semblable au texte, mais cache les caractères introduits. Parfait pour les mots de passe.
• e-mail: Acceptez les adresses e-mail et validez le format avant l'envoi.
• Nombre: Il vous permet de saisir uniquement des numéros. Vous pouvez ajouter min, max et step.
• Tél: Pour introduire des numéros de téléphone sans validation stricte.
• URL: Validez qu'une adresse Web bien formée est écrite.
• Date: Sélectionnez les dates dans un calendrier intégré.
• Temps: Utilisez une horloge pour choisir une heure.
• DateTime-local: Date et heure sans fuseau horaire.
• mois: Vous permet de ne sélectionner que le mois et l'année.
• Semaine: Sélectionnez la semaine de l'année.
• Box de cocher: Boîtes de vérification pour plusieurs options.
• radio: Sélection unique entre plusieurs options.
• Déposer: Vous permet de télécharger des fichiers locaux.
• Gamme: Contrôle coulissant pour sélectionner un nombre.
• couleur: Sélecteur graphique couleur.
• Recherche: Champs optimisés pour les recherches.
• Image: Bouton d'expédition graphique avec image intégrée.
• Soumettre: Bouton qui envoie le formulaire.
• Réinitialiser: Restaure les valeurs de la forme.
• Bouton: Bouton sans action prédéfinie. Il est combiné avec JavaScript.
• Caché: Champ invisible utilisé pour envoyer des valeurs sans interaction utilisateur.

Attributs les plus courants et utiles d'une entrée

Les entrées dans HTML peuvent être accompagnées de plusieurs attributs Ils contrôlent leur comportement spécifiquement. Certains des plus utilisés sont:

• patate douce: Associez un nom à la saisie qui sera utilisé comme clé lors de l'envoi du formulaire.
• Planiseur d'espèce: Il montre un texte indicatif dans le champ d'entrée.
• Requis: Force l'utilisateur à compléter le champ avant d'envoyer le formulaire.
• Readonly: Le champ est visible mais pas modifiable.
• Désactivé: Champ inactif, il ne peut pas être interagi et non envoyé au serveur.
• Valeur: Attribuez la valeur par défaut de l'entrée.
• MaxLength / MinLength: Définissez la longueur maximale ou minimale autorisée.
• Modèle: Il est utilisé pour définir une expression régulière de validation.
• Association automatique: Il permet ou empêche le navigateur de suggérer des valeurs précédemment utilisées.
• Autofocus: Placez automatiquement le curseur dans ce champ lors du chargement de la page.
• Étape: Indique les intervalles valides pour les entrées numériques. Ex: 5, 10, 0,01.
• Min / max: Valeurs minimales et maximales acceptées.
• multiple: Vous permet de télécharger plus d'un fichier ou de sélectionner plusieurs e-mails avec type="email".

Fixer avec le fichier d'entrée

L'une des utilisations les plus pratiques est l'entrée de type filequi permet à l'utilisateur d'élever des documents, des images ou tout fichier local. Pour avoir plus d'informations sur ce type de fonctionnalité, vous pouvez consulter plus sur la façon de gérer les entrées dans vos formulaires dans l'article de.

Exemple de base:

Para permitir subir varios archivos a la vez, solo hay que añadir el atributo multiple:

N'oubliez pas que ce type d'entrée ne fonctionne qu'avec la méthode = »post» et enype = »multipart / formulaire de forme».

De plus, vous pouvez définir des types de fichiers autorisés à l'aide de l'attribut accept:

Curseurs ou commandes de gamme

Le gars range Il permet d'inclure un contrôle coulissant. Il est utile lorsque la valeur exacte n'est pas cruciale, comme la sélection du volume, l'âge ou les gammes de prix estimées. Ce type d'entrée peut être considéré comme faisant partie d'une approche plus large de la personnalisation des formulaires, un sujet qui est également abordé.

Pour afficher la valeur actuelle du curseur, il est recommandé de le relier à une étiquette

et utilisez JavaScript pour le mettre à jour dynamiquement:

50

Champs de sélection: radio, case à cocher et sélectionner

Pour offrir plusieurs options à l'utilisateur, HTML fournit:

• Radio: Vous permet de sélectionner une seule option entre un groupe.
• Box de cocher: Il permet de marquer plusieurs options simultanément.
• Sélectionner: Afficher une liste avec des options personnalisables.

Exemple de radio:

 Rojo
 Azul

Exemple de la boîte à cocher:

 Lectura
 Cine

Accessibilité, compatibilité et bonnes pratiques

Pour garantir une bonne expérience utilisateur, il est essentiel de prendre en compte certains aspects techniques et d'accessibilité, qui sont essentiels lorsque vous travaillez avec des formulaires et des entrées. Si vous souhaitez approfondir ce type de recommandations, vous pouvez consulter.

• Utilisez toujours des étiquettes Pour décrire l'entrée et s'opposer à l'attribut for.
• Évitez d'utiliser les entrées de type text Pour les mots de passe, les e-mails ou les dates. Utilisez les bons types.
• Valider toujours les données sur la frontière et le backend. Les attributs HTML ne suffisent pas à empêcher les expéditions malveillantes.
• Vérifiez la compatibilité entre les navigateurs. Certains types ne sont pas disponibles dans tous (comme date en safari).
• Comprend des attributs tels que aria-label soit aria-describedby Si l'entrée manque de texte visible.

En appliquant ces recommandations, vos formulaires seront non seulement plus robustes, mais également inclusifs et accessibles à tout type d'utilisateur.

Il Il s'agit d'un outil super puissant dans HTML, qui va bien au-delà d'un simple champ de texte. De la collecte de courriels, de la facilitation des recherches, de l'autorisation des augmentations de fichiers ou de l'ajout de validations clés, son utilisation est indispensable. Connaissant en profondeur chacun de ses types et attributs, vous pouvez augmenter l'interaction et améliorer l'expérience Utilisateur aux niveaux professionnel.