Атрибут form тега <output>

Описание

Атрибут form для элемента <output> связывает его с конкретной формой, даже если элемент находится вне этой формы. Это позволяет сохранять семантическую связь и управлять выводом данных.

Пример использования:
<form id="calcForm" oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="10"> + <input type="number" id="b" value="20"> </form> <output name="result" form="calcForm" for="a b">30</output>

Основные характеристики:

Характеристика Описание
Значение ID формы (без символа #)
Связывание С любой формой в документе
Поведение Позволяет размещать output вне формы

Рекомендации по использованию:

  • Используйте для логического разделения интерфейса
  • Сочетайте с атрибутом for для указания источников данных
  • Убедитесь, что ID формы уникален в документе
  • Проверяйте поддержку в старых браузерах

Пример сложной формы:

<form id="orderForm"> <input type="number" id="quantity" value="1" min="1"> <select id="product"> <option value="100">Товар A (100 руб)</option> <option value="200">Товар B (200 руб)</option> </select> </form> <output form="orderForm" name="total" for="quantity product"> Итого: <script> document.write(document.getElementById('quantity').value * document.getElementById('product').value) </script> руб </output>

Особенности работы:

  • Не влияет на визуальное отображение
  • Не обновляет данные автоматически (требуется JavaScript)
  • Поддерживается всеми современными браузерами
  • Улучшает семантику и доступность

Примечание: Хотя атрибут form обеспечивает логическую связь элемента с формой, для реального обновления содержимого <output> по-прежнему требуется использование JavaScript или обработчиков событий.