HTML attribute: for
Thefor attribute is an allowed attribute for<label> and<output>. When used on a<label> element it indicates the form element that this label describes. When used on an<output> element it allows for an explicit relationship between the elements that represent values which are used in the output.
Try it
<p> <label>First Name (no "for" attribute):</label> <input type="text" value="Jane" /></p><p> <label for="last">Last Name (w/ "for" attribute):</label> <input type="text" value="Doe" /></p><p> <strong>Full Name:</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);Usage notes
When used as an attribute of<label>, thefor attribute has a value which is theid of the form element it relates to.
html
<label for="username">Your name</label> <input type="text" />When used as an attribute of<output>, thefor attribute has a value which is a space separated list of theid values of the elements which are used to create the output.
html
<input type="range" name="b" value="50" /> +<input type="number" name="a" value="10" /> =<output name="result" for="a b">60</output>Examples
Specifications
| Specification |
|---|
| HTML # attr-label-for |
| HTML # attr-output-for |