`for` Атрибут HTML

Атрибут 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: 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);

Примечания по использованию

При использовании в качестве атрибута элемента <label> атрибут for имеет значение, равное id элемента формы, с которым он связан.

<label for="username">Your name</label> <input type="text" id="username" />

При использовании в качестве атрибута элемента <output> атрибут for имеет значение в виде разделённого пробелами списка значений id элементов, используемых для создания выходных данных.

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

Спецификации

Спецификация
HTML> # attr-label-for>
HTML> # attr-output-for>

Совместимость с браузерами

html.elements.label.for

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`for`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2

html.elements.output.for

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`for`	10	≤18	4	11	7	18	4	11	7	1.0	4.4	7

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/for

for Атрибут HTML