diff options
Diffstat (limited to 'files/fr/web/html')
19 files changed, 3090 insertions, 996 deletions
diff --git a/files/fr/web/html/attributes/accept/index.html b/files/fr/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..90f1ff9bed --- /dev/null +++ b/files/fr/web/html/attributes/accept/index.html @@ -0,0 +1,168 @@ +--- +title: 'Attribut HTML : accept' +slug: Web/HTML/Attributes/accept +tags: + - Accept + - Attribute + - File + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/accept +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>accept</code></strong> prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une <a href="#unique_file_type_specifiers">spécification de type de fichier unique</a>, décrivant les types de fichiers à autoriser. La propriété <code>accept</code> est un attribut pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. Elle était prise en charge par l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, mais a été supprimée au profit de <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> dans HTML5.</p> + +<p>Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.</p> + +<p>Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un <code><input></code> comme celui-ci :</p> + +<pre class="brush: html"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<p>En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média :</p> + +<pre class="brush: html"><input type="file" id="soundFile" accept="audio/*"> +<input type="file" id="videoFile" accept="video/*"> +<input type="file" id="imageFile" accept="image/*"></pre> + +<p>L'attribut <code>accept</code> ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.</p> + +<p>Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.</p> + +<h2 id="examples">Exemples</h2> + +<p>Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.</p> + +<pre class="brush: html"><p> + <label for="soundFile">Sélectionnez un fichier audio :</label> + <input type="file" id="soundFile" accept="audio/*"> +</p> +<p> + <label for="videoFile">Sélectionnez un fichier vidéo :</label> + <input type="file" id="videoFile" accept="video/*"> +</p> +<p> + <label for="imageFile">Sélectionner des images :</label> + <input type="file" id="imageFile" accept="image/*" multiple> +</p></pre> + +<p>{{EmbedLiveSample('examples', '', 160)}}</p> + +<p>Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut <a href="multiple"><code>multiple</code></a> pour plus d'informations.</p> + +<h2 id="unique_file_type_specifiers">Spécification de type de fichier unique</h2> + +<p>Un <strong>spécificateur de type de fichier unique</strong> est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <code>file</code>. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :</p> + +<ul> + <li>Une extension de nom de fichier valide et insensible à la casse, commençant par un caractère point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code>, ou <code>.doc</code>.</li> + <li>Une chaîne de type MIME valide, sans extension.</li> + <li>La chaîne de caractères <code>audio/*</code> signifiant "tout fichier audio".</li> + <li>La chaîne de caractères <code>vidéo/*</code> signifiant "tout fichier vidéo".</li> + <li>La chaîne de caractères <code>image/*</code> signifiant "tout fichier image".</li> +</ul> + +<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :</p> + +<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="using_file_inputs">Utilisation des champs pour saisir des fichiers</h2> + +<h3 id="a_basic_example">Un exemple de base</h3> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choisissez le fichier à téléverser</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Soumettre</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Cela produit le résultat suivant :</p> + +<p>{{EmbedLiveSample('a_basic_example', 650, 100)}}</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous pouvez trouver cet exemple sur GitHub également - voir le <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">code source</a>, et aussi <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">le fonctionnement en direct</a>.</p> +</div> + +<p>Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.</p> + +<p>L'inclusion de l'attribut <a href="multiple"><code>multiple</code></a>, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd>, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <code><input></code>, omettez l'attribut <code>multiple</code>.</p> + +<h3 id="limiting_accepted_file_types">Restreindre les types de fichier acceptés</h3> + +<p>Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que <a href="/fr/docs/Glossary/jpeg">JPEG</a> ou <a href="/fr/docs/Glossary/PNG">PNG</a>.</p> + +<p>Les types de fichiers acceptables peuvent être spécifiés avec l'attribut <a href="/fr/docs/Web/HTML/Element/Input/file#attr-accept"><code>accept</code></a>, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :</p> + +<ul> + <li><code>accept="image/png"</code> ou <code>accept=".png"</code> — Accepter les fichiers PNG.</li> + <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> — Accepter les fichiers PNG ou JPEG.</li> + <li><code>accept="image/*"</code> — Accepter tout fichier ayant un type MIME <code>image/*</code>. (De nombreux appareils mobiles permettent également à l'utilisateur de prendre une photo avec l'appareil photo lorsque cette option est utilisée).</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Accepter tout ce qui ressemble à un document MS Word.</li> +</ul> + +<p>Examinons un exemple plus complet :</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choisissez le fichier à téléverser</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Soumettre</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.accept")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li> + <li><a href="/fr/docs/Web/API/File">L'API File</a></li> +</ul> diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html index 239834b0cd..8e26069dd5 100644 --- a/files/fr/web/html/attributes/autocomplete/index.html +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -1,172 +1,195 @@ --- -title: autocomplete +title: 'Attribut HTML : autocomplete' slug: Web/HTML/Attributes/autocomplete tags: - - Attribut + - Addresses + - Attribute + - Email addresses + - Forms - HTML - Input + - Phone Numbers - Reference + - Select + - Text + - Usernames + - autocomplete + - form + - passwords + - textarea translation_of: Web/HTML/Attributes/autocomplete original_slug: Web/HTML/Attributs/autocomplete --- -<div>{{HTMLSidebar("Global_attributes")}}</div> +<div>{{HTMLSidebar}}</div> -<p>L'attribut <code>autocomplete</code> est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. <span class="seoSummary"><code>autocomplete</code> permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.</span></p> +<p class="summary">L'attribut <code>autocomplete</code> est disponible sur les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>. <code>autocomplete</code> permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'<a href="/fr/docs/Glossary/User_agent">agent utilisateur</a>, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.</p> -<p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p> +<p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p> -<p>Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <code><input></code> ou l'élément <code><form></code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <code><input></code>).</p> +<p>Si les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c-à-d. l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> qui est l'ancêtre de l'élément <code><input></code> ou l'élément <code><form></code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée, dans l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-form"><code>form</code></a> de l'élément <code><input></code>).</p> -<p>Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.</p> +<p>Pour plus d'informations, voir la documentation de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-autocomplete"><code>autocomplete</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> +<div class="notecard note"> + <p><b>Note: </b></p> + <p>Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> -<ol> - <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li> - <li>Que ceux-ci descendent d'un élément <code><form></code></li> - <li>Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}</li> -</ol> + <ol> + <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li> + <li>Que ceux-ci descendent d'un élément <code><form></code></li> + <li>Que le formulaire associé ait un bouton <a href="/fr/docs/Web/HTML/Element/Input/submit">submit</a></li> + </ol> </div> -<h2 id="Valeurs">Valeurs</h2> +<h2 id="values">Valeurs</h2> <dl> - <dt><code>off</code></dt> - <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. - <div class="note"><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</div> - </dd> - <dt><code>on</code></dt> - <dd>Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.</dd> - <dt><code>name</code></dt> - <dd>Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : - <dl> - <dt><code>honorific-prefix</code></dt> - <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd> - <dt><code>given-name</code></dt> - <dd>Le prénom.</dd> - <dt><code>additional-name</code></dt> - <dd>Le deuxième prénom.</dd> - <dt><code>family-name</code></dt> - <dd>Le nom de famille.</dd> - <dt><code>honorific-suffix</code></dt> - <dd>Un suffixe (par exemple "Jr.").</dd> - <dt><code>nickname</code></dt> - <dd>Un surnom.</dd> - </dl> - </dd> - <dt><code>email</code></dt> - <dd>Une adresse électronique.</dd> - <dt><code>username</code></dt> - <dd>Un nom de compte ou un nom d'utilisateur.</dd> - <dt><code>new-password</code></dt> - <dd>Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.</dd> - <dt><code>current-password</code></dt> - <dd>Le mot de passe actuel de l'utilisateur.</dd> - <dt><code>one-time-code</code></dt> - <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd> - <dt><code>organization-title</code></dt> - <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd> - <dt><code>organization</code></dt> - <dd>Le nom d'une entreprise ou d'une organisation.</dd> - <dt><code>street-address</code></dt> - <dd>Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.</dd> - <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> - <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd> - <dt><code>address-level4</code></dt> - <dd>Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.</dd> - <dt><code>address-level3</code></dt> - <dd>Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.</dd> - <dt><code>address-level2</code></dt> - <dd>Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.</dd> - <dt><code>address-level1</code></dt> - <dd>Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.</dd> - <dt><code>country</code></dt> - <dd>Un code de pays.</dd> - <dt><code>country-name</code></dt> - <dd>Un nom de pays.</dd> - <dt><code>postal-code</code></dt> - <dd>Un code postal.</dd> - <dt><code>cc-name</code></dt> - <dd>Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.</dd> - <dt><code>cc-given-name</code></dt> - <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-additional-name</code></dt> - <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-family-name</code></dt> - <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-number</code></dt> - <dd>Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).</dd> - <dt><code>cc-exp</code></dt> - <dd>La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).</dd> - <dt><code>cc-exp-month</code></dt> - <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-exp-year</code></dt> - <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> - <dt><code>cc-csc</code></dt> - <dd>Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.</dd> - <dt><code>cc-type</code></dt> - <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd> - <dt><code>transaction-currency</code></dt> - <dd>La devise utilisée pour la transaction courante.</dd> - <dt><code>transaction-amount</code></dt> - <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd> - <dt><code>language</code></dt> - <dd>La langue préférée, indiquée sous la forme <a href="https://en.wikipedia.org/wiki/IETF_language_tag">d'une balise de langue valide selon BCP 47</a>.</dd> - <dt><code>bday</code></dt> - <dd>Une date de naissance complète.</dd> - <dt><code>bday-day</code></dt> - <dd>Le jour du mois de la date de naissance.</dd> - <dt><code>bday-month</code></dt> - <dd>Le mois de l'année de la date de naissance.</dd> - <dt><code>bday-year</code></dt> - <dd>L'année de la date de naissance.</dd> - <dt><code>sex</code></dt> - <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd> - <dt><code>tel</code></dt> - <dd>Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : - <dl> - <dt><code>tel-country-code</code></dt> - <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd> - <dt><code>tel-national</code></dt> - <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd> - <dt><code>tel-area-code</code></dt> - <dd>La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd> - <dt><code>tel-local</code></dt> - <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd> - </dl> - </dd> - <dt><code>tel-extension</code></dt> - <dd>Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.</dd> - <dt><code>impp</code></dt> - <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd> - <dt><code>url</code></dt> - <dd>Une URL, pertinente dans le contexte du formulaire.</dd> - <dt><code>photo</code></dt> - <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd> + <dt><code>off</code></dt> + <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</p> + </div> + </dd> + <dt><code>on</code></dt> + <dd>Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.</dd> + <dt><code>name</code></dt> + <dd>Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différentes structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : + <dl> + <dt><code>honorific-prefix</code></dt> + <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd> + <dt><code>given-name</code></dt> + <dd>Le prénom.</dd> + <dt><code>additional-name</code></dt> + <dd>Le deuxième prénom.</dd> + <dt><code>family-name</code></dt> + <dd>Le nom de famille.</dd> + <dt><code>honorific-suffix</code></dt> + <dd>Un suffixe (par exemple "Jr.").</dd> + <dt><code>nickname</code></dt> + <dd>Un surnom.</dd> + </dl> + </dd> + <dt><code>email</code></dt> + <dd>Une adresse électronique.</dd> + <dt><code>username</code></dt> + <dd>Un nom de compte ou un nom d'utilisateur.</dd> + <dt><code>new-password</code></dt> + <dd>Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé (voir aussi <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password">Empêcher le remplissage automatique avec autocomplete="new-password"</a>).</dd> + <dt><code>current-password</code></dt> + <dd>Le mot de passe actuel de l'utilisateur.</dd> + <dt><code>one-time-code</code></dt> + <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd> + <dt><code>organization-title</code></dt> + <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd> + <dt><code>organization</code></dt> + <dd>Le nom d'une entreprise ou d'une organisation.</dd> + <dt><code>street-address</code></dt> + <dd>Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.</dd> + <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> + <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd> + <dt><code>address-level4</code></dt> + <dd>Le niveau d'adresse le plus fin (<a href="#administrative_levels_in_addresses">niveau administratif</a>) lorsque les adresses ont quatre niveaux.</dd> + <dt><code>address-level3</code></dt> + <dd>Le troisième niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a> lorsque les adresses ont au moins trois niveaux administratifs.</dd> + <dt><code>address-level2</code></dt> + <dd>Le deuxième niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a> lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.</dd> + <dt><code>address-level1</code></dt> + <dd>Le premier niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a>. C'est généralement la région ou l'état dans lequel se situe l'adresse.</dd> + <dt><code>country</code></dt> + <dd>Un code de pays.</dd> + <dt><code>country-name</code></dt> + <dd>Un nom de pays.</dd> + <dt><code>postal-code</code></dt> + <dd>Un code postal.</dd> + <dt><code>cc-name</code></dt> + <dd>Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.</dd> + <dt><code>cc-given-name</code></dt> + <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-additional-name</code></dt> + <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-family-name</code></dt> + <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-number</code></dt> + <dd>Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).</dd> + <dt><code>cc-exp</code></dt> + <dd>La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).</dd> + <dt><code>cc-exp-month</code></dt> + <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-exp-year</code></dt> + <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd> + <dt><code>cc-csc</code></dt> + <dd>Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. Il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.</dd> + <dt><code>cc-type</code></dt> + <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd> + <dt><code>transaction-currency</code></dt> + <dd>La devise utilisée pour la transaction courante.</dd> + <dt><code>transaction-amount</code></dt> + <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd> + <dt><code>language</code></dt> + <dd>La langue préférée, indiquée sous la forme <a href="https://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF">d'une balise de langue valide selon BCP 47</a>.</dd> + <dt><code>bday</code></dt> + <dd>Une date de naissance complète.</dd> + <dt><code>bday-day</code></dt> + <dd>Le jour du mois de la date de naissance.</dd> + <dt><code>bday-month</code></dt> + <dd>Le mois de l'année de la date de naissance.</dd> + <dt><code>bday-year</code></dt> + <dd>L'année de la date de naissance.</dd> + <dt><code>sex</code></dt> + <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd> + <dt><code>tel</code></dt> + <dd>Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : + <dl> + <dt><code>tel-country-code</code></dt> + <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd> + <dt><code>tel-national</code></dt> + <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd> + <dt><code>tel-area-code</code></dt> + <dd>Le code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd> + <dt><code>tel-local</code></dt> + <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd> + </dl> + </dd> + <dt><code>tel-extension</code></dt> + <dd>Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.</dd> + <dt><code>impp</code></dt> + <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd> + <dt><code>url</code></dt> + <dd>Une URL, pertinente dans le contexte du formulaire.</dd> + <dt><code>photo</code></dt> + <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd> </dl> <p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p> -<div class="note"> -<p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir {{bug(654072)}}.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a>.</p> </div> -<h2 id="Les_niveaux_administratifs_pour_les_adresses">Les niveaux administratifs pour les adresses</h2> +<h2 id="examples">Exemples</h2> + +<pre class="brush: html"><div> + <label for="cc-number">Entrez votre numéro de carte de crédit</label> + <input name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="administrative_levels_in_addresses">Les niveaux administratifs pour les adresses</h2> <p>Les quatre niveaux administratifs pour les adresses (<code>address-level1</code> jusqu'à <code>address-level4</code>) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.</p> <p><code>address-level1</code> représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.</p> -<h3 id="Disposition_du_formulaire">Disposition du formulaire</h3> +<h3 id="form_layout_flexibility">Disposition du formulaire</h3> <p>Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.</p> -<h3 id="Variations">Variations</h3> +<h3 id="variations">Variations</h3> <p>La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.</p> -<h4 id="États-Unis">États-Unis</h4> +<h4 id="united_states">États-Unis</h4> <p>Aux États-Unis, une adresse s'écrit généralement comme suit :</p> @@ -179,51 +202,71 @@ original_slug: Web/HTML/Attributs/autocomplete <p>Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.</p> -<h4 id="Royaume-Uni">Royaume-Uni</h4> +<h4 id="united_kingdom">Royaume-Uni</h4> + +<p>Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité. Une adresse complète ressemblerait à ceci :</p> + +<p>103 Frogmarch Street<br> +Upper-Wapping<br> +Winchelsea<br> +TN99 8ZZ</p> + +<p>Les niveaux d'adresse sont les suivants :</p> + +<ul> + <li><code>address-level1</code> : La ville postale — "Winchelsea" dans ce cas.</li> + <li><code>address-line2</code> : La localité — "Upper-Wapping" dans ce cas.</li> + <li><code>address-line1</code> : Les détails de la maison/rue — "103 Frogmarch Street"</li> +</ul> -<p>Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.</p> +<p>Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et <code>address-line1</code> pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.</p> -<h4 id="Chine">Chine</h4> +<h4 id="china">Chine</h4> <p>La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.</p> -<h2 id="Spécifications">Spécifications</h2> +<p>Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :</p> + +<p>北京市东城区建国门北大街8号华润大厦17层1708单元<br> +邮编：100005</p> + +<h4 id="japan">Japon</h4> + +<p>Une adresse au Japon est généralement <strong>écrite sur une ligne</strong>, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans <strong>l'ordre inverse des États-Unis</strong>). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :</p> + +<p>〒381-0000<br> +長野県長野市某町123</p> + +<p>« 〒 » et les sept chiffres suivants indiquent le code postal.</p> + +<p><code>address-level1</code> est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. <code>address-level2</code> est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町123 » est<code>address-line1</code> qui se compose d'un nom de zone et d'un numéro de colis.</p> + +<h2 id="specifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}}</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("html.global_attributes.autocomplete")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>L'élément HTML {{htmlelement("input")}}</li> - <li>L'élément HTML {{htmlelement("select")}}</li> - <li>L'élément HTML {{htmlelement("textarea")}}</li> - <li>L'élément HTML {{htmlelement("form")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> - <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a>.</li> + <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> + <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></li> + <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></li> + <li><a href="/fr/docs/Learn/Forms">Les formulaires HTML</a></li> + <li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a>.</li> </ul> diff --git a/files/fr/web/html/attributes/capture/index.html b/files/fr/web/html/attributes/capture/index.html new file mode 100644 index 0000000000..63cefd3d74 --- /dev/null +++ b/files/fr/web/html/attributes/capture/index.html @@ -0,0 +1,96 @@ +--- +title: 'Attribut HTML : capture' +slug: Web/HTML/Attributes/capture +tags: + - API + - Attribute + - Attributes + - Capture + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/capture +--- +<p>{{HTMLSidebar}}</p> + +<div class="notecard draft"> + <p><b>Brouillon :</b></p> + <p>Cette page n'est pas terminée.</p> +</div> + +<p class="summary">L'attribut <strong><code>capture</code></strong> spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut <code><a href="accept">accept</a></code>. Les valeurs comprennent <code>user</code> et <code>environment</code>. L'attribut capture est pris en charge sur les champs de formulaire de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>.</p> + +<p>L'attribut <code>capture</code> prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut <a href="accept"><code>accept</code></a> indique que l'entrée doit être de l'un de ces types.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>user</code></td> + <td>La caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés.</td> + </tr> + <tr> + <td><code>environment</code></td> + <td>La caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.</td> + </tr> + </tbody> +</table> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.</p> +</div> + +<h2 id="examples">Exemples</h2> + +<p>Lorsqu'ils sont définis sur un type d'entrée de fichier, les systèmes d'exploitation dotés de microphones et de caméras affichent une interface utilisateur permettant la sélection à partir d'un fichier existant ou la création d'un nouveau fichier.</p> + +<pre class="brush: html"><p> + <label for="soundFile">Quel est le son de votre voix ?</label> + <input type="file" id="soundFile" capture="user" accept="audio/*"> +</p> +<p> + <label for="videoFile">Téléchargez une vidéo :</label> + <input type="file" id="videoFile" capture="environment" accept="video/*"> +</p> +<p> + <label for="imageFile">Téléchargez une photo de vous :</label> + <input type="file" id="imageFile" capture="user" accept="image/*"> +</p></pre> + +<p>{{EmbedLiveSample('examples', '', 200)}}</p> + +<p>Notez que ceux-ci fonctionnent mieux sur les appareils mobiles ; si votre appareil est un ordinateur de bureau, vous obtiendrez probablement un sélecteur de fichiers classique.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.capture")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utilisation de fichiers à partir d'applications web</a></li> + <li><a href="/fr/docs/Web/API/File">File API</a></li> + <li>La propriété <a href="/fr/docs/Web/API/HTMLInputElement"><code>HTMLInputElement.files</code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html index f47652bb15..76893fe115 100644 --- a/files/fr/web/html/attributes/crossorigin/index.html +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -1,97 +1,108 @@ --- -title: Attributs de réglage du CORS +title: 'Attribut HTML : crossorigin' slug: Web/HTML/Attributes/crossorigin tags: - - Avancé + - Advanced + - Attribute - CORS - HTML + - NeedsContent - Reference + - Security translation_of: Web/HTML/Attributes/crossorigin original_slug: Web/HTML/Reglages_des_attributs_CORS --- <div>{{HTMLSidebar}}</div> -<p>En HTML5, certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :</p> +<p class="summary">L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, fournit la prise en charge de <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.</p> + +<p>L'attribut de contenu <code>crossorigin</code> sur les éléments médias est un attribut de paramétrage CORS.</p> + +<p>Ces attributs sont énumérés, et ont les valeurs possibles suivantes :</p> <table class="standard-table"> - <tbody> - <tr> - <td class="header">Mot-clé</td> - <td class="header">Description</td> - </tr> - <tr> - <td><code>anonymous</code></td> - <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td> - </tr> - <tr> - <td><code>use-credentials</code></td> - <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td> - </tr> - <tr> - <td><code>""</code></td> - <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Mot-clé</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>anonymous</code></td> + <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td> + </tr> + <tr> + <td><code>""</code></td> + <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td> + </tr> + </tbody> </table> -<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé <code>anonymous</code> signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p> +<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p> <p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p> -<h3 id="Exemple_utiliser_crossorigin_avec_l'élément_script">Exemple : utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Avant Firefox 83, l'attribut <code>crossorigin</code> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un bug sur Chrome</a>.</p> +</div> -<p>On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p> +<h2 id="examples">Exemples</h2> +<h3 id="example_crossorigin_with_the_script_element">Utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3> -<pre class="brush: html"><script src="https://exemple.com/framework-exemple.js" - crossorigin="anonymous"> -</script></pre> +<p>On peut utiliser l'élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p> -<h3 id="Exemple_utiliser_des_informations_d'authentification_avec_un_manifeste">Exemple : utiliser des informations d'authentification avec un manifeste</h3> +<pre class="brush: html"><script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"></script></pre> -<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p> +<h3 id="example_webmanifest_with_credentials">Utiliser des informations d'authentification avec un manifeste</h3> + +<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un <a href="/fr/docs/Web/Manifest">manifeste</a> nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p> <pre class="brush: html"><link rel="manifest" href="/app.manifest" crossorigin="use-credentials"></pre> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> - -<h3 id="L'attribut_crossorigin_pour_<script>">L'attribut <code>crossorigin</code> pour <code><script></code></h3> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h3 id="script_crossorigin">Pour l'élément script</h3> <p>{{Compat("html.elements.script.crossorigin")}}</p> -<h3 id="L'attribut_crossorigin_pour_<video>">L'attribut <code>crossorigin</code> pour <code><video></code></h3> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h3 id="video_crossorigin">Pour l'élément video</h3> <p>{{Compat("html.elements.video.crossorigin")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h3 id="link_crossorigin">Pour l'élément link</h3> + +<p>{{Compat("html.elements.link.crossorigin")}}</p> + +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/HTTP/CORS">CORS</a></li> + <li><a href="/fr/docs/Web/HTTP/CORS">Partage des ressources entre origines (CORS)</a></li> + <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut HTML <code>rel</code></a></li> </ul> diff --git a/files/fr/web/html/attributes/disabled/index.html b/files/fr/web/html/attributes/disabled/index.html new file mode 100644 index 0000000000..acc0a9cbfc --- /dev/null +++ b/files/fr/web/html/attributes/disabled/index.html @@ -0,0 +1,141 @@ +--- +title: 'Attribut HTML : disabled' +slug: Web/HTML/Attributes/disabled +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/disabled +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut booléen <code><strong>disabled</strong></code>, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut <code>disabled</code> est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.</p> + +<p>L'attribut <code>disabled</code> est utilisé par <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> et <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>.</p> + +<p>Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple <code>fieldset</code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Si un <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>).</p> +</div> + +<p>Lorsqu'un élément de support a l'attribut <code>disabled</code> est appliqué, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> s'y applique également. Inversement, les éléments qui prennent en charge l'attribut <code>disabled</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a>.</p> + +<p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <code><a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a></code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, alors le bouton est activé.</p> + +<p>Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> à travers les chargements de pages. Utilisez l'attribut <a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p> + +<h3 id="attribute_interactions">Interactions entre attributs</h3> + +<p>La différence entre <code>disabled</code> et <a href="/fr/docs/Web/HTML/Attributes/readonly"><code>readonly</code></a> est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.</p> + +<p>Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a> n'a aucun effet sur les entrées dont l'attribut <code>disabled</code> est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, n'ont aucun effet, tant que le contrôle n'est pas activé.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>disabled</code> est spécifié.</p> +</div> + +<h3 id="usability">Utilisation</h3> + +<p>Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.</p> + +<p>S'il est présent sur un élément de support, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <code><a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a></code> correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes <code>:disabled</code> et <code>:enabled</code>.</p> + +<h3 id="constraint_validation">Validation des contraintes</h3> + +<p>Si l'élément est <code>disabled</code>, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.</p> + +<h2 id="examples">Exemples</h2> + +<p>Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> et <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut <code>disabled</code> défini sur l'élément ancêtre <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>. Les <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> sont désactivés, mais le <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.</p> + +<pre class="brush: html"><fieldset> + <legend>Cases à cocher</legend> + <p><label> + <input type="checkbox" name="chbox" value="regular"> Régulier + </label></p> + <p><label> + <input type="checkbox" name="chbox" value="disabled" disabled> désactivé + </label></p> +</fieldset> + +<fieldset> + <legend>Boutons radio</legend> + <p><label> + <input type="radio" name="radio" value="regular"> Régulier + </label></p> + <p><label> + <input type="radio" name="radio" value="disabled" disabled> désactivé + </label></p> +</fieldset> + +<p> + <label>Sélectionnez une option : + <select> + <optgroup label="Groupe 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Groupe 2"> + <option>Option 2.1</option> + <option disabled>Option 2.2</option> + <option>Option 2.3</option> + </optgroup> + <optgroup label="Groupe 3" disabled> + <option>Désactivé 3.1</option> + <option>Désactivé 3.2</option> + <option>Désactivé 3.3</option> + </optgroup> + </select> + </label> +</p> + +<fieldset disabled> + <legend>Champ désactivé</legend> + <p> + <label>Nom : <input type="name" name="radio" value="régulier"> Régulier</label> + </p> + <p> + <label>Nombre : <input type="number"></label> + </p> +</fieldset></pre> + +<div>{{EmbedLiveSample('examples', '', 460)}}</div> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-disabled', 'disabled attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-disabled', 'disabled attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#the-disabled-attribute', 'disabled attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attributes.disabled")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>Les pseudo-classes <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> et <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/elementtiming/index.html b/files/fr/web/html/attributes/elementtiming/index.html new file mode 100644 index 0000000000..8335ba0ed6 --- /dev/null +++ b/files/fr/web/html/attributes/elementtiming/index.html @@ -0,0 +1,65 @@ +--- +title: 'Attribut HTML : elementtiming' +slug: Web/HTML/Attributes/elementtiming +tags: + - Attribute + - Attributes + - HTML + - elementtiming + - Performance + - Reference +translation_of: Web/HTML/Attributes/elementtiming +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>elementtiming</code></strong> est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing</a>. Cet attribut peut être appliqué aux éléments <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a> à l'intérieur d'un <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, aux vignettes des éléments <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, aux éléments qui ont un <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> et aux éléments contenant des noeuds de texte, comme un <a href="/fr/docs/Web/HTML/Element/p">paragraphe (<code><p>)</code></a>.</p> + +<h2 id="usage">Utilisation</h2> + +<p>La valeur donnée pour <code>elementtiming</code> devient un identifiant pour l'élément observé.</p> + +<pre class="brush: html"><img alt="alt" src="img.jpg" elementtiming="étiquette pour l'élément"></pre> + +<p>De bons candidats pour les éléments que vous pourriez vouloir observer sont :</p> + +<ul> + <li>L'image principale d'un article.</li> + <li>Le titre d'un article de blog.</li> + <li>Les images dans un carrousel pour un site d'achat.</li> + <li>L'image de l'affiche de la vidéo principale d'une page.</li> +</ul> + +<h2 id="examples">Exemples</h2> + +<pre class="brush: html"><img alt="Alt pour l'image principale d'un article de blog" + src="my-massive-image.jpg" + elementtiming="Image principale"> + +<p elementtiming="important-text">Quelques informations importantes.</p"></pre> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Element Timing API', '#sec-modifications-DOM', 'elementtiming')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.elementtiming")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li><a href="https://web.dev/custom-metrics/">Métriques personnalisées</a> <small>(en anglais)</small></li> +</ul> diff --git a/files/fr/web/html/attributes/for/index.html b/files/fr/web/html/attributes/for/index.html new file mode 100644 index 0000000000..3499bc9489 --- /dev/null +++ b/files/fr/web/html/attributes/for/index.html @@ -0,0 +1,70 @@ +--- +title: 'Attribut HTML : for' +slug: Web/HTML/Attributes/for +tags: + - Attribute + - Attributes + - HTML + - for + - Reference +translation_of: Web/HTML/Attributes/for +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>for</code></strong> est un attribut autorisé pour <a href="/fr/docs/Web/HTML/Element/label"><code><label></code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>. Lorsqu'il est utilisé sur un élément <code><label></code>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <code><output></code>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <code><output></code>.</p> + +<h2 id="usage">Utilisation</h2> + +<p>Lorsqu'il est utilisé comme attribut de <code><label></code>, l'attribut <code>for</code> a une valeur qui est l'<code>id</code> de l'élément de formulaire, auquel il se rapporte.</p> + +<pre class="brush: html"><label for="username">Votre nom</label> +<input type="text" id="username"></pre> + +<p>Lorsqu'il est utilisé comme attribut de <code><output></code>, l'attribut <code>for</code> a une valeur qui est une liste séparée, par des espaces, des valeurs <code>id</code> des éléments, qui sont utilisés pour créer l'output.</p> + +<pre class="brush: html"><input type="range" id="b" name="b" value="50"> + +<input type="number" id="a" name="a" value="10"> = +<output name="result" for="a b">60</output></pre> + +<h2 id="examples">Exemples</h2> + +<p>Voir des exemples d'utilisation sur les pages des éléments pour <a href="/fr/docs/Web/HTML/Element/label"><code><label></code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-label-for', 'for as used with label')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'form-elements.html#attr-output-for', 'for as used with output')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-label-for', 'for as used with label')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-output-for', 'for as used with output')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<h3>Prise en charge pour label</h3> + +<p>{{Compat("html.elements.label.for")}}</p> + +<h3>Prise en charge pour output</h3> + +<p>{{Compat("html.elements.output.for")}}</p> diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html index 4afc21f118..f34c74e52d 100644 --- a/files/fr/web/html/attributes/index.html +++ b/files/fr/web/html/attributes/index.html @@ -1,768 +1,772 @@ --- -title: Liste des attributs HTML +title: Référence des attributs HTML slug: Web/HTML/Attributes tags: - - Attribut + - Attribute + - Attributes + - Beginner + - Configuring + - Element Attributes + - Elements - HTML - Reference + - Settings - Web translation_of: Web/HTML/Attributes original_slug: Web/HTML/Attributs --- <div>{{HTMLSidebar}}</div> -<p>Chaque élément HTML peut <a href="/fr/Apprendre/HTML/Balises_HTML">avoir un ou plusieurs attributs</a>. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</p> +<p class="summary">Les éléments HTML ont des <strong>attributs</strong> ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.</p> -<h2 id="Liste_des_attributs">Liste des attributs</h2> +<h2 id="attribute_list">Liste des attributs</h2> <table class="standard-table"> - <thead> - <tr> - <th>Nom de l'attribut</th> - <th>Éléments auxquels il s'applique</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>accept</code></td> - <td>{{HTMLElement("form")}}, {{HTMLElement("input")}}</td> - <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td> - </tr> - <tr> - <td><code>accept-charset</code></td> - <td>{{HTMLElement("form")}}</td> - <td>La liste des jeux de caractères pris en charge.</td> - </tr> - <tr> - <td><code>accesskey</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td> - </tr> - <tr> - <td><code>action</code></td> - <td>{{HTMLElement("form")}}</td> - <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td> - </tr> - <tr> - <td><code>align</code></td> - <td>{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</td> - <td>Cet attribut définit l'alignement horizontal de l'élément.</td> - </tr> - <tr> - <td><code>allow</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td> - </tr> - <tr> - <td><code>alt</code></td> - <td>{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}</td> - <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td> - </tr> - <tr> - <td><code>async</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td> - </tr> - <tr> - <td><code>autocapitalize</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels">Attribut universel</a></td> - <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td> - </tr> - <tr> - <td><code>autocomplete</code></td> - <td> - <p>{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> - </td> - <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td> - </tr> - <tr> - <td><code>autofocus</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td> - </tr> - <tr> - <td><code>autoplay</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td> - </tr> - <tr> - <td><code>background</code></td> - <td>{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td> - <p>Définit l'URL vers un fichier qui est une image.</p> + <thead> + <tr> + <th scope="col">Nom de l'attribut</th> + <th scope="col">Éléments concernés</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/accept"><code>accept</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Form#attr-accept-charset"><code>accept-charset</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td>La liste des jeux de caractères pris en charge.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/action"><code>action</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/align"><code>align</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/applet"><code><applet></code></a>, <a href="/fr/docs/Web/HTML/Element/caption"><code><caption></code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/hr"><code><hr></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a> , <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>, <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>, <a href="/fr/docs/Web/HTML/Element/tr"><code><tr></code></a></td> + <td>Cet attribut définit l'alignement horizontal de l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-allow"><code>allow</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></td> + <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/alt"><code>alt</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/applet"><code><applet></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/script#attr-async"><code>async</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/autocapitalize"><code>autocapitalize</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a></td> + <td> + <p><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></p> + </td> + <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/autofocus"><code>autofocus</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/autoplay"><code>autoplay</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td> + </tr> + <tr> + <td><code>background</code></td> + <td><a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a></td> + <td> + <p>Définit l'URL vers un fichier qui est une image.</p> - <p>Note : Bien que les navigateurs et les clients <em>emails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.</p> - </td> - </tr> - <tr> - <td><code>bgcolor</code></td> - <td>{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}</td> - <td> - <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Bien que les navigateurs et les clients <em>e-mails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td><a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/marquee"><code><marquee></code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>, <a href="/fr/docs/Web/HTML/Element/tr"><code><tr></code></a></td> + <td> + <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p> - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>border</code></td> - <td>{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}}</td> - <td> - <p>Cet attribut indique la largeur de la bordure.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a></td> + <td> + <p>Cet attribut indique la largeur de la bordure.</p> - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>buffered</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.</td> - </tr> - <tr> - <td><code>challenge</code></td> - <td>{{HTMLElement("keygen")}}</td> - <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td> - </tr> - <tr> - <td><code>charset</code></td> - <td>{{HTMLElement("meta")}}, {{HTMLElement("script")}}</td> - <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td> - </tr> - <tr> - <td><code>checked</code></td> - <td>{{HTMLElement("command")}}, {{HTMLElement("input")}}</td> - <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td> - </tr> - <tr> - <td><code>cite</code></td> - <td>{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}</td> - <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td> - </tr> - <tr> - <td><code>class</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.</td> - </tr> - <tr> - <td><code>code</code></td> - <td>{{HTMLElement("applet")}}</td> - <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td> - </tr> - <tr> - <td><code>codebase</code></td> - <td>{{HTMLElement("applet")}}</td> - <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td> - </tr> - <tr> - <td><code>color</code></td> - <td>{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}}</td> - <td> - <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</p> + </div> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/buffered"><code>buffered</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/HTML/Attributes/capture">capture</a></code></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>À partir de la spécification {{SpecName('HTML Media Capture', '#the-capture-attribute', 'media capture')}}, spécifie qu'un nouveau fichier peut être capturé.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Keygen#attr-challenge"><code>challenge</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a></td> + <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/charset"><code>charset</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/checked"><code>checked</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/command"><code><command></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/cite"><code>cite</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a>, <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a>, <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a></td> + <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/class"><code>class</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/applet#attr-code"><code>code</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/applet"><code><applet></code></a></td> + <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/applet#attr-codebase"><code>codebase</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/applet"><code><applet></code></a></td> + <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td> + </tr> + <tr> + <td><code>color</code></td> + <td><a href="/fr/docs/Web/HTML/Element/basefont"><code><basefont></code></a>, <a href="/fr/docs/Web/HTML/Element/font"><code><font></code></a>, <a href="/fr/docs/Web/HTML/Element/hr"><code><hr></code></a></td> + <td> + <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p> - <div class="note"> - <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.</p> - </div> - </td> - </tr> - <tr> - <td><code>cols</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td> - </tr> - <tr> - <td><code>colspan</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td> - </tr> - <tr> - <td><code>content</code></td> - <td>{{HTMLElement("meta")}}</td> - <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si le contenu de l'élément peut être édité.</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.</td> - </tr> - <tr> - <td><code>controls</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td> - </tr> - <tr> - <td><code>coords</code></td> - <td>{{HTMLElement("area")}}</td> - <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td> - </tr> - <tr> - <td><code>crossorigin</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut gère les requêtes de différentes origines.</td> - </tr> - <tr> - <td><code>csp</code> {{experimental_inline}}</td> - <td>{{HTMLElement("iframe")}}</td> - <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td> - </tr> - <tr> - <td><code>data</code></td> - <td>{{HTMLElement("object")}}</td> - <td>Cet attribut définit l'URL de la ressource.</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}</td> - <td>Cet attribut indique la date et l'heure associées à l'élément.</td> - </tr> - <tr> - <td><code>decoding</code></td> - <td>{{HTMLElement("img")}}</td> - <td>Cet attribut indique la méthode préférée pour décoder l'image.</td> - </tr> - <tr> - <td><code>default</code></td> - <td>{{HTMLElement("track")}}</td> - <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.</td> - </tr> - <tr> - <td><code>defer</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td> - </tr> - <tr> - <td><code>dir</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td> - </tr> - <tr> - <td><code>dirname</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td></td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td> - </tr> - <tr> - <td><code>download</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.</td> - </tr> - <tr> - <td><code>enctype</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td> - </tr> - <tr> - <td><code>enterkeyhint</code> {{experimental_inline}}</td> - <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> - <td>Cet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> - </tr> - <tr> - <td><code>for</code></td> - <td>{{HTMLElement("label")}}, {{HTMLElement("output")}}</td> - <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td> - </tr> - <tr> - <td><code>form</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td> - </tr> - <tr> - <td><code>formaction</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour {{HTMLElement("form")}}.</td> - </tr> - <tr> - <td><code>formenctype</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formmethod</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formnovalidate</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>formtarget</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td> - <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td> - </tr> - <tr> - <td><code>headers</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Les identifiants des éléments <code><th></code> qui s'appliquent à cet élément.</td> - </tr> - <tr> - <td><code>height</code></td> - <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> - <td> - <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</p> + </div> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-cols"><code>cols</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/colspan"><code>colspan</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a></td> + <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/meta#attr-content"><code>content</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a></td> + <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut indique si le contenu de l'élément peut être édité.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/contextmenu"><code>contextmenu</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut fait référence à l'identifiant d'un élément <a href="/fr/docs/Web/HTML/Element/menu"><code><menu></code></a> qui sera utilisé comme menu contextuel pour l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/controls"><code>controls</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/area#attr-coords"><code>coords</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/crossorigin"><code>crossorigin</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut gère les requêtes de différentes origines.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>csp</code></a> {{experimental_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></td> + <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/object#attr-data"><code>data</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a></td> + <td>Cet attribut définit l'URL de la ressource.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/data-*"><code>data-*</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/datetime"><code>datetime</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a>, <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a></td> + <td>Cet attribut indique la date et l'heure associées à l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Img#attr-decoding"><code>decoding</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></td> + <td>Cet attribut indique la méthode préférée pour décoder l'image.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/track#attr-default"><code>default</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a></td> + <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indiquent un autre choix.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/script#attr-defer"><code>defer</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/dirname"><code>dirname</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/disabled"><code>disabled</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/command"><code><command></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/download"><code>download</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/draggable"><code>draggable</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td> + </tr> + <tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/enterkeyhint"><code>enterkeyhint</code></a> {{experimental_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>Cet attribut indique le libellé ou l'icône à afficher sur la touche entrée des claviers virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/for"><code>for</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a></td> + <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/form"><code>form</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/formaction"><code>formaction</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></td> + <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/formenctype"><code>formenctype</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du <a href="/fr/docs/Web/HTML/Element/Form">formulaire</a> auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/formmethod"><code>formmethod</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/formnovalidate"><code>formnovalidate</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/formtarget"><code>formtarget</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a></td> + <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/headers"><code>headers</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a></td> + <td>Les identifiants des éléments <code><th></code> qui s'appliquent à cet élément.</td> + </tr> + <tr> + <td><code>height</code></td> + <td><a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td> + <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera <a href="/fr/docs/Web/CSS/height"><code>height</code></a> property.</p> - <div class="note"> - <p><strong>Note :</strong> Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.</p> - </div> - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td> - </tr> - <tr> - <td><code>high</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td> - </tr> - <tr> - <td><code>href</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}</td> - <td>L'URL de la ressource liée.</td> - </tr> - <tr> - <td><code>hreflang</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>Cet attribut indique la langue utilisé pour la ressource liée.</td> - </tr> - <tr> - <td><code>http-equiv</code></td> - <td>{{HTMLElement("meta")}}</td> - <td></td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{HTMLElement("command")}}</td> - <td>Cet attribut indique une image qui représente la commande.</td> - </tr> - <tr> - <td><code>id</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.</td> - </tr> - <tr> - <td><code>importance</code> {{experimental_inline}}</td> - <td>{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td> - </tr> - <tr> - <td><code>integrity</code></td> - <td>{{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td> - <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p> - </td> - </tr> - <tr> - <td><code>intrinsicsize</code> {{experimental_inline}}</td> - <td>{{HTMLElement("img")}}</td> - <td>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.</td> - </tr> - <tr> - <td><code>inputmode</code></td> - <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td> - <td>Cet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> - </tr> - <tr> - <td><code>ismap</code></td> - <td>{{HTMLElement("img")}}</td> - <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td> - </tr> - <tr> - <td><code>itemprop</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td></td> - </tr> - <tr> - <td><code>keytype</code></td> - <td>{{HTMLElement("keygen")}}</td> - <td>Cet attribut définit le type de clé qui est généré.</td> - </tr> - <tr> - <td><code>kind</code></td> - <td>{{HTMLElement("track")}}</td> - <td>Cet attribut définit le type de piste textuelle.</td> - </tr> - <tr> - <td><code>label</code></td> - <td>{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}</td> - <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td> - </tr> - <tr> - <td><code>lang</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit la langue utilisée dans l'élément.</td> - </tr> - <tr> - <td><code>language</code></td> - <td>{{HTMLElement("script")}}</td> - <td>Cet attribut définit le langage de script utilisé dans l'élément.</td> - </tr> - <tr> - <td><code>loading</code> {{experimental_inline}}</td> - <td>{{HTMLElement("img")}}, {{HTMLElement("iframe")}}</td> - <td>Cet attribut indique que l'élément doit être chargé à la demande.</td> - </tr> - <tr> - <td><code>list</code></td> - <td>{{HTMLElement("input")}}</td> - <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td> - </tr> - <tr> - <td><code>loop</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td> - </tr> - <tr> - <td><code>low</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{HTMLElement("html")}}</td> - <td> - <p>Cet attribut définit l'URL du manifeste du document pour la gestion du cache.</p> - - <p>Cet attribut est obsolète, on utilisera plutôt <code><link rel="manifest"></code>.</p> - </td> - </tr> - <tr> - <td><code>max</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}</td> - <td>Cet attribut indique la valeur maximale autorisée.</td> - </tr> - <tr> - <td><code>maxlength</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td> - </tr> - <tr> - <td><code>minlength</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td> - </tr> - <tr> - <td><code>media</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}</td> - <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut définit la méthode <a href="/fr/docs/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td> - </tr> - <tr> - <td><code>min</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}</td> - <td>Cet attribut indique la valeur minimale autorisée.</td> - </tr> - <tr> - <td><code>multiple</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> - <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td> - </tr> - <tr> - <td><code>muted</code></td> - <td>{{HTMLElement("audio")}},{{HTMLElement("video")}}</td> - <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td> - </tr> - <tr> - <td><code>name</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}</td> - <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td> - </tr> - <tr> - <td><code>novalidate</code></td> - <td>{{HTMLElement("form")}}</td> - <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>{{HTMLElement("details")}}</td> - <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td> - </tr> - <tr> - <td><code>optimum</code></td> - <td>{{HTMLElement("meter")}}</td> - <td>Cet attribut indique la valeur numérique optimale.</td> - </tr> - <tr> - <td><code>pattern</code></td> - <td>{{HTMLElement("input")}}</td> - <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td></td> - </tr> - <tr> - <td><code>placeholder</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td> - </tr> - <tr> - <td><code>poster</code></td> - <td>{{HTMLElement("video")}}</td> - <td>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td> - </tr> - <tr> - <td><code>radiogroup</code></td> - <td>{{HTMLElement("command")}}</td> - <td></td> - </tr> - <tr> - <td><code>readonly</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'élément peut être édité.</td> - </tr> - <tr> - <td><code>referrerpolicy</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td> - <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td> - </tr> - <tr> - <td><code>rel</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> - <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td> - </tr> - <tr> - <td><code>required</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td> - <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td> - </tr> - <tr> - <td><code>reversed</code></td> - <td>{{HTMLElement("ol")}}</td> - <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td> - </tr> - <tr> - <td><code>rows</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td> - </tr> - <tr> - <td><code>rowspan</code></td> - <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td> - <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td> - </tr> - <tr> - <td><code>scope</code></td> - <td>{{HTMLElement("th")}}</td> - <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td> - </tr> - <tr> - <td><code>scoped</code></td> - <td>{{HTMLElement("style")}}</td> - <td></td> - </tr> - <tr> - <td><code>selected</code></td> - <td>{{HTMLElement("option")}}</td> - <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td> - </tr> - <tr> - <td><code>shape</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> - <td></td> - </tr> - <tr> - <td><code>size</code></td> - <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td> - <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td> - </tr> - <tr> - <td><code>sizes</code></td> - <td>{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}</td> - <td></td> - </tr> - <tr> - <td><code>slot</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td> - </tr> - <tr> - <td><code>span</code></td> - <td>{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}</td> - <td></td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td> - </tr> - <tr> - <td><code>src</code></td> - <td>{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}</td> - <td>Cet attribut indique l'URL du contenu embarqué.</td> - </tr> - <tr> - <td><code>srcdoc</code></td> - <td>{{HTMLElement("iframe")}}</td> - <td></td> - </tr> - <tr> - <td><code>srclang</code></td> - <td>{{HTMLElement("track")}}</td> - <td></td> - </tr> - <tr> - <td><code>srcset</code></td> - <td>{{HTMLElement("img")}}</td> - <td></td> - </tr> - <tr> - <td><code>start</code></td> - <td>{{HTMLElement("ol")}}</td> - <td>Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.</td> - </tr> - <tr> - <td><code>step</code></td> - <td>{{HTMLElement("input")}}</td> - <td></td> - </tr> - <tr> - <td><code>style</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.</td> - </tr> - <tr> - <td><code>summary</code></td> - <td>{{HTMLElement("table")}}</td> - <td></td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td> - </tr> - <tr> - <td><code>target</code></td> - <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}</td> - <td></td> - </tr> - <tr> - <td><code>title</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.</td> - </tr> - <tr> - <td><code>translate</code></td> - <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td> - <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td> - </tr> - <tr> - <td><code>type</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}</td> - <td>Cet attribut définit le type de l'élément.</td> - </tr> - <tr> - <td><code>usemap</code></td> - <td>{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}</td> - <td></td> - </tr> - <tr> - <td><code>value</code></td> - <td>{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}</td> - <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td> - </tr> - <tr> - <td><code>width</code></td> - <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td> - <td> - <p>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.</p> - - <div class="note"> - <p><strong>Note :</strong> Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.</p> - </div> - </td> - </tr> - <tr> - <td><code>wrap</code></td> - <td>{{HTMLElement("textarea")}}</td> - <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td> - </tr> - </tbody> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour certains éléments comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS <a href="/fr/docs/Web/CSS/height"><code>height</code></a> qui est la méthode standard pour définir la hauteur d'un élément.</p> + </div> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-high"><code>high</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/href"><code>href</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/base"><code><base></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td>L'URL de la ressource liée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/hreflang"><code>hreflang</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td>Cet attribut indique la langue utilisée pour la ressource liée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/meta#attr-http-equiv"><code>http-equiv</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a></td> + <td>Définit une directive <a href="/fr/docs/Web/HTTP/Headers/Pragma">Pragma</a>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/command#attr-icon"><code>icon</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/command"><code><command></code></a></td> + <td>Cet attribut indique une image qui représente la commande.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/id"><code>id</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/importance"><code>importance</code></a> {{experimental_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/Security/Subresource_Integrity"><code>integrity</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td> + <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></td> + <td>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>Cet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Img#attr-ismap"><code>ismap</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a></td> + <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Keygen#attr-keytype"><code>keytype</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a></td> + <td>Cet attribut définit le type de clé qui est généré.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/track#attr-kind"><code>kind</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a></td> + <td>Cet attribut définit le type de piste textuelle.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/label"><code>label</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a></td> + <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/lang"><code>lang</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut définit la langue utilisée dans l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/script#attr-language"><code>language</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Cet attribut définit le langage de script utilisé dans l'élément.</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></td> + <td>Cet attribut indique que l'élément doit être chargé à la demande.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/loop"><code>loop</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/bgsound"><code><bgsound></code></a>, <a href="/fr/docs/Web/HTML/Element/marquee"><code><marquee></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-low"><code>low</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/html#attr-manifest"><code>manifest</code></a> {{obsolete_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a></td> + <td>Cet attribut définit l'URL du manifeste du document pour la gestion du cache. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est obsolète, utilisez <a href="/fr/docs/Web/Manifest"><code><link rel="manifest"></code></a> à la place.</p> + </div> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a></td> + <td>Cet attribut indique la valeur maximale autorisée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/media"><code>media</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a></td> + <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td>Cet attribut indique la valeur minimale autorisée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></td> + <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/muted"><code>muted</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/name"><code>name</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a>, <a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a>, <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a></td> + <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a></td> + <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-optimum"><code>optimum</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td>Cet attribut indique la valeur numérique optimale.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/a#attr-ping"><code>ping</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/placeholder"><code>placeholder</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/video#attr-poster"><code>poster</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/preload"><code>preload</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/command#attr-radiogroup"><code>radiogroup</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/command"><code><command></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/readonly"><code>readonly</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique si l'élément peut être édité.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/referralpolicy"><code>referrerpolicy</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a></td> + <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/rel"><code>rel</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></td> + <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/ol#attr-reversed"><code>reversed</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a></td> + <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-rows"><code>rows</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/rowspan"><code>rowspan</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a></td> + <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-sandbox"><code>sandbox</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></td> + <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/th#attr-scope"><code>scope</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a></td> + <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/style#attr-scoped"><code>scoped</code></a>{{non-standard_inline}} {{deprecated_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Option#attr-selected"><code>selected</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a></td> + <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/shape"><code>shape</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></td> + <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/sizes"><code>sizes</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/slot"><code>slot</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/span"><code>span</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/src"><code>src</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>, <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Cet attribut indique l'URL du contenu embarqué.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-srcdoc"><code>srcdoc</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/track#attr-srclang"><code>srclang</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/srcset"><code>srcset</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/source"><code><source></code></a></td> + <td>Une ou plusieurs images candidates adaptatives.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/ol#attr-start"><code>start</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a></td> + <td>Cet attribut définit le premier nombre de la liste si celui-ci est différent de 1.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/style"><code>style</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests, car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/table#attr-summary"><code>summary</code></a>{{deprecated_inline}}</td> + <td><a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/target"><code>target</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/base"><code><base></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Global_attributes/translate"><code>translate</code></a></td> + <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td> + <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/type"><code>type</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/command"><code><command></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>, <a href="/fr/docs/Web/HTML/Element/menu"><code><menu></code></a></td> + <td>Cet attribut définit le type de l'élément.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/usemap"><code>usemap</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a></td> + <td></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/value"><code>value</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a>, <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a></td> + <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Attributes/width"><code>width</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> + <td>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour tous les autres éléments, comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>, il faut utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/width"><code>width</code></a> afin de définir la largeur.</p> + </div> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-wrap"><code>wrap</code></a></td> + <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a></td> + <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td> + </tr> + </tbody> </table> -<h2 id="Attribut_de_contenu_ou_attribut_IDL">Attribut de contenu ou attribut IDL ?</h2> +<h2 id="content_versus_idl_attributes">Attribut de contenu ou attribut IDL ?</h2> <p>En HTML, la plupart des attributs ont deux aspects : l'<strong>attribut de contenu</strong> et l'<strong>attribut IDL</strong> (pour <em>Interface Definition Language</em> ou langage de définition des interfaces).</p> -<p>L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une <code>maxlength</code> d'un élément {{HTMLElement("input")}} à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p> +<p>L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtient et/ou définit via les méthodes <a href="/fr/docs/Web/API/Element/setAttribute"><code>element.setAttribute()</code></a> et <a href="/fr/docs/Web/API/Element/getAttribute"><code>element.getAttribute()</code></a>. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une <code>maxlength</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p> -<p>L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme <code class="moz-txt-verticalline">élément.toto</code>. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.</p> +<p>L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme <code>élément.toto</code>. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.</p> -<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments {{HTMLElement("input")}} vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code><input></code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p> +<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code><input></code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p> <p>Les attributs IDL ne sont pas toujours des chaînes de caractères. <code>input.maxlength</code> est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, <code>input.maxlength</code> renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.</p> -<p>Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes">les règles de cette spécification seront suivies</a>.</p> +<p>Les attributs IDL peuvent <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">refléter d'autres types</a> tels que les unsigned long, les URL, les booléens, etc. Malheureusement, il n'existe pas de règles claires et la façon dont les attributs IDL se comportent en conjonction avec leurs attributs de contenu correspondants, cela dépend de l'attribut. La plupart du temps, il suivra <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">les règles énoncées dans la spécification</a>, mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeurs, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (<code>select.size</code>, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.</p> -<h2 id="Attributs_booléens">Attributs booléens</h2> +<h2 id="boolean_attributes">Attributs booléens</h2> <p>Certains attributs de contenu (ex. <code>required</code>, <code>readonly</code>, <code>disabled</code>) sont des <a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes">attributs booléens</a>. Si un attribut booléen est présent, sa valeur correspondra à <em>vrai</em> (<em>true</em>), s'il est absent, sa valeur correspondra à <em>faux</em> (<em>false</em>).</p> -<p>HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :</p> +<p>HTML5 définit des restrictions sur les valeurs autorisées des attributs booléens : Si l'attribut est présent, sa valeur doit être soit la chaîne vide (équivalente, l'attribut peut avoir une valeur non attribuée), soit une valeur qui est une correspondance ASCII insensible à la casse pour le nom canonique de l'attribut, sans espace avant ou après. Les exemples suivants sont des façons valides de baliser un attribut booléen :</p> -<ul> - <li>aucune valeur</li> - <li>la chaîne vide</li> - <li>une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.</li> -</ul> - -<p>Voici quelques exemples valides pour utiliser un attribut booléen :</p> - -<pre><div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div> +<pre class="brush: html"><div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div> <div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div> <div itemscope="">Ce fragment est du HTML valide et du XML valide.</div> <div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div></pre> -<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.</p> - -<p>Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p> +<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout. Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li> + <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li> </ul> diff --git a/files/fr/web/html/attributes/max/index.html b/files/fr/web/html/attributes/max/index.html new file mode 100644 index 0000000000..b7b6dd56f6 --- /dev/null +++ b/files/fr/web/html/attributes/max/index.html @@ -0,0 +1,160 @@ +--- +title: 'Attribut HTML : max' +slug: Web/HTML/Attributes/max +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - max + - Reference +translation_of: Web/HTML/Attributes/max +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>max</code></strong> définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>valeur</code></a> de l'élément est supérieure à cette valeur, l'élément échoue à <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation des contraintes</a>. Cette valeur doit être supérieure ou égale à la valeur de l'attribut <a href="min"><code>min</code></a>. Si l'attribut <code>max</code> est présent mais n'est pas spécifié ou est invalide, aucune valeur <code>max</code> n'est appliquée. Si l'attribut <code>max</code> est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut <code>max</code>, la validation des contraintes empêchera la soumission du formulaire.</p> + +<p>Valable pour les types de saisie numérique, y compris les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que les deux éléments <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a> et <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>max</code> est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.</p> + +<p>Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> sera vrai, et le contrôle sera assorti des pseudo-classes <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> et <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p> + +<h3 id="syntax">Syntaxe</h3> + +<table class="standard-table"> + <caption>Syntaxe pour les valeurs <code>max</code> par <code>type</code> de saisie.</caption> + <thead> + <tr> + <th>Type de saisie</th> + <th>Syntaxe</th> + <th>Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" max="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" max="2019-12" step="12"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" max="2019-W23" step=""></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" max="17:00" step="900"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" max="2019-12-25T23:59"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> + <p><b>Note :</b></p> + <p>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> +</div> + +<p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeOverflow"><code>rangeOverflow</code></a> pour plus d'informations.</p> + +<p>Pour l'élément <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a>, l'attribut <code>max</code> décrit la quantité de travail que nécessite la tâche indiquée par l'élément <code>progress</code>. S'il est présent, il doit avoir une valeur supérieure à zéro et être un nombre à virgule flottante valide. Pour l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>max</code> définit la limite numérique supérieure de la plage mesurée. Celle-ci doit être supérieure à la valeur minimale (<a href="/fr/docs/Web/HTML/Attributes/min">code>min</code></a> attribut), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.</p> + +<table class="standard-table"> + <caption>Syntaxe des valeurs <code>max</code> pour les autres éléments</caption> + <thead> + <tr> + <th>Type d'entrée</th> + <th>Syntaxe</th> + <th>Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code><progress id="file" max="100" value="70"> 70% </progress></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> à 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h2 id="accessibility_concerns">Accessibilité</h2> + +<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>max</code>, assurez-vous que cette exigence maximale est comprise par l'utilisateur. Fournir des instructions dans le <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus flexibles, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attributes.max")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></li> + <li>Les autres attributs de mesure : <a href="/fr/docs/Web/HTML/Element/Meter#attr-low"><code>low</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter#attr-high"><code>high</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter#attr-optimum"><code>optimum</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> + <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> + <li>L'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></li> + <li><a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>Les valeurs de l'attribut type <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, et l'élement <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/maxlength/index.html b/files/fr/web/html/attributes/maxlength/index.html new file mode 100644 index 0000000000..a2cd5314f5 --- /dev/null +++ b/files/fr/web/html/attributes/maxlength/index.html @@ -0,0 +1,70 @@ +--- +title: 'Attribut HTML : maxlength' +slug: Web/HTML/Attributes/maxlength +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Input + - Reference + - maxlength + - textarea +translation_of: Web/HTML/Attributes/maxlength +--- +<p>{{HTMLSidebar}}</p> + +<div class="notecard draft"> + <p><b>Brouillon :</b></p> + <p>Cette page n'est pas terminée.</p> +</div> + +<p class="summary">L'attribut <strong><code>maxlength</code></strong> définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou un <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.</p> + +<p>Toute valeur de <code>maxlength</code> doit être supérieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="constraint_validation">Validation des contraintes</h3> + +<p>Bien que le navigateur empêche généralement l'utilisateur de saisir plus de texte que ne l'autorise l'attribut <code>maxlength</code>, si la longueur est supérieure à ce dernier, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/tooLong"><code>tooLong</code></a> d'un objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a> sera vraie.</p> + +<h2 id="examples">Exemple</h2> + +<pre class="brush: html"><input type="password" maxlength="4"/></pre> + +<div>{{EmbedLiveSample('examples', '', 100)}}</div> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.maxlength")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> + <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/min/index.html b/files/fr/web/html/attributes/min/index.html new file mode 100644 index 0000000000..17e65cf47d --- /dev/null +++ b/files/fr/web/html/attributes/min/index.html @@ -0,0 +1,157 @@ +--- +title: 'Attribut HTML : min' +slug: Web/HTML/Attributes/min +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - min + - Reference +translation_of: Web/HTML/Attributes/min +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>min</code></strong> définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value">valeur</a> de l'élément est inférieure à cette valeur, l'élément échoue lors de la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation des contraintes</a>. Cette valeur doit être inférieure ou égale à la valeur de l'attribut <code>max</code>. Si une valeur est spécifiée pour <code>min</code> qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.</p> + +<p>Valable pour les types de saisie numérique, y compris les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, et l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>min</code> est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.</p> + +<h2 id="syntax">Syntaxe</h3> + +<table class="standard-table"> + <caption>Syntaxe pour les valeurs <code>min</code> par <code>type</code> de saisie.</caption> + <thead> + <tr> + <th scope="col">Type de saisie</th> + <th scope="col">Syntaxe</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> + <p><b>Note :</b></p> + <p>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> +</div> + +<p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeUnderflow"><code>rangeUnderflow</code></a> pour plus d'informations.</p> + +<p>Pour l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>min</code> définit la limite numérique inférieure de la plage mesurée. Celle-ci doit être inférieure à la valeur minimale (attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.</p> + +<table class="standard-table"> + <caption>Syntaxe de <code>min</code> pour les autres éléments</caption> + <thead> + <tr> + <th scope="col">Élément</th> + <th scope="col">Syntaxe</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></td> + <td><a href="/fr/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h3 id="impact_on_step">Impact sur <code>step</code></h3> + +<p>Les valeurs de <code>min</code> et <code>step</code> définissent ce que sont les valeurs valides, même si l'attribut <code>step</code> n'est pas inclus, car <code>step</code> a par défaut la valeur <code>0</code>.</p> + +<p>Nous ajoutons une grande bordure rouge autour des entrées invalides :</p> + +<pre class="brush: css">input:invalid { + border: solid red 3px; +}</pre> + +<p>Nous définissons ensuite une entrée avec une valeur minimale de 7,2, en omettant l'attribut « step », qui a la valeur 1 par défaut.</p> + +<pre class="brush: html"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre> + +<p>Comme <code>step</code> a pour valeur 1 par défaut, les valeurs valides comprennent <code>7,2</code>, <code>8,2</code>, <code>9,2</code>, et ainsi de suite. La valeur 8 n'est pas valide. Comme nous avons inclus une valeur non valide, les navigateurs compatibles afficheront la valeur comme non valide.</p> + +<div>{{EmbedLiveSample("impact_on_step", "", 55)}}</div> + +<p>S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (seconde, semaine, mois, jour) pour les types d'entrée date/heure.</p> + +<h2 id="accessibility_concerns">Accessibilité</h2> + +<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>min</code>, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions à l'intérieur des <a href="/fr/docs/Web/HTML/Element/label"><code><label></code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attributes.min")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></li> + <li>Les autres attributs de mesure : <a href="/fr/docs/Web/HTML/Element/meter#attr-low"><code>low</code></a>, <a href="/fr/docs/Web/HTML/Element/meter#attr-high"><code>high</code></a>, <a href="/fr/docs/Web/HTML/Element/meter#attr-optimum"><code>optimum</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> + <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> + <li>L'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></li> + <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/input"><code><input></code></a></li> + <li>Les valeurs de l'attribut type <a href="/fr/docs/Web/HTML/Element/input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/input/range"><code>range</code></a>, et l'élément <a href="/fr/docs/Web/HTML/Element/meter"><code><meter></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/minlength/index.html b/files/fr/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..42bbc2ab19 --- /dev/null +++ b/files/fr/web/html/attributes/minlength/index.html @@ -0,0 +1,76 @@ +--- +title: 'Attribut HTML : minlength' +slug: Web/HTML/Attributes/minlength +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Input + - Reference + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut <strong><code>minlength</code></strong> définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a>, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.</p> + +<p>L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à <code>minlength</code> unités de code UTF-16, avec <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> retournant <code>true</code>. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.</p> + +<h2 id="examples">Exemples</h2> + +<p>En ajoutant <code>minlength="5"</code>, la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.</p> + +<pre class="brush: html"><label for="fruit">Entrez un nom de fruit d'au moins 5 lettres.</label> +<input type="text" minlength="5" id="fruit"></pre> + +<p>Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus. <em>Vert</em> est invalide, <em>Citron</em> est valide.</p> + +<pre class="brush: css">input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +}</pre> + +<div>{{EmbedLiveSample('examples', '', 40)}}</div> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'l\'attribut minlength')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'l\'attribut minlength')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.minlength")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> + <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/multiple/index.html b/files/fr/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..3f306bf96c --- /dev/null +++ b/files/fr/web/html/attributes/multiple/index.html @@ -0,0 +1,182 @@ +--- +title: 'Attribut HTML : multiple' +slug: Web/HTML/Attributes/multiple +tags: + - Attribute + - Attributes + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/multiple +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary">L'attribut booléen <strong><code>multiple</code></strong>, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.</p> + +<p>Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut <code>multiple</code> est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> avec l'attribut <code>multiple</code> défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> s'affiche de la même manière, mais correspondra à la pseudo-classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.</p> + +<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, l'utilisateur peut inclure zéro (si ce n'est pas également <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a>), une ou plusieurs adresses électroniques séparées par des virgules.</p> + +<pre class="brush: html"><input type="email" multiple name="emails" id="emails"></pre> + +<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.</p> + +<p>Lorsque <code>multiple</code> est défini sur le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd> enfoncée, puis en cliquant).</p> + +<pre class="brush: html"><input type="file" multiple name="uploads" id="uploads"></pre> + +<p>Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par <code><input></code>.</p> + +<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> dans la liste d'options.</p> + +<pre class="brush: html"><select multiple name="dwarfs" id="dwarfs"> + <option>Grincheux</option> + <option>Joyeux</option> + <option>Dormeur</option> + <option>Timide</option> + <option>Atchoum</option> + <option>Simplet</option> + <option>Doc</option> +</select></pre> + +<p>Lorsque <code>multiple</code> est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.</p> + +<h2 id="examples">Exemples</h2> + +<h3 id="email_input">Saisie d'adresses électroniques</h3> + +<pre class="brush: html"><label for="emails">A qui voulez-vous adresser un courriel ?</label> +<input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64"> + +<datalist id="dwarfemails"> + <option value="grincheux@menuisiers.fr">Grincheux</option> + <option value="joyeux@menuisiers.fr">Joyeux</option> + <option value="dormeur@menuisiers.fr">Dormeur</option> + <option value="timide@menuisiers.fr">Timide</option> + <option value="atchoum@menuisiers.fr">Atchoum</option> + <option value="simplet@menuisiers.fr">Simplet</option> + <option value="doc@menuisiers.fr">Doc</option> +</datalist></pre> + +<div class="hidden"> +<pre class="brush: css">input:invalid {border: red solid 3px;}</pre> +</div> + +<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut <a href="/fr/docs/Web/HTML/Attributs/required"><code>required</code></a> est présent, au moins une adresse électronique est requise.</p> + +<p>Certains navigateurs prennent en charge l'apparition de la <a href="/fr/docs/Web/HTML/Attributes/list">liste</a> d'options de la <a href="/fr/docs/Web/HTML/Element/datalist"><code><datalist></code></a> pour les adresses électroniques ultérieures lorsque <code>multiple</code> est présent. D'autres ne le font pas.</p> + +<div>{{EmbedLiveSample("email_input", '', 80)}}</div> + +<h3 id="file_input">Saisie de fichiers</h3> + +<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers :</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <p> + <label for="uploads"> + Choisissez les images que vous voulez télécharger : + </label> + <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> + </p> + <p> + <label for="text">Choisissez un fichier texte à télécharger :</label> + <input type="file" id="text" name="text" accept=".txt"> + </p> + <p> + <input type="submit" value="Soumettre"> + </p> +</form></pre> + +<div>{{EmbedLiveSample("file_input", '', 160)}}</div> + +<p>Notez la différence d'aspect entre l'exemple avec <code>multiple</code> défini et l'autre entrée <code>file</code> sans.</p> + +<p>Lorsque le formulaire est soumis, si nous avions utilisé <a href="/fr/docs/Web/HTML/Element/Form"><code>method="get"</code></a> le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme <code>?uploads=img1.jpg&uploads=img2.svg</code>. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire <a href="/fr/docs/Web/API/XMLHttpRequest/multipart">multipart</a>, nous devons utiliser POST. Voir l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> et <a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#the_method_attribute">l'envoi de données de formulaire</a> pour plus d'informations.</p> + +<h3 id="select">Saisir plusieurs options</h3> + +<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.</p> + +<pre class="brush: html"><form method="get" action="#"> +<p> + <label for="dwarfs">Sélectionnez les menuisiers que vous aimez :</label> + <select multiple name="dwarfs" id="dwarfs"> + <option>grincheux@menuisiers.fr</option> + <option>joyeux@menuisiers.fr</option> + <option>dormeur@menuisiers.fr</option> + <option>timide@menuisiers.fr</option> + <option>atchoum@menuisiers.fr</option> + <option>simplet@menuisiers.fr</option> + <option>doc@menuisiers.fr</option> + </select> +</p> +<p> + <label for="favoriteOnly">Sélectionnez votre préféré :</label> + <select name="favoriteOnly" id="favoriteOnly"> + <option>grincheux@menuisiers.fr</option> + <option>joyeux@menuisiers.fr</option> + <option>dormeur@menuisiers.fr</option> + <option>timide@menuisiers.fr</option> + <option>atchoum@menuisiers.fr</option> + <option>simplet@menuisiers.fr</option> + <option>doc@menuisiers.fr</option> + </select> +</p> +<p> + <input type="submit" value="Soumettre"> +</p> +</form></pre> + +<div>{{EmbedLiveSample("select", '', 220)}}</div> + +<p>Notez la différence d'apparence entre les deux contrôles de formulaire.</p> + +<pre class="brush: css">/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</pre> + +<p>Il existe plusieurs façons de sélectionner plusieurs options dans un élément <code><select></code> avec un attribut <code>multiple</code>. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches <kbd>Ctrl</kbd>, <kbd>Commande</kbd> ou <kbd>Maj</kbd> enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément <code><select></code>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur <kbd>Haut</kbd> et <kbd>Bas</kbd> pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur <kbd>Espace</kbd> , mais le support varie selon les navigateurs.</p> + +<h2 id="accessibility_concerns">Accessibilité</h2> + +<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>multiple</code>, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».</p> + +<p>Définir <code><a href="/fr/docs/Web/HTML/Attributes/size">size</a>="1"</code> sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> + <li><a href="/fr/docs/Web/HTML/Element/Input/email#allowing_multiple_e-mail_addresses">Autoriser les adresses électroniques multiples</a></li> +</ul> diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html index 6fe11543cf..73604d285f 100644 --- a/files/fr/web/html/attributes/pattern/index.html +++ b/files/fr/web/html/attributes/pattern/index.html @@ -1,8 +1,10 @@ --- -title: 'HTML attribute: pattern' +title: 'Attribut HTML : pattern' slug: Web/HTML/Attributes/pattern tags: - - Attribut + - Attribute + - Attributes + - Constraint Validation API - HTML - Reference translation_of: Web/HTML/Attributes/pattern @@ -10,37 +12,36 @@ original_slug: Web/HTML/Attributs/pattern --- <div>{{HTMLSidebar}}</div> -<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra <code>true</code>.</p> +<p class="summary">L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p> -<p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.</p> +<p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>.</p> -<div id="pattern-include"> -<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p> +<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> et <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p> <p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p> -<div class="note"> -<p><strong>Note :</strong> On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p> -</div> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p> </div> -<p>Certains types d'<code><input></code> qui prennent en charge l'attribut <code>pattern</code> (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra <code>true</code>.</p> +<p>Certains types d'<code><input></code> qui prennent en charge l'attribut <code>pattern</code> (notamment <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/typeMismatch"><code>typeMismatch</code></a> vaudra <code>true</code>.</p> -<h3 id="Utilisabilité">Utilisabilité</h3> +<h3 id="usability">Utilisabilité</h3> -<p>Lorsqu'on utilise l'attribut <code>pattern</code>, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/title">title</a></code> afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de <code>title</code> lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de <code>title</code> à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.</p> +<p>Lorsqu'on utilise l'attribut <code>pattern</code>, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a> afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de <code>title</code> lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de <code>title</code> à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.</p> -<h3 id="Validation_des_contraintes">Validation des contraintes</h3> +<h3 id="constraint_validation">Validation des contraintes</h3> -<p>Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.<br> +<p>Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a>.<br> L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre <code>^(?:</code> et <code>)$</code> afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> <p>Avec le fragment de code HTML suivant :</p> <div id="exemple1"> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - @@ -48,26 +49,26 @@ original_slug: Web/HTML/Attributs/pattern </label> </p></pre> -<p>Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.</p> +<p>Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut <a href="pattern"><code>pattern</code></a> défini sur chacun.</p> -<p>Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.</p> +<p>Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p> -<pre class="brush: css notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: red solid 3px; }</pre> -<p>{{EmbedLiveSample("exemple1", 300, 40)}}</p> +<div>{{EmbedLiveSample("exemple1", 300, 80)}}</div> </div> -<p>En utilisant les attributs <code><a href="/fr/docs/Web/HTML/Attributes/minlength">minlength</a></code> et <code><a href="/fr/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu <code>true</code>.</p> +<p>En utilisant les attributs <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> et <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> à la place, on aurait eu les propriétés <a href="/fr/docs/Web/API/validityState/tooLong"><code>validityState.tooLong</code></a> ou <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> qui auraient valu <code>true</code>.</p> -<h3 id="Indiquer_un_motif">Indiquer un motif</h3> +<h3 id="specifying_a_pattern">Indiquer un motif</h3> -<p>On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Validation_selon_une_expression_régulière">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p> +<p>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a> afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir <a href="/fr/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p> <p>L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Veuillez choisir un nom d'utilisateur : </label> <input type="text" id="uname" name="name" required size="45" @@ -81,7 +82,7 @@ original_slug: Web/HTML/Attributs/pattern </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -108,55 +109,49 @@ input:valid+span:after { }</pre> </div> -<h4 id="Résultat">Résultat</h4> +<p>Cela donne le résultat suivant :</p> -<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}</p> +<div>{{EmbedLiveSample('specifying_a_pattern', '', 130)}}</div> -<h3 id="Accessibilité">Accessibilité</h3> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.</p> +<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.</p> -<p>L'attribut <code>title</code> est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.</p> +<p>L'attribut <code>title</code> est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> + <th scope="col">Statut</th> </tr> </thead> <tbody> <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}</td> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> </tr> <tr> - <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}</td> + <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td> <td>{{Spec2('HTML5.1')}}</td> - <td></td> </tr> <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}</td> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> </tr> </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("html.elements.attributes.pattern")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">La validation des données de formulaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">La validation des données de formulaires</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li> </ul> diff --git a/files/fr/web/html/attributes/readonly/index.html b/files/fr/web/html/attributes/readonly/index.html new file mode 100644 index 0000000000..18131ec228 --- /dev/null +++ b/files/fr/web/html/attributes/readonly/index.html @@ -0,0 +1,114 @@ +--- +title: 'Attribut HTML : readonly' +slug: Web/HTML/Attributes/readonly +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/readonly +--- +<div>{{HTMLSidebar}}</div> + +<div class="notecard draft"> + <p><b>Brouillon :</b></p> + <p>Cette page n'est pas terminée.</p> +</div> + +<p class="summary">L'attribut booléen <strong><code>readonly</code></strong>, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut <code>readonly</code> est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.</p> + +<p>L'attribut <code>readonly</code> est pris en charge par les types <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>mois</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> de <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et les éléments de contrôle de formulaire <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a> correspondra.</p> + +<p>L'attribut n'est pas pris en charge ou pertinent pour <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> ou les types d'entrée qui ne sont déjà pas mutables, comme <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a>, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris <code>image</code>.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut <code>readonly</code> ne s'applique pas.</p> +</div> + +<p>Lorsqu'une entrée possède l'attribut <code>readonly</code>, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> s'y applique également. Inversement, les entrées qui prennent en charge l'attribut <code>readonly</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a>.</p> + +<h3 id="attribute_interactions">Interactions entre attributs</h3> + +<p>La différence entre <a href="/fr/docs/Web/HTML/Attributes/disabled"><code>disabled</code></a> et <code>readonly</code> est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.</p> + +<p>Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, <a href="required"><code>required</code></a> n'a aucun effet sur les entrées pour lesquelles l'attribut <code>readonly</code> est également spécifié.</p> + +<p>Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>readonly</code> est spécifié.</p> +</div> + +<h3 id="constraint_validation">Validation des contraintes</h3> + +<p>Si l'élément est en lecture seule, la valeur de l'élément ne peut pas être mise à jour par l'utilisateur et ne participe pas à la validation des contraintes.</p> + +<h2 id="examples">Exemples</h2> + +<h3 id="html">HTML</h3> + +<pre class="brush: html"><div class="group"> + <input type="textbox" value="Some value" readonly="readonly"/> + <label>Textbox</label> +</div> +<div class="group"> + <input type="date" value="2020-01-01" readonly="readonly"/> + <label>Date</label> +</div> +<div class="group"> + <input type="email" value="Some value" readonly="readonly"/> + <label>Email</label> +</div> +<div class="group"> + <input type="password" value="Some value" readonly="readonly"/> + <label>Password</label> +</div> +<div class="group"> + <textarea readonly="readonly">Some value</textarea> + <label>Message</label> +</div> +</pre> + +<h3 id="result">Résultat</h3> + +<div>{{EmbedLiveSample('examples')}}</div> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attributes.readonly")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>Les pseudo-classses <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> et <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/rel/index.html b/files/fr/web/html/attributes/rel/index.html new file mode 100644 index 0000000000..45c4bb4ec0 --- /dev/null +++ b/files/fr/web/html/attributes/rel/index.html @@ -0,0 +1,432 @@ +--- +title: 'Attribut HTML : rel' +slug: Web/HTML/Attributes/rel +tags: + - Attribute + - Attributes + - Constraint validation + - Link + - form + - rel +translation_of: Web/HTML/Attributes/rel +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary">L'attribut <strong><code>rel</code></strong> définit la relation entre une ressource liée et le document actuel. Valable sur <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.</p> + +<p>Le type de relations est donné par la valeur de l'attribut <code>rel</code>, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de <code>class</code>, qui n'exprime pas de sémantique, l'attribut <code>rel</code> doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut <code>rel</code> sont le <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">registre de relations de liens de l'IANA</a>, le <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">HTML Living Standard</a>, et la page <a href="https://microformats.org/wiki/existing-rel-values">existing-rel-values</a> librement modifiable dans le wiki microformats, <a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types">comme suggéré</a> par le Living Standard. Si un attribut <code>rel</code> non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le <a href="https://validator.w3.org/">W3C Markup Validation Service</a>) généreront un avertissement.</p> + +<p>Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.</p> + +<table class="standard-table"> + <caption>Valeurs de l'attribut <code>rel</code>, et les éléments pour lesquels chacun est pertinent.</caption> + <thead> + <tr> + <th scope="col">Valeur pour <code>rel</code></th> + <th scope="col">Description</th> + <th scope="col"><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a></th> + <th scope="col"><a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a></th> + <th scope="col"><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="#alternate"><code>alternate</code></a></td> + <td>Représentations alternatives du document actuel.</td> + <td>Lien</td> + <td>Lien</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#author"><code>author</code></a></td> + <td>Auteur du document ou de l'article en cours.</td> + <td>Lien</td> + <td>Lien</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#bookmark"><code>bookmark</code></a></td> + <td>Lien permanent pour la section de l'ancêtre le plus proche.</td> + <td>Non autorisé</td> + <td>Lien</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#canonical"><code>canonical</code></a></td> + <td>URL préférée pour le document actuel.</td> + <td>Lien</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/dns-prefetch"><code>dns-prefetch</code></a></td> + <td>Indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#external"><code>external</code></a></td> + <td>Le document référencé ne fait pas partie du même site que le document actuel.</td> + <td>Non autorisé</td> + <td>Annotation</td> + <td>Annotation</td> + </tr> + <tr> + <td><a href="#help"><code>help</code></a></td> + <td>Lien vers l'aide contextuelle.</td> + <td>Lien</td> + <td>Lien</td> + <td>Lien</td> + </tr> + <tr> + <td><a href="#icon"><code>icon</code></a></td> + <td>Une icône représentant le document actuel.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#license"><code>license</code></a></td> + <td>Indique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé.</td> + <td>Lien</td> + <td>Lien</td> + <td>Lien</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/manifest"><code>manifest</code></a></td> + <td>Manifeste de l'application web.</td> + <td>Lien</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/modulepreload"><code>modulepreload</code></a></td> + <td>Indique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#next"><code>next</code></a></td> + <td>Indique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé.</td> + <td>Lien</td> + <td>Lien</td> + <td>Lien</td> + </tr> + <tr> + <td><a href="#nofollow"><code>nofollow</code></a></td> + <td>Indique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé.</td> + <td>Non autorisé</td> + <td>Annotation</td> + <td>Annotation</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/noopener"><code>noopener</code></a></td> + <td>Crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut <code>target</code> appropriée).</td> + <td>Non autorisé</td> + <td>Annotation</td> + <td>Annotation</td> + </tr> + <tr> + <td><a href="#noreferrer"><code>noreferrer</code></a></td> + <td>Aucun en-tête <code>Referer</code> ne sera inclus. En outre, a le même effet que <code>noopener</code>.</td> + <td>Non autorisé</td> + <td>Annotation</td> + <td>Annotation</td> + </tr> + <tr> + <td><a href="#opener"><code>opener</code></a></td> + <td>Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « <code>_blank</code> » comme valeur d'attribut <code>target</code>).</td> + <td>Non autorisé</td> + <td>Annotation</td> + <td>Annotation</td> + </tr> + <tr> + <td><a href="#pingback"><code>pingback</code></a></td> + <td>Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/preconnect"><code>preconnect</code></a></td> + <td>Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/prefetch"><code>prefetch</code></a></td> + <td>Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/preload"><code>preload</code></a></td> + <td>Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut <a href="as"><code>as</code></a> (et la priorité associée à la destination correspondante).</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Link_types/prerender"><code>prerender</code></a></td> + <td>Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#prev"><code>prev</code></a></td> + <td>Indique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé.</td> + <td>Lien</td> + <td>Lien</td> + <td>Lien</td> + </tr> + <tr> + <td><a href="#search"><code>search</code></a></td> + <td>Donne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes.</td> + <td>Lien</td> + <td>Lien</td> + <td>Lien</td> + </tr> + <tr> + <td><a href="#stylesheet"><code>stylesheet</code></a></td> + <td>Importe une feuille de style.</td> + <td>Ressource externe</td> + <td>Non autorisé</td> + <td>Non autorisé</td> + </tr> + <tr> + <td><a href="#tag"><code>tag</code></a></td> + <td>Donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel.</td> + <td>Non autorisé</td> + <td>Lien</td> + <td>Non autorisé</td> + </tr> + </tbody> +</table> + +<p>L'attribut <code>rel</code> concerne les éléments <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.</p> + +<p>L'attribut <code>rel</code> n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, si l'attribut <code>rel</code> est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> créeront quand même des liens, mais sans relation définie.</p> + +<h2 id="values">Valeurs</h2> + +<p>S'il existe plusieurs <code><link rel="icon"></code>, le navigateur utilise leur attribut <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a> et <a href="sizes"><code>sizes</code></a> pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.</p> + +<p><b>Note :</b> L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectivement.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p> +</div> + +<dl> + <dt><code id="alternate">alternate</code></dt> + <dd>Indique une représentation alternative du document actuel. Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, la signification dépend des valeurs des autres attributs. + <ul> + <li>Avec le mot clé <a href="#stylesheet"><code>stylesheet</code></a> sur un <code><link></code>, il crée une feuille de style alternative. + <pre class="brush:html"><!-- une feuille de style persistante --> +<link rel="stylesheet" href="default.css"> +<!-- feuilles de style alternativement --> +<link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé"></pre> + </li> + <li>Avec un attribut <a href="hreflang"><code>hreflang</code></a> qui diffère de la langue du document, cela indique une traduction.</li> + <li>Avec l'attribut <a href="type"><code>type</code></a>, il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec <code>type="application/rss+xml"</code>, il crée un lien hypertexte référençant un flux de syndication. + <pre class="brush:html"><link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog"></pre> + </li> + <li>Les attributs <a href="hreflang"><code>hreflang</code></a> et <a href="type"><code>type</code></a> spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias : + <pre class="brush:html"><link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)"> +<link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français"></pre> + </li> + </ul> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>L'attribut obsolète <code>rev="made"</code> est traité comme <code>rel="alternate"</code>.</p> + </div> + </dd> + <dt><code id="author">author</code></dt> + <dd>Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot-clé <code>author</code> crée un lien hypertexte. Avec <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, il indique que le document lié (ou <code>mailto:</code>) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> s'il en existe un, sinon le document entier. Pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, il représente l'auteur du document entier.</dd> + <dt><code id="bookmark">bookmark</code></dt> + <dd>Pertinent comme valeur de l'attribut <code>rel</code> pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> ou <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.</dd> + <dt><code id="canonical">canonical</code></dt> + <dd>Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.</dd> + <dt><code id="dns-prefetch">dns-prefetch</code></dt> + <dd>Pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> à la fois dans les éléments <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir <a href="/fr/docs/Web/Performance/dns-prefetch">dns-prefetch</a> décrit dans les conseils.</dd> + <dt><code id="external">external</code></dt> + <dd>S'appliquant à <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.</dd> + <dt><code id="help">help</code></dt> + <dd>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot clé <code>help</code> indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <code><link></code>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> et qu'elle est prise en charge, le <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> par défaut sera <code>help</code> au lieu de <code>pointer</code>.</dd> + <dt><code id="icon">icon</code></dt> + <dd> + <p>Valable avec <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.</p> + + <p>L'utilisation la plus courante de la valeur <code>icon</code> est le favicon :</p> + + <pre class="brush: html"><link rel="icon" href="favicon.ico"></pre> + + <p>S'il existe plusieurs <code><link rel="icon"></code>, le navigateur utilise leurs attributs <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a>, et <a href="sizes"><code>sizes</code></a> pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Avant Firefox 83, l'attribut <a href="/fr/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un problème pour Chrome</a>.</p> + + <p>L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a>.</p> + + <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p> + </div> + </dd> + <dt><code id="license">license</code></dt> + <dd> + <p>Valable sur les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> et <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, la valeur <code>license</code> indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.</p> + + <pre class="brush: html"><link rel="license" href="#license"></pre> + + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Bien que reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p> + </div> + </dd> + <dt><code id="manifest">manifest</code></dt> + <dd><a href="/fr/docs/Web/Manifest">Manifeste de l'application Web</a>. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».</dd> + <dt><code id="modulepreload">modulepreload</code></dt> + <dd>Utile pour améliorer les performances, et pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> n'importe où dans le document, la définition de <code>rel="modulepreload"</code> indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens <code>modulepreload</code> peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi <a href="/fr/docs/Web/HTML/Link_types/modulepreload">Types de liens : <code>modulepreload</code></a>.</dd> + <dt><code id="next">next</code></dt> + <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, les valeurs <code>next</code> indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <code><link></code>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.</dd> + <dt><code id="nofollow">nofollow</code></dt> + <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot clé <code>nofollow</code> indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.</dd> + <dt><code id="noopener">noopener</code></dt> + <dd>Cela concerne <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut <code>target</code>). En d'autres termes, il fait en sorte que le lien se comporte comme si <a href="/fr/docs/Web/API/Window/opener"><code>window.opener</code></a> était nul et que <code><a href="target">target</a>="_parent"</code> était défini.<br> + <br> + C'est le contraire de <a href="#opener">opener</a>.</dd> + <dt><code id="noreferrer">noreferrer</code></dt> + <dd>Pertinent pour <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête <code>Referer</code> ne sera inclus), et crée un contexte de navigation de haut niveau comme si <code>noopener</code> était également défini.</dd> + <dt><code id="opener">opener</code></dt> + <dd>Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « <code>_blank</code> » comme valeur d'attribut <code>target</code>). Effectivement, c'est le contraire de <a href="#noopener">noopener</a>.</dd> + <dt><code id="pingback">pingback</code></dt> + <dd>Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.</dd> + <dt><code id="preconnect">preconnect</code></dt> + <dd>Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.</dd> + <dt><code id="prefetch">prefetch</code></dt> + <dd>Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.</dd> + <dt><code id="preload">preload</code></dt> + <dd>Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut <a href="as"><code>as</code></a> (et la priorité associée à la destination correspondante).</dd> + <dt><code id="prerender">prerender</code></dt> + <dd>Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.</dd> + <dt><code id="prev">prev</code></dt> + <dd> + <p>Similaire au mot-clé <a href="#next">next</a>, pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, les valeurs <code>prev</code> indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Le synonyme <code>previous</code> est incorrect et ne doit pas être utilisé.</p> + </div> + </dd> + <dt><code id="search">search</code></dt> + <dd> + <p>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>< area></code></a>, les mots-clés <code>search</code> indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.</p> + + <p>Si l'attribut <a href="type"><code>type</code></a> est défini à <code>application/opensearchdescription+xml</code>, la ressource est un <a href="/fr/docs/Web/OpenSearch">prolongateur OpenSearch</a> qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</p> + </dd> + <dt><code id="stylesheet">stylesheet</code></dt> + <dd> + <p>Valable pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, il importe une ressource externe à utiliser comme feuille de style. L'attribut <a href="type"><code>type</code></a> n'est pas nécessaire, car il s'agit d'une feuille de style <code>text/css</code>, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type <code>text/css</code>, il est préférable de déclarer le type.</p> + + <p>Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.</p> + + <p>Lorsqu'il est utilisé avec le mot-clé <a href="#alternate">alternate</a>, il définit une feuille de style alternative. Dans ce cas, incluez un <a href="type"><code>title</code></a> non vide.</p> + + <p>La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut <a href="media"><code>media</code></a>.</p> + + <p>Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.</p> + </dd> + <dt><code id="tag">tag</code></dt> + <dd>Valable pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur <code>tag</code> de l'attribut <code>rel</code> concerne un seul document.</dd> +</dl> + +<h3 id="non-standard_values">Valeurs non standard</h3> + +<dl> + <dt>apple-touch-icon-precomposed</dt> + <dd> + <pre class="brush: html"><!-- iPad de troisième génération avec écran Retina haute résolution : --> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"> + <!-- iPhone avec écran Retina haute résolution : --> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png"> + <!-- première et deuxième génération d'iPad: --> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png"> + <!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : --> + <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png"> + <!-- favicône de base --> + <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png"></pre> + </dd> +</dl> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'l\'attribut rel')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ajout de <code>opener</code>. Mise en place de <code>noopener</code> par défaut pour <code>target="_blank"</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'l\'attribut rel')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.<br> + Renommage de <code>copyright</code> en <code>license</code>.<br> + Suppression de <code>start</code>, <code>chapitre</code>, <code>section</code>, <code>subsection</code> et <code>appendice</code>.</td> + </tr> + <tr> + <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Ajout de <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td>Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.<br> + Renommage de <code>previous</code> par <code>prev</code>.<br> + Suppression de <code>top</code> et <code>search</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td> + <p><span class="spec-obsolete">Obsolète</span></p> + </td> + <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td><span class="spec-obsolete">Obsolète</span></td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.link.rel")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>La propriété <a href="/fr/docs/Web/API/HTMLLinkElement/relList"><code>HTMLLinkElement.relList</code></a></li> + <li>La propriété <a href="/fr/docs/Web/API/HTMLAnchorElement/relList"><code>HTMLAnchorElement.relList</code></a></li> + <li>La propriété <a href="/fr/docs/Web/API/HTMLAreaElement/relList"><code>HTMLAreaElement.relList</code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/required/index.html b/files/fr/web/html/attributes/required/index.html new file mode 100644 index 0000000000..a9ee8bdaaf --- /dev/null +++ b/files/fr/web/html/attributes/required/index.html @@ -0,0 +1,102 @@ +--- +title: 'Attribut HTML : required' +slug: Web/HTML/Attributes/required +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/required +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary">L'attribut booléen <strong><code>required</code></strong>, 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 <code>required</code> est pris en charge pour les éléments <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href=" /fr/docs/Web/HTML/Element/Input/month" ><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a>, les éléments <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a> s'appliquera.</p> + +<p>L'attribut n'est pas pris en charge ou n'est pas pertinent pour <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a> car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris <code>image</code>.</p> + +<p>Notez que <code>color</code> et <code>range</code> ne supportent pas <code>required</code>, mais le type <code>color</code> est par défaut <code>#000000</code>, et <code>range</code> prend par défaut le point médian entre <code>min</code> et <code>max</code> — avec <code>min</code> et <code>max</code> prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.</p> + +<p>Dans le cas d'un groupe de boutons <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> de même nom, si un seul bouton radio dans le groupe a l'attribut <code>required</code>, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut <code>required</code> dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.</p> + +<p>Dans le cas d'un même groupe nommé de types d'entrée <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, seules les cases à cocher avec l'attribut <code>required</code> sont obligatoires.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Le réglage <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.</p> +</div> + +<h2 id="attribute_interactions">Interactions entre attributs</h2> + +<p>Comme un champ en lecture seule ne peut pas avoir de valeur, <code>required</code> n'a aucun effet sur les entrées dont l'attribut <a href="readonly"><code>readonly</code></a> est également spécifié.</p> + +<h2 id="usability">Utilisabilité</h2> + +<p>Lorsque vous incluez l'attribut <code>required</code>, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a>, en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge <code>required</code>.</p> + +<h2 id="constraint_validation">Validation des contraintes</h2> + +<p>Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de <a href="/fr/docs/Web/API/ValidityState/valueMissing"><code>valueMissing</code></a> et l'élément correspondra à la pseudo classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p> + +<h2 id="examples">Exemple</h2> + +<h3 id="html">HTML</h3> + +<pre class="brush: html"><form> + <div class="group"> + <input type="text"> + <label>Normal</label> + </div> + <div class="group"> + <input type="text" required="required"> + <label>Requis</label> + </div> + <input type="submit"> +</form></pre> + +<h3 id="result">Résultat</h3> + +<div>{{EmbedLiveSample('examples')}}</div> + +<h2 id="accessibility_concerns">Accessibilité</h2> + +<p>Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.</p> + + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'l\'attribut required')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'l\'attribut required')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'l\'attribut required')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attributes.required")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>La propriété <a href="/fr/docs/Web/API/validityState/valueMissing"><code>validityState.valueMissing</code></a></li> + <li>Les pseudo-classes <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> et <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/size/index.html b/files/fr/web/html/attributes/size/index.html new file mode 100644 index 0000000000..8e6c06105a --- /dev/null +++ b/files/fr/web/html/attributes/size/index.html @@ -0,0 +1,74 @@ +--- +title: 'Attribut HTML : size' +slug: Web/HTML/Attributes/size +tags: + - Attribute + - HTML + - Input + - Reference + - Select +translation_of: Web/HTML/Attributes/size +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary">L'attribut <strong><code>size</code></strong> définit la largeur de l'élément <a href="/fr/docs/Web/HTML/Element/input"><code><input></code></a> et la hauteur de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>. Pour <code>input</code>, si l'attribut <code>type</code> est <a href="/fr/docs/Web/HTML/Element/input/text"><code>text</code></a> ou <a href="/fr/docs/Web/HTML/Element/input/password"><code>password</code></a> alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun <code>size</code> n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.</p> + +<p>L'attribut <code>size</code> n'a aucun impact sur la validation des contraintes.</p> + +<h2 id="examples">Exemples</h2> + +<p>En ajoutant <code>size</code> sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.</p> + +<pre class="brush: html"><label for="fruit">Entrez un fruit</label> <input type="text" size="15" id="fruit"> +<label for="vegetable">Entrez un légume</label> <input type="text" id="vegetable"> + +<select name="fruits" size="5"> + <option>banane</option> + <option>cerise</option> + <option>fraise</option> + <option>durian</option> + <option>myrtille</option> +</select> + +<select name="vegetables" size="5"> + <option>carotte</option> + <option>concombre</option> + <option>chou-fleur</option> + <option>céleri</option> + <option>feuilles de collard</option> +</select></pre> + +<p>{{EmbedLiveSample('examples')}}</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.attribute.size")}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li> +</ul> diff --git a/files/fr/web/html/attributes/step/index.html b/files/fr/web/html/attributes/step/index.html new file mode 100644 index 0000000000..fca8bc80d0 --- /dev/null +++ b/files/fr/web/html/attributes/step/index.html @@ -0,0 +1,134 @@ +--- +title: 'Attribut HTML : step' +slug: Web/HTML/Attributes/step +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Reference + - step +translation_of: Web/HTML/Attributes/step +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary">L'attribut <strong><code>step</code></strong> est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé <code>any</code>. Il est valable pour les types de saisie numérique, notamment les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>.</p> + +<p><code>step</code> définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale <code>any</code>, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>).</p> + +<p>La valeur des incréments par défaut pour les entrées <code>number</code> est 1, ce qui permet de ne saisir que des nombres entiers, <em>à moins que</em> la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées <code>time</code> est de 1 seconde, 900 étant égal à 15 minutes.</p> + +<h2 id="syntax">Syntaxe</h2> + +<table class="standard-table"> + <caption>Valeurs d'incrémentation par défaut</caption> + <thead> + <tr> + <th scope="col">Type d'entrée</th> + <th scope="col">Valeur</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> + <td>1 (jour)</td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> + <td>1 (mois)</td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> + <td>1 (semaine)</td> + <td><code class="brush: html"><input type="week" min="2019-W23" step="2"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> + <td>60 (secondes)</td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> + <td>1 (jour)</td> + <td><code class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> + <td>1</td> + <td><code class="brush: html"><input type="number" min="0" step="0.1" max="10"></code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> + <td>1</td> + <td><code class="brush: html"><input type="range" min="0" step="2" max="10"></code></td> + </tr> + </tbody> +</table> + +<p>Si <code>any</code> n'est pas explicitement défini, les valeurs valides pour les types de saisie <code>number</code>, date/heure, et les types d'entrée <code>range</code> sont égales à la base du pas — la valeur <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et les incréments de la valeur du pas, jusqu'à la valeur <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>, si spécifiée. Par exemple, si on a <code><input type="number" min="10" step="2"></code> tout entier pair, 10 ou grand, est valide. S'il est omis, <code><input type="number"></code>, tout entier est valide, mais les flottants, comme <code>4,2</code>, ne le sont pas, car <code>step</code> est par défaut à 1. Pour que <code>4,2</code> soit valide, <code>step</code> aurait dû être défini à <code>any</code>, <code>0,1</code>, <code>0,2</code>, et la valeur min aurait dû être un nombre se terminant par .2, comme <code><input type="number" min="-5.2"></code>.</p> + +<h3 id="min_impact_on_step">L'impact de min sur step</h3> + +<p>Les valeurs de <code>min</code> et <code>step</code> définissent ce que sont les valeurs valides, même si l'attribut <code>step</code> n'est pas inclus, car <code>step</code> a par défaut la valeur <code>0</code>.</p> + +<p>Nous ajoutons une grande bordure rouge autour des entrées invalides :</p> + +<pre class="brush: css">input:invalid { + border: solid red 3px; +}</pre> + +<p>Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.</p> + +<pre class="brush: html"><input id="myNumber" name="myNumber" type="number" step="2" min="1.2"></pre> + +<p>Les valeurs valides comprennent <code>1,2</code>, <code>3,2</code>, <code>5,2</code>, <code>7,2</code>, <code>9,2</code>, <code>11,2</code>, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de <code>1,2</code> et plus.</p> + +<div>{{EmbedLiveSample("min_impact_on_step","",50)}}</div> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> +</div> + +<p>Voir <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> pour plus d'informations.</p> + +<h2 id="accessibility_concerns">Accessibilité</h2> + +<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>min</code>, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p> + +<h2 id="specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></li> + <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> + <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> + <li>La propriété <a href="/fr/docs/Web/API/validityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> + <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>Les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></li> +</ul> |