HTML. Вычисления в форме

Вычисления в html-форме с выводом результатов в элемент управления <output>, его атрибуты и примеры отображения результатов вычислений на веб-странице.

Для проведения тестов с вычислениями в html-форме и выводом результатов в элемент управления <output>, используйте файл test.html.

Элемент формы <output>

<output> — это элемент управления (вывода) формы html, предназначенный для отображения результата вычислений.

Синтаксис

Атрибуты

Атрибут Описание
id идентификационный номер элемента управления, уникальный в пределах всего html-документа
name имя элемента управления, уникальное в пределах html-формы
for перечисление id элементов html-формы, используемых в вычислении*
form id html-формы, к которой принадлежит элемент управления <output>

* Атрибут for позволяет видеть взаимосвязь между элементами формы, используемыми в вычислении, и результатом вычисления, выведенном в элемент управления <output>.

Атрибуты элемента <output> не являются обязательными, но, чтобы отобразить в этом элементе результаты вычислений, необходим один из атрибутов — id или name.

Примеры вычислений

Пример 1

Автоматическое вычисление площади треугольника сразу при вводе аргументов:

Атрибут oninput срабатывает при изменении значения элемента <input>, участвующего в вычислении в качестве аргумента. Теги абзаца (<p></p>) использовать не обязательно, а для разделения строк применить тег <br>. Текст можно обернуть тегами <label></label>, или <span></span>, или оставить без тегов.

Метод parseFloat анализирует значение элемента формы как строку и возвращает первое число. Если первый символ строки не является цифрой, возвращается значение NaN.

Результат:

Основание треугольника: м

Высота треугольника: м

Площадь треугольника: 0 м²

В качестве разделителя дробной части следует использовать точку. Чтобы можно было вводить запятую, необходимо предусмотреть ее преобразование в точку:

Замените первую строку в коде первого примера, и введенная запятая, перед вычислением, будет автоматически преобразовываться в точку.

Пример 2

Вычисление площади круга по его радиусу при нажатии кнопки:

Метод Math.pow(x, y) вычисляет возведение в степень (xy), а метод onclick запускает вычисление при нажатии кнопки (точнее, при ее отпускании).

Результат:

Радиус круга: м

Площадь круга: 0 м²

Пример 3

Выполнение сразу трех вычислений при изменении значения счетчика:

В поле счетчика можно вписывать значения вручную, в том числе дробные. Метод toFixed() округляет число до указанного количества знаков после запятой.

Результат:

Длина в километрах: км

Длина в метрах: 0 м

Длина в сантиметрах: 0 см

Длина в миллиметрах: 0 мм


Используемые в примерах методы parseFloat, toFixed, Math.pow — это методы JavaScript. Стоит также отметить, что результаты вычисления можно выводить не только в элемент управления <output>, но и точно также, через атрибут value, в элемент формы <input>.

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.