Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Attribut HTML : for
L'attributfor est un attribut autorisé pour les éléments HTML<label> et<output>. Lorsqu'il est utilisé sur un élément<label>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément<output>, 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<output>.
Exemple interactif
<p> <label>Prénom (sans attribut « for ») :</label> <input type="text" value="Jeanne" /></p><p> <label for="last">Nom (avec attribut « for ») :</label> <input type="text" value="Dupont" /></p><p> <strong>Nom complet :</strong> <output for="first last" aria-labelledby="result-label"></output></p>label[for="paragraph"] { color: rebeccapurple;}#result { text-align: center;}#result-label { font-size: 16pt;}#result-label,#output { display: block;}const firstNameEl = document.getElementById("first");const lastNameEl = document.getElementById("last");const outputEl = document.getElementById("output");function updateOutput() { const value = `${firstNameEl.value} ${lastNameEl.value}`; outputEl.innerText = value;}updateOutput();firstNameEl.addEventListener("input", updateOutput);lastNameEl.addEventListener("input", updateOutput);Notes d'utilisation
Lorsqu'il est utilisé comme attribut de<label>, l'attributfor a une valeur qui est l'id de l'élément de formulaire, auquel il se rapporte.
<label for="username">Votre nom</label> <input type="text" />Lorsqu'il est utilisé comme attribut de<output>, l'attributfor a une valeur qui est une liste séparée, par des espaces, des valeursid des éléments, qui sont utilisés pour créer l'output.
<input type="range" name="b" value="50" /> +<input type="number" name="a" value="10" /> =<output name="result" for="a b">60</output>Exemples
Voir des exemples d'utilisation sur les pages des éléments pour<label> et<output>.
Spécifications
| Specification |
|---|
| HTML # attr-label-for |
| HTML # attr-output-for |