Liste des attributs

Attribut de contenu ou attribut IDL ?

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

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 element.setAttribute() et 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 maxlength d'un élément <input> à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

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 élément.toto. 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.

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments <input> vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength 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, input.maxlength 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.

Les attributs IDL peuvent refléter d'autres types ^(angl.) 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 les règles énoncées dans la spécification ^(angl.), mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeur·euse·s, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (select.size, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.

Attributs booléens

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens ^(angl.). Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

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 :

<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>

Pour être tout à fait explicite, les valeurs "true" et "false" 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 checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

Attributs du gestionnaire d'évènements

<div onclick="console.log(new URL(location))">Mauvais exemple</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' fait maintenant référence à document.URL au lieu de window.URL
      // TypeError: URL is not a constructor
    }
  }
}

En plus des attributs répertoriés dans le tableau ci-dessus, les gestionnaires d'évènements globaux — tel que onclick — peuvent également être définis comme étant des attributs du contenu sur tous les éléments.

Tous les attributs du gestionnaire d'évènements acceptent une chaîne de caractères. La chaîne de caractères sera utilisée pour synthétiser une fonction JavaScript comme function nom(/*argument*/) {corps}, où nom est le nom de l'attribut , et corps est la valeur de l'attribut. Le gestionnaire reçoit les mêmes paramètres que son homologue du gestionnaire d'évènements JavaScript — la plupart des gestionnaires ne reçoivent qu'un seul paramètre event, tandis que onerror en reçoit cinq : event, source, lineno, colno, error. Cela signifie que vous pouvez, en général, utiliser la variable event dans l'attribut.

<div onclick="console.log(event)">Cliquez sur moi !</div>
<!-- Le gestionnaire synthétisé a un nom ; vous pouvez le référencer lui-même -->
<div onclick="console.log(onclick)">Cliquez sur moi !</div>

Voir aussi

• Les éléments HTML