HTML 属性：for

for 属性是 <label> 和 <output> 允许使用的属性。当用于 <label> 元素时，它表示该标签所描述的表单元素。当用于 <output> 元素时，它允许在代表输出中使用的值的元素之间建立明确的关系。

尝试一下

<p>
  <label>First Name (no "for" attribute):</label>
  <input id="first" type="text" value="Jane" />
</p>
<p>
  <label for="last">Last Name (w/ "for" attribute):</label>
  <input id="last" type="text" value="Doe" />
</p>
<p id="result">
  <strong id="result-label">Full Name:</strong>
  <output for="first last" aria-labelledby="result-label" id="output"></output>
</p>

label[for="paragraph"] {
  color: rebbeccapurple;
}

#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);

使用说明

当作为 <label> 的属性使用时，for 属性的值是与之相关的表单元素的id。

html
<label for="username">你的名字</label> <input type="text" id="username" />

作为 <output> 的属性使用时，for 属性的值是一个空格分隔的列表，其中包含用于创建输出的元素的 id 值。

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>

示例

请参阅 <label> 和 <output> 的元素页面上的使用示例。

规范

Specification
HTML
# attr-label-for
HTML
# attr-output-for

浏览器兼容性

html.elements.label.for

BCD tables only load in the browser

html.elements.output.for

BCD tables only load in the browser