Элемент output для вычислений [Модуль 7: Формы и элементы ввода]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В этом модуле мы разберемся с элементом `<output>`, который здорово помогает делать формы интерактивными. Представь, что ты двигаешь ползунок для выбора цены, и итоговая стоимость тут же обновляется на экране. Вот за такое волшебство и отвечает `<output>`. Он создан специально для того, чтобы показывать результаты каких-то вычислений или действий пользователя прямо в форме. Мы начнем с самых простых примеров, а затем соберем несколько небольших, но полезных калькуляторов. Готов сделать свои формы умнее?

Список тем

Создание элемента <output>

id: 37862_html-forms-output-1

Давайте начнем с основ. Создайте элемент для вывода результата вычислений. Внутри этого элемента уже есть текст 'Результат появится здесь'. Вам нужно заменить пропуски на правильный тег.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
output {
  display: inline-block;
  font-weight: bold;
  color: #555;
  border: 1px dashed #ccc;
  padding: 5px 10px;
  min-width: 50px;
}

                     <form>
  <input1>
    Результат появится здесь
  </input1>
</form>

HTML

<form>
  <input1>
    Результат появится здесь
  </input1>
</form>

Для вывода результатов вычислений в HTML формах используется специальный тег `<output>`. Вам нужно вписать имя этого тега в оба пропуска, чтобы создать открывающий и закрывающий теги.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Именование элемента output

id: 37862_html-forms-output-2

Каждому элементу формы полезно давать имя для идентификации данных при отправке на сервер. Добавьте атрибут `name` со значением 'calculation_result' к элементу `<output>`.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
output {
  display: inline-block;
  font-weight: bold;
  color: #007bff;
  font-size: 1.2em;
  padding: 0 5px;
}

                     <form>
  <output input1="calculation_result">0</output>
</form>

HTML

<form>
  <output input1="calculation_result">0</output>
</form>

Чтобы задать имя элементу формы, используется атрибут `name`. Вставьте `name` в пропуск.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Интерактивное отображение значения

id: 37862_html-forms-output-3

Сделаем форму 'живой'. Добавьте обработчик события, который будет брать значение из ползунка с `id='volume'` и помещать его в элемент `<output>` с `name='result'`. Это делается прямо в теге `<form>`.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}
input[type="range"] {
  width: 100%;
  margin-bottom: 15px;
}
output {
  font-weight: bold;
  color: #007bff;
}

                     <form input1="result.value = volume.value">
  <label for="volume">Громкость:</label>
  <input type="range" id="volume" name="volume" value="50">
  <output name="result" for="volume">50</output>
</form>

HTML

<form input1="result.value = volume.value">
  <label for="volume">Громкость:</label>
  <input type="range" id="volume" name="volume" value="50">
  <output name="result" for="volume">50</output>
</form>

Чтобы форма реагировала на изменения внутри нее, используется атрибут-событие `oninput`. Его значением будет небольшой JavaScript-код: `result.value = volume.value`, который присваивает значение элемента `volume` элементу `result`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Связывание output с элементом ввода

id: 37862_html-forms-output-4

Чтобы семантически связать элемент вывода с элементом, который на него влияет, ползунку нужен `id`, а элементу `<output>` — атрибут `for`. Свяжите `<output>` с ползунком, задав ему `id` 'level' и указав это значение в `for` у `<output>`.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}
input[type="range"] {
  width: 100%;
}
output {
  font-weight: bold;
  color: #007bff;
}

                     <form oninput="res.value = level.value">
  <label for="level">Уровень:</label>
  <input type="range" input1="level" value="25">
  <output name="res" input2="level">25</output>
</form>

HTML

<form oninput="res.value = level.value">
  <label for="level">Уровень:</label>
  <input type="range" input1="level" value="25">
  <output name="res" input2="level">25</output>
</form>

Ползунку (`<input>`) нужно добавить атрибут `id` со значением 'level'. Элементу `<output>` нужно добавить атрибут `for` с таким же значением ('level').

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Связывание с несколькими элементами

id: 37862_html-forms-output-5

Атрибут `for` может содержать ID нескольких элементов, разделенных пробелом. Укажите в атрибуте `for` элемента `<output>` идентификаторы обоих полей ввода ('a' и 'b'), чтобы показать, что результат зависит от них обоих.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
input[type="number"] {
  width: 60px;
}
output {
  font-weight: bold;
  font-size: 1.2em;
  color: #28a745;
}

                     <form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10">
  +
  <input type="number" id="b" name="b" value="20">
  =
  <output name="result" input1="a b">30</output>
</form>

HTML

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="10">
  +
  <input type="number" id="b" name="b" value="20">
  =
  <output name="result" input1="a b">30</output>
</form>

Вам нужно добавить атрибут `for` к элементу `<output>`. Его значением должна быть строка, содержащая ID первого поля ('a'), пробел, и ID второго поля ('b').

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Калькулятор стоимости

id: 37862_html-forms-output-6

Создадим калькулятор для интернет-магазина. Цена за единицу товара — 150. Пользователь выбирает количество ползунком. Напишите в `oninput` код, который умножает количество (`quantity.value`) на 150 и выводит результат в `output` с `name='total'`.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
label, p {
  display: block;
  margin-bottom: 10px;
  color: #333;
}
input[type="range"] {
  width: 100%;
}
output {
  font-weight: bold;
  color: #dc3545;
}

                     <form input1="total.value = quantity.value * 150">
  <label for="quantity">Количество (шт):</label>
  <input type="range" id="quantity" name="quantity" min="1" max="10" value="3">
  <p>Итоговая стоимость: <output name="total" for="quantity">450</output> ₽</p>
</form>

HTML

<form input1="total.value = quantity.value * 150">
  <label for="quantity">Количество (шт):</label>
  <input type="range" id="quantity" name="quantity" min="1" max="10" value="3">
  <p>Итоговая стоимость: <output name="total" for="quantity">450</output> ₽</p>
</form>

Вам нужно добавить в тег `<form>` атрибут `oninput`. Его значением будет JavaScript-выражение: `total.value = quantity.value * 150`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вывод результата вне формы

id: 37862_html-forms-output-7

Иногда `<output>` нужно разместить за пределами `<form>`. Чтобы он оставался связан с формой, ей задается `id`, а элементу `<output>` — атрибут `form`. Свяжите `<output>` с формой, у которой `id` должен быть 'calc-form'.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form, p {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
p {
  margin-top: 15px;
  text-align: center;
}
output {
  font-weight: bold;
  font-size: 1.3em;
  color: #ffc107;
}

                     <form input1="calc-form" oninput="result.value = parseInt(x.value) + parseInt(y.value)">
  <input type="number" id="x" value="5">
  +
  <input type="number" id="y" value="5">
</form>

<p>Результат: <output input2="calc-form" name="result" for="x y">10</output></p>

HTML

<form input1="calc-form" oninput="result.value = parseInt(x.value) + parseInt(y.value)">
  <input type="number" id="x" value="5">
  +
  <input type="number" id="y" value="5">
</form>

<p>Результат: <output input2="calc-form" name="result" for="x y">10</output></p>

В теге `<form>` добавьте атрибут `id` со значением 'calc-form'. В теге `<output>` добавьте атрибут `form` с таким же значением 'calc-form'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комплексный калькулятор скидки

id: 37862_html-forms-output-8

Создадим калькулятор, который вычисляет итоговую сумму с учетом скидки. Форма уже содержит логику в `oninput`. Ваша задача — правильно вставить тег для вывода результата и связать его с помощью атрибута `for` с полями 'price' и 'discount'.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
p {
  font-size: 1.1em;
}
output {
  font-weight: bold;
  color: #28a745;
  font-size: 1.2em;
}

                     <form oninput="result.value = (price.value * (1 - discount.value / 100)).toFixed(0)">
  <label for="price">Цена:</label>
  <input type="number" id="price" name="price" value="1000">
  <label for="discount">Скидка (%):</label>
  <input type="range" id="discount" name="discount" value="10" min="0" max="50">
  <p>Итог: <input1 name="result" input2="price discount">900</input1> ₽</p>
</form>

HTML

<form oninput="result.value = (price.value * (1 - discount.value / 100)).toFixed(0)">
  <label for="price">Цена:</label>
  <input type="number" id="price" name="price" value="1000">
  <label for="discount">Скидка (%):</label>
  <input type="range" id="discount" name="discount" value="10" min="0" max="50">
  <p>Итог: <input1 name="result" input2="price discount">900</input1> ₽</p>
</form>

Вам нужно обернуть число '900' в тег `<output>`. Этому тегу необходимо добавить атрибут `for` со значением 'price discount', чтобы связать его с обоими полями ввода.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку