5 attributs d'élément d'entrée les plus utiles que vous devez connaître

Lors de la création d'un site Web, ce que vous devez prioriser, c'est l'expérience utilisateur. Attributs d'élément d'entrée Si vous êtes dans le développement Web, vous devez être familiarisé avec le terme attributs d'élément d'entrée.

Dans ce blog, nous allons discuter de cela. Je vais vous expliquer la balise d'entrée et 5 doivent connaître les attributs d'entrée qui sont utilisés pour le développement Web.

Balise d'entrée

L'élément HTML d'entrée est une balise pratique pour créer des formulaires Web interactifs afin d'obtenir des données de l'utilisateur. Selon l'appareil et l'agent utilisateur, une grande variété de widgets de contrôle des données d'entrée sont disponibles.

La balise d'entrée est très puissante et complexe pour un grand nombre de combinaisons de types d'entrée et d'attributs.

Prenons un exemple de balise d'entrée. Ici, nous avons pris une balise d'entrée pour entrer le nom dans lequel l'utilisateur peut remplir un minimum de 4 caractères de son nom et un maximum de 8 caractères.

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

C'est donc ainsi que vous pouvez accepter les données de l'utilisateur. Il existe de nombreux types de balises d'entrée. Quelques-uns d'entre eux sont le texte, le bouton, la case à cocher, la radio, la date et l'heure locales, la plage, la recherche. Notez que la valeur par défaut de l'attribut type est "texte".

Il est important de noter que le comportement d'un <input> change de manière significative en fonction de la valeur de son attribut type ; par conséquent, les différents types sont décrits dans leurs propres pages de référence individuelles. Si cette propriété n'est pas fournie, le type de texte sera utilisé comme valeur par défaut.

Attributs d'entrée

L'élément <Input> est très puissant en raison de ses attributs. L'attribut type est très important à partir de là. Étant donné que chaque élément <input>, quel que soit son type, est basé sur l'interface HTMLInputElement, c'est parce qu'ils partagent presque tous les deux exactement le même ensemble d'attributs. Cependant, en réalité, cela a un effet sur un type spécifique de sous-ensemble de type d'entrée. De plus, certains attributs ont un impact sur un type d'entrée mais peuvent différer selon les différents attributs.

Nous avons répertorié ici quelques attributs de type Input essentiels qu'un développeur doit très bien connaître :

• Longueur minimale
• Longueur maximale
• Handicapé
• Mise au point automatique
• Espace réservé

Mini-longueur

Cet attribut ne fonctionne qu'avec le type text, search, tel, URL, email ou password dans l'élément d'entrée. L'attribut minlength spécifie le caractère minimum qui doit être saisi dans la zone de saisie, comme les unités de code UTF-16.

Il doit s'agir d'une valeur entière non négative inférieure ou égale à la valeur spécifiée dans maxlength. Si aucune valeur n'est donnée à minlength ou si une valeur non valide est spécifiée, l'entrée n'a pas de longueur minimale. La soumission du formulaire échouera si le nombre de caractères saisis dans la zone de saisie est inférieur à minlength.

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

Longueur maximale

Cet attribut ne fonctionne également qu'avec le type text, search, tel, URL, email ou password dans l'élément d'entrée comme minilength. L'attribut maxlength spécifie le caractère maximum à saisir dans la zone de saisie, comme les unités de code UTF-16.

Il doit s'agir d'une valeur entière non négative supérieure ou égale à la valeur spécifiée dans minlength. Si aucune valeur n'est donnée à maxlength ou si une valeur non valide est spécifiée, l'entrée n'a pas de longueur maximale.

Par défaut, les navigateurs empêchent l'utilisateur d'entrer le nombre de caractères dans la zone de saisie s'il est supérieur à la longueur maximale spécifiée.

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

Handicapé

Il s'agit d'un attribut booléen. Cet attribut indique que l'utilisateur ne doit pas interagir avec l'entrée.

Les entrées désactivées s'affichent spécifiquement dans une couleur plus sombre en utilisant une autre forme d'indication qu'elles ne sont pas disponibles pour utilisation. L'attribut désactivé ne reçoit pas l'événement de clic et la valeur du formulaire désactivé ne sera pas soumise avec la soumission du formulaire.

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

Mise au point automatique

Il s'agit également d'un attribut booléen comme l'attribut disabled. Cela indique que la zone de saisie est mise au point lorsque la page termine le processus de chargement. Ou lorsque l'élément input contenant l'attribut autofocus est affiché.

Pas plus d'un élément n'a obtenu l'attribut autofocus. S'il est mis avec plus d'un élément, le premier avec l'attribut sera focalisé puisque les entrées cachées ne peuvent pas être focalisées. Ainsi, l'attribut autofocus peut être utilisé avec les types d'entrée masqués.

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

Espace réservé

L'espace réservé est un attribut de chaîne. C'est un attribut qui donne une idée des données qui doivent être saisies dans le champ de saisie.

Il doit s'agir d'un mot ou d'une courte phrase indiquant le type de données à saisir dans le champ de saisie plutôt que d'une explication. Ainsi, par exemple, si un champ doit saisir le prénom d'un utilisateur et que son étiquette est "Prénom", un espace réservé approprié peut être "par exemple, Bruce".

L'image ci-dessous montre comment le code HTML sera affiché dans un éditeur.

L'image ci-dessous montre comment la sortie ci-dessus sera affichée dans un navigateur.

Emballer

Dans ce blog, je vous ai présenté quelques attributs d'éléments d'entrée que vous devez connaître, surtout si vous êtes un développeur Web. À l'aide de ces attributs, vous pouvez contrôler l'élément d'entrée de différentes manières dans un formulaire HTML ou une page Web.

Bien que de nombreux nouveaux attributs soient ajoutés de jour en jour, y compris dans le code HTML, ce ne sont là que quelques-uns des attributs incontournables.

J'espère que ce blog vous a été utile ! Besoin d'un coup de main sur les services de développement Web ou de conception Web? N'hésitez pas à nous contacter!

Editeur : Amrutha