Тег <output>: отображение результата вычисления
Элемент output представляет результат вычисления или действия пользователя. Он описывает назначение значения, но не содержит встроенного алгоритма расчёта.
Назначение
Элемент output представляет результат вычисления или действия пользователя. Он описывает назначение значения, но не содержит встроенного алгоритма расчёта.
Как это работает
For перечисляет через пробел id элементов, от которых зависит результат. Name позволяет обращаться к output через коллекцию элементов формы. Значение output не включается в обычные отправляемые данные формы.
Пример
<form>
<label for="pages">Страниц</label><input id="pages" type="number" value="3">
<label for="minutes">Минут на страницу</label><input id="minutes" type="number" value="4">
<p>Исходная оценка: <output for="pages minutes" name="total">12</output> минут.</p>
<p>В этом примере результат задан заранее и не пересчитывается.</p>
</form>Что должно получиться
На странице показан результат 12 для начальных данных. Изменение чисел само по себе не обновит его: нужен отдельный обработчик, который проверит ввод и запишет новое значение.
Граница применения и частая ошибка
Не путайте output с input readonly: назначение и участие в отправке отличаются. Не объявляйте каждое промежуточное изменение слишком часто; результат может озвучиваться вспомогательными технологиями. Сервер не должен доверять присланным клиентом вычислениям.
Самостоятельная проверка
В собственном учебном файле добавьте пересчёт по событию input. Используйте valueAsNumber и отдельно обработайте пустое поле. Проверьте, что некорректный ввод не превращается в видимый результат NaN.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.