: L’élément Input (Form Input)

accept

Valable pour le type d’entrée file uniquement, l’attribut accept définit les types de fichiers sélectionnables dans un contrôle de téléchargement file. Voir le type d’entrée du fichier.

alt

Valable pour le bouton image uniquement, le fournit un texte alternatif pour l’image, affichant la valeur de l’attribut si l’image src est manquante ou ne parvient pas à se charger. Voir le type d’entrée d’image.

autocomplete

(Pas un attribut booléen!) L’attribut autocomplete prend comme valeur une chaîne séparée par des espaces qui décrit, le cas échéant, le type de fonctionnalité de saisie semi-automatique que l’entrée doit fournir. Une implémentation typique de la saisie semi-automatique rappelle les valeurs précédentes entrées dans le même champ de saisie, mais des formes plus complexes de saisie semi-automatique peuvent exister. Par exemple, un navigateur peut s’intégrer à la liste de contacts d’un appareil pour saisir automatiquement les adresses email dans un champ de saisie d’e-mail. Voir Valeurs dans l’attribut de saisie semi-automatique HTML pour les valeurs autorisées.

L’attribut autocomplete est valide sur hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color et password. Cet attribut n’a aucun effet sur les types d’entrée qui ne renvoient pas de données numériques ou textuelles, étant valide pour tous les types d’entrée sauf checkbox, radio, file, ou l’un des types de bouton.

Voir L’attribut de saisie semi-automatique HTML f ou des informations supplémentaires, y compris des informations sur la sécurité des mots de passe et en quoi autocomplete est légèrement différent pour hidden que pour les autres types d’entrée.

autofocus

Un attribut booléen qui, s’il est présent, indique que l’entrée doit automatiquement avoir le focus lorsque la page a fini de se charger (ou lorsque le <dialog> contenant l’élément a été affiché).

Remarque: Un élément avec l’attribut autofocus peut gagner le focus avant le DOMContentLoaded est déclenché.

Pas plus d’un élément du document ne peut avoir l’attribut autofocus. S’il est placé sur plus d’un élément, le premier avec l’attribut reçoit le focus.

L’attribut autofocus ne peut pas être utilisé sur les entrées de type hidden, car les entrées masquées ne peuvent pas être ciblées.

Avertissement: la mise au point automatique d’un contrôle de formulaire peut confondre les personnes malvoyantes utilisant la technologie de lecture d’écran et les personnes souffrant de troubles cognitifs. Lorsque autofocus est assigné, les lecteurs d’écran « téléportent » leur utilisateur vers le contrôle de formulaire sans les avertir au préalable.

Soyez attentif à l’accessibilité lorsque appliquer l’attribut autofocus. La mise au point automatique sur un contrôle peut entraîner le défilement de la page lors du chargement. La mise au point peut également entraîner l’affichage de claviers dynamiques sur certains appareils tactiles. Alors qu’un lecteur d’écran annoncera le libellé du contrôle de formulaire recevant le focus, le lecteur d’écran n’annoncera rien avant le libellé, et l’utilisateur voyant sur un petit appareil manquera également le contexte créé par le contenu précédent.

capture

Introduit dans la spécification HTML Media Capture et valide pour le type d’entrée file uniquement, le capture définit quel support (microphone, vidéo ou caméra) doit être utilisé pour capturer un nouveau fichier à télécharger avec file contrôle de téléchargement dans les scénarios de prise en charge. Voir le type d’entrée du fichier.

checked

Valable pour radio et checkbox types, checked est un attribut booléen. S’il est présent sur un type radio, il indique que le bouton radio est celui actuellement sélectionné dans le groupe de boutons radio du même nom. S’il est présent sur un type checkbox, il indique que la case est cochée par défaut (lors du chargement de la page). Il n’indique pas si cette case est actuellement cochée: si l’état de la case à cocher est modifié, cet attribut de contenu ne reflète pas le changement. (Seul l’attribut IDL HTMLInputElement checked est mis à jour.)

Remarque: contrairement à d’autres contrôles d’entrée, une valeur de cases à cocher et de boutons radio n’est incluse dans les données soumises que si elles sont actuellement checked. Si tel est le cas, le nom et la ou les valeurs des contrôles cochés sont soumis.

Par exemple, si une case à cocher dont name est fruit a un value de cherry, et la case est cochée, les données du formulaire soumises incluront fruit=cherry. Si la case à cocher n’est pas active, elle n’est pas du tout répertoriée dans les données du formulaire. La valeur par défaut value pour les cases à cocher et les boutons radio est on.

dirname

Valable pour les types d’entrée text et search uniquement, les dirname L’attribut permet de soumettre la directionnalité de l’élément. Lorsqu’il est inclus, le contrôle de formulaire sera soumis avec deux paires nom / valeur: la première étant name et value, la seconde étant la valeur du dirname comme nom avec la valeur de ltr ou rtl étant définie par le navigateur.

Lorsque le formulaire ci-dessus est soumis, l’entrée provoque à la fois la paire name / value de fruit=cherry et la dirname / direction paire de fruit.dir=ltr à envoyer.

disabled

Un attribut booléen qui, s’il est présent, indique que l’utilisateur ne devrait pas pouvoir interagir avec l’entrée. Les entrées désactivées sont généralement rendues avec une couleur plus faible ou en utilisant une autre forme d’indication que le champ n’est pas disponible pour utilisation.

Plus précisément, les entrées désactivées ne reçoivent pas le click et les entrées désactivées ne sont pas soumises avec le formulaire.

Remarque: bien que cela ne soit pas requis par la spécification, Firefox conservera par défaut l’état de désactivation dynamique d’un <input> sur les chargements de page. Utilisez l’attribut autocomplete pour contrôler cette fonctionnalité.

form

Une chaîne spécifiant le <form> élément auquel l’entrée est associée (c’est-à-dire son propriétaire de formulaire). La valeur de cette chaîne, si elle est présente, doit correspondre à id d’un élément <form> dans le même document. Si cet attribut n’est pas « t spécifié, l’élément <input> est associé au formulaire contenant le plus proche, le cas échéant.

L’attribut form vous permet placez une entrée n’importe où dans le document mais incluez-la avec un formulaire ailleurs dans le document.

Remarque: Une entrée ne peut être associée qu’à un seul formulaire.

formaction

Valable uniquement pour les types d’entrée image et submit. Voir le type d’entrée d’envoi pour plus d’informations.

formenctype

Valable pour image et submit types d’entrée uniquement. Pour plus d’informations, reportez-vous au type d’entrée d’envoi.

formmethod

Valable pour image et submit types d’entrée uniquement. Pour plus d’informations, reportez-vous au type d’entrée d’envoi.

formnovalidate

Valable pour image et submit types d’entrée uniquement. Pour plus d’informations, reportez-vous au type d’entrée d’envoi.

formtarget

Valable pour image et submit types d’entrée uniquement. Pour plus d’informations, reportez-vous au type d’entrée d’envoi.

height

Valable pour le bouton d’entrée image uniquement, le height est la hauteur du fichier image à afficher pour représenter le bouton graphique d’envoi. Voir le type d’entrée d’image.

id

Attribut global valide pour tous les éléments, y compris tous les types d’entrée, il définit un identifiant unique (ID) qui doit être unique dans tout le document. Son but est d’identifier l’élément lors de la liaison. La valeur est utilisée comme valeur de l’attribut <label> « s for pour lier le libellé au contrôle de formulaire. Voir <label>.

inputmode

Valeur globale valide pour tous les éléments, elle fournit un indice aux navigateurs quant au type de configuration du clavier virtuel à à utiliser lors de la modification de cet élément ou de son contenu. Les valeurs incluent none, text, tel, url, email, numeric, decimal et search.

list

La valeur donnée à l’attribut list doit être id d’un élément <datalist> situé dans le même document. Le <datalist> fournit une liste de valeurs prédéfinies à suggérer à l’utilisateur pour cette entrée. Toutes les valeurs de la liste qui ne sont pas compatibles avec type ne sont pas incluses dans les options suggérées. Les valeurs fournies sont des suggestions, pas des exigences: les utilisateurs peuvent choisir dans cette liste prédéfinie ou fournir une valeur différente.

Elle est valide sur text, search, url, tel, email, date, month, week, time, datetime-local, number, range et color.

Selon les spécifications, l’attribut list n’est pas pris en charge par hidden, password, checkbox, radio, file ou tout des types de boutons.

Selon le navigateur, l’utilisateur peut voir une palette de couleurs personnalisée suggérée, des marques de graduation le long d’une plage, ou même une entrée qui s’ouvre comme un <select> mais autorise les va non listés syphilis. Consultez le tableau de compatibilité du navigateur pour les autres types d’entrée.

Voir l’élément <datalist>.

max

Valable pour date, month, week, time, datetime-local, number et range, il définit la plus grande valeur dans la plage de valeurs autorisées. Si le value entré dans l’élément dépasse cette valeur, l’élément échoue à la validation de la contrainte. Si la valeur de l’attribut max n’est pas un nombre, alors l’élément n’a pas de valeur maximale.

Il existe un cas particulier: si le type de données est périodique (comme pour les dates ou les heures), la valeur de max peut être inférieure à la valeur de min, ce qui indique que la plage peut boucler; par exemple, cela vous permet de spécifier une plage horaire de 22 h 00 à 4 h 00.

maxlength

Valable pour text, search, url, tel, email et password, il définit le nombre maximal de caractères (en unités de code UTF-16) que l’utilisateur peut saisir dans le champ. Il doit s’agir d’une valeur entière 0 ou version ultérieure. Si aucun maxlength n’est spécifié ou si une valeur non valide est spécifiée, le champ n’a pas de longueur maximale. Cette valeur doit également être supérieur ou égal à la valeur de .

L’entrée échouera à la validation de la contrainte si la longueur du texte saisi dans le champ est supérieure à maxlength Unités de code UTF-16 de long. Par défaut, les navigateurs empêchent les utilisateurs de saisir plus de caractères que ne le permet l’attribut maxlength. Voir Validation côté client pour plus d’informations.

min

Valable pour date, month, week, time, datetime-local, number et range, il définit la valeur la plus négative dans la plage de valeurs autorisées. Si le value entré dans l’élément est inférieur à cela, l’élément échoue à la validation de la contrainte. Si la valeur de l’attribut min n’est pas un nombre, alors l’élément n’a pas de valeur minimale.

Cette valeur doit être inférieure ou égale à la valeur de l’attribut max. Si l’attribut min est présent mais n’est pas spécifié ou n’est pas valide, aucun min est appliqué. Si l’attribut min est valide et qu’une valeur non vide est inférieure au minimum autorisé par min attribut, la validation de contrainte empêchera l’envoi du formulaire. Voir Validation côté client pour plus d’informations.

Il existe un cas particulier: si le type de données est périodique (comme pour les dates ou les heures), la valeur de max peut être inférieur à la valeur de min, ce qui indique que la plage peut être bouclée; par exemple, cela vous permet de spécifier une heure gamme de 22 h 00 à 4 h 00.

minlength

Valable pour text, search, url, tel, email et password, il définit le nombre minimum de caractères (en unités de code UTF-16) que l’utilisateur peut saisir dans le champ de saisie. Il doit s’agir d’une valeur entière non négative inférieure ou égale à la valeur spécifiée par maxlength. Si aucun minlength n’est spécifié, ou si une valeur non valide est spécifiée, l’entrée n’a pas de longueur minimale.

L’entrée échouera la validation de la contrainte si la longueur du texte entrée dans le champ est inférieure à minlength unités de code UTF-16, ce qui empêche l’envoi du formulaire. Voir Validation côté client pour plus d’informations.

multiple

L’attribut booléen multiple, s’il est défini, signifie l’utilisateur peut saisir des adresses e-mail séparées par des virgules dans le widget e-mail ou choisir plusieurs fichiers avec l’entrée file. Voir l’e-mail et le type d’entrée du fichier.

name

Une chaîne spécifiant un nom pour le contrôle d’entrée. Ce nom est soumis avec la valeur du contrôle lorsque les données du formulaire sont soumises.

Que contient un nom

Considérez le name un attribut obligatoire (même si ce n’est pas le cas). Si une entrée n’a pas de name spécifié, ou si name est vide, le la valeur de l ‘entrée n’est pas soumise avec le formulaire! (Les commandes désactivées, les boutons radio non cochés, les cases à cocher non cochées et les boutons de réinitialisation ne sont pas non plus envoyés.)

Il existe deux cas particuliers:

  1. _charset_: Si utilisé comme nom d’un élément <input> de type hidden, l’entrée « s value est automatiquement définie par l’agent utilisateur au codage de caractères utilisé pour soumettre le formulaire.
  2. isindex: pour des raisons historiques, le nom isindex n’est pas autorisé.
nom et boutons radio

L’attribut name crée un comportement unique pour les boutons radio.

Un seul bouton radio dans un groupe de boutons radio portant le même nom peut être coché à la fois. La sélection d’un bouton radio dans ce groupe désélectionne automatiquement tout bouton radio actuellement sélectionné dans le même groupe. La valeur de qu’un bouton radio coché est envoyé avec le nom si le formulaire est soumis,

Lors de la tabulation dans une série de -nommé groupe de boutons radio, si l’un d’entre eux est coché, celui-ci recevra le focus. S’ils ne sont pas regroupés dans l’ordre source, si l’un des groupes est coché, la tabulation dans le groupe commence lorsque le premier du groupe est rencontré, en ignorant tous ceux qui ne sont pas cochés. En d’autres termes, si une case est cochée, la tabulation saute les boutons radio non cochés dans le groupe. Si aucun n’est coché, le groupe de boutons radio reçoit le focus lorsque le premier bouton du même groupe de nom est atteint.

Une fois que l’un des boutons radio d’un groupe a le focus, l’utilisation des touches fléchées permet de parcourir tout les boutons radio du même nom, même si les boutons radio ne sont pas regroupés dans l’ordre source.

HTMLFormElement.elements

Lorsqu’un élément d’entrée reçoit un name, ce nom devient une propriété de la propriété HTMLFormElement.elements de l’élément de formulaire propriétaire. Si vous avez une entrée dont name est défini sur guest et un autre dont name est hat-size, le code suivant peut être utilisé:

Une fois ce code exécuté, guestName sera le HTMLInputElement pour le champ guest et hatSize l’objet pour le hat-size champ.

Attention: évitez de donner aux éléments du formulaire un name qui correspond à une propriété intégrée du formulaire, car vous remplaceriez alors la propriété ou la méthode prédéfinie par cette référence à l’entrée correspondante.

pattern

L’attribut pattern, lorsqu’il est spécifié, est une expression régulière que le L’entrée « s value doit correspondre pour que la valeur réussisse la validation de la contrainte. Il doit s’agir d’une expression régulière JavaScript valide, telle qu’utilisée par le type RegExp, et comme documenté dans notre guide sur les expressions régulières; l’indicateur "u" est spécifié lors de la compilation de l’expression régulière, de sorte que le modèle est traité comme une séquence de points de code Unicode, au lieu d’être ASCII. Aucune barre oblique ne doit être spécifiée autour du texte du modèle.

Si l’attribut pattern est présent mais n’est pas spécifié ou n’est pas valide, aucune expression régulière n’est appliquée et ceci l’attribut est complètement ignoré.Si l’attribut de modèle est valide et qu’une valeur non vide ne correspond pas au modèle, la validation de contrainte empêchera l’envoi du formulaire.

Conseil: Si vous utilisez pattern attribut, informe l’utilisateur du format attendu en incluant un texte explicatif à proximité. Vous pouvez également inclure un attribut title pour expliquer les exigences pour correspondre au modèle; la plupart des navigateurs afficheront ce titre sous forme d’info-bulle. L’explication visible est requise pour l’accessibilité. L’info-bulle est une amélioration.

Voir Validation côté client pour plus d’informations.

placeholder

Le L’attribut placeholder est une chaîne qui fournit un bref indice à l’utilisateur sur le type d’informations attendues dans le champ. Il doit s’agir d’un mot ou d’une courte phrase qui fournit une indication sur le type de données attendu, plutôt qu’une explication ou une invite. Le texte ne doit pas inclure de retours chariot ni de sauts de ligne. Ainsi, par exemple, si un champ doit capturer le prénom d’un utilisateur et que son libellé est « Prénom », un espace réservé approprié peut être « par ex. Mustafa « .

Remarque: L’attribut placeholder n’est pas aussi sémantiquement utile que d’autres moyens d’expliquer votre formulaire et peut provoquer des problèmes techniques inattendus avec votre Pour plus d’informations, reportez-vous à la section Étiquettes dans < input >: l’élément Input (Form Input).

readonly

Un attribut booléen qui, s’il est présent, indique que l’utilisateur ne devrait pas pouvoir modifier la valeur de l’entrée. Le readonly est pris en charge text, search, url, tel, email, date, month, week, time, datetime-local, number et password types d’entrée.

Voir l’attribut HTML: readonly pour plus d’informations.

required est un attribut booléen qui, s’il est présent, indique que l’utilisateur doit spécifier une valeur pour l’entrée avant que le formulaire propriétaire puisse être soumis. L’attribut required est pris en charge par text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio et file entrées.

Voir Validation côté client et l’attribut HTML: required pour plus d’informations.

sizeValable pouremail,password,telettextinputtypes uniquement. Spécifie la quantité d’entrée affichée. Crée essentiellement le même résultat que la définition de la propriété CSSwidthavec quelques spécialités. L’unité réelle de la valeur dépend du type d’entrée. Pourpasswordettext, il s’agit d’un nombre de caractères (ou d’unitésem) avec une valeur par défaut de20, et pour les autres, il s’agit depixels. La largeur CSS a priorité sur l’attribut size.src

Valable pour le bouton d’entrée image uniquement, le src est une chaîne spécifiant l’URL du fichier image à afficher pour représenter le bouton graphique d’envoi. Voir le type d’entrée de l’image.

step

Valable pour les types d’entrée numériques, y compris number, date / time types d’entrée, et range, l’attribut step est un nombre qui spécifie la granularité à laquelle la valeur doit adhérer.

S’il n’est pas explicitement inclus:

  • step prend la valeur par défaut de 1 pour number et range.
  • Pour les types d’entrée date / heure, step est exprimé en secondes, le pas par défaut étant de 60 secondes . Le facteur d’échelle du pas est de 1000 (ce qui convertit les secondes en millisecondes, comme utilisé dans d’autres algorithmes).

La valeur doit être un nombre positif (entier ou flottant) ou la valeur spéciale any, ce qui signifie qu’aucune progression n’est implicite et que toute valeur est autorisée (sauf autres contraintes, telles que min et max).

Si any n’est pas défini explicitement, des valeurs valides pour le number, les types d’entrée date / heure et range les types d’entrée sont égaux à la base du pas à pas – la valeur min et les incréments de la valeur du pas, jusqu’à max valeur, si spécifiée.

Par exemple, si vous avez <input type="number" min="10" step="2">, alors n’importe quel entier pair, 10 ou supérieur, est valide. Si omis, <input type="number">, tout entier est valide, mais les flottants (comme 4.2) ne sont pas valides, car step est défini par défaut sur 1. Pour que 4.2 soit valide, step aurait dû être défini sur any, 0,1 , 0.2 ou n’importe quelle valeur de min aurait dû être un nombre se terminant par .2, comme <input type="number" min="-5.2">

Remarque: Lorsque les données saisies par l’utilisateur ne respectent pas la configuration pas à pas, la valeur est considérée comme invalide lors de la validation de contraint et correspondra à :invalid pseudoclass.

Voir Validation côté client pour plus d’informations.

tabindex

Attribut global valide pour tous les éléments, y compris tous les types d’entrée, un attribut entier indiquant si l’élément peut prendre le focus d’entrée (est focalisable), s’il doit participer à la navigation séquentielle au clavier. Comme tous les types d’entrée à l’exception de l’entrée de type masqué sont focalisables, cet attribut ne doit pas être utilisé sur les contrôles de formulaire, car cela nécessiterait la gestion du focus nous commandons tous les éléments du document avec le risque de nuire à la convivialité et à l’accessibilité si cela est fait de manière incorrecte.

title

Attribut global valide pour tous les éléments, y compris tous les types d’entrée , contenant un texte représentant des informations consultatives liées à l’élément auquel il appartient. De telles informations peuvent généralement, mais pas nécessairement, être présentées à l’utilisateur sous la forme d’une info-bulle. Le titre ne doit PAS être utilisé comme l’explication principale de l’objectif du contrôle de formulaire. À la place, utilisez l’élément <label> avec un attribut for défini sur le contrôle de formulaire « s id attribut. Voir Libellés ci-dessous.

type

Une chaîne spécifiant le type de contrôle à afficher. Par exemple, pour créer une case à cocher, une valeur de checkbox est utilisé. S’il est omis (ou si une valeur inconnue est spécifiée), le type d’entrée text est utilisé, créant un champ d’entrée en texte brut.

Les valeurs autorisées sont répertoriées dans les types <input> ci-dessus.

value

La valeur du contrôle d’entrée. Lorsqu’elle est spécifiée dans le HTML, il s’agit de la valeur initiale, et à partir de là, elle peut être modifiée ou récupérée à tout moment en utilisant JavaScript pour accéder aux HTMLInputElement object « respectifs value. L’attribut value est toujours facultatif, mais doit être considéré comme obligatoire pour checkbox, radio, et hidden.

width

Valable pour image bouton de saisie uniquement, width est la largeur du fichier image à afficher pour représenter le bouton graphique d’envoi. Voir le type d’entrée d’image.

Leave a Reply

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *