Attribut HTML : for
L'attribut for 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 id="first" type="text" value="Jeanne" />
</p>
<p>
<label for="last">Nom (avec attribut « for ») :</label>
<input id="last" type="text" value="Dupont" />
</p>
<p id="result">
<strong id="result-label">Nom complet :</strong>
<output for="first last" aria-labelledby="result-label" id="output"></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'attribut for 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" id="username" />
Lorsqu'il est utilisé comme attribut de <output>, l'attribut for a une valeur qui est une liste séparée, par des espaces, des valeurs id des éléments, qui sont utilisés pour créer l'output.
<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>
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 |
Compatibilité des navigateurs
html.elements.label.for
Loading…
html.elements.output.for
Loading…