Атрибут for тега <output>
Описание
Атрибут for для элемента <output> связывает его с элементами формы, чьи значения влияют на его содержимое. Указывает идентификаторы элементов через пробел.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" id="a" value="50">
+ <input type="number" id="b" value="25">
= <output name="result" for="a b">75</output>
</form>
Основные характеристики:
| Характеристика | Описание |
|---|---|
| Синтаксис | Список ID элементов через пробел |
| Связывание | С элементами формы (input, select, textarea) |
| Доступность | Улучшает семантику для скринридеров |
Рекомендации по использованию:
- Используйте для визуализации результатов вычислений
- Сочетайте с JavaScript для динамических обновлений
- Указывайте осмысленные связи между элементами
- Проверяйте работу в целевых браузерах
Пример с несколькими элементами:
<form oninput="price.value = qty.value * unit.value">
Количество: <input type="number" id="qty" value="1" min="1">
Цена за ед.: <input type="number" id="unit" value="100">
Итого: <output name="price" for="qty unit">100</output>
</form>
Особенности работы:
- Не обновляет значение автоматически - требует JavaScript
- Служит семантическим маркером для вывода данных
- Поддерживается всеми современными браузерами
- Может использоваться без формы
Примечание: Хотя атрибут for улучшает семантику, реальная функциональность элемента <output> достигается только с JavaScript. Для сложных вычислений рассмотрите использование фреймворков.