Элемент <output> в HTML5 представляет собой контейнер, в который скрипт может поместить результат вычисления или действия пользователя.

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

Назначение: Отображает результат операции, выполненной, например, скриптом JavaScript.
Неинтерактивность: Пользователи не могут редактировать содержимое <output>.
Семантика: Указывает на то, что содержимое является результатом.
Атрибуты:
- for: Список ID элементов, которые были использованы в вычислении (опционально). Связывает <output> с элементами, влияющими на его значение.
- form: ID формы, к которой принадлежит элемент (для <output>, находящегося вне своей формы).
- name: Имя элемента (опционально).

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

<form onsubmit="event.preventDefault(); calculate()">
  <input type="number" id="a" value="1"> +
  <input type="number" id="b" value="2"> =
  <output name="result" for="a b" id="result"></output>
  <button type="submit">Посчитать</button>
</form>

<script>
  function calculate() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    document.getElementById('result').value = parseInt(a) + parseInt(b);
  }
</script>

Совместимость:

Поддерживается большинством современных браузеров.

Отличия от других элементов:

От <span> или <div>: Имеет семантическое значение "результат", что улучшает доступность и понимание структуры страницы.
От <input type="text"> или <textarea>: Является элементом только для отображения, не предназначен для пользовательского ввода.

Использование с API Constraint Validation:

Не участвует в стандартной валидации форм, так как не является элементом ввода пользователя.

Преимущества использования <output>:

Семантика: Четко определяет назначение содержимого.
Доступность: Улучшает понимание структуры страницы для вспомогательных технологий.
Читаемость кода: Делает код более понятным.

Что такое элемент output в HTML5?