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>.

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

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