Вычисления в html-форме с выводом результатов в элемент управления <output>, его атрибуты и примеры отображения результатов вычислений на веб-странице.
Для проведения тестов с вычислениями в html-форме и выводом результатов в элемент управления <output>, используйте файл test.html.
Элемент формы <output>
Синтаксис
|
1 |
<output id="id" name="name" for="element_id" form="form_id"></output> |
Атрибуты
| Атрибут | Описание |
|---|---|
| id | идентификационный номер элемента управления, уникальный в пределах всего html-документа |
| name | имя элемента управления, уникальное в пределах html-формы |
| for | перечисление id элементов html-формы, используемых в вычислении* |
| form | id html-формы, к которой принадлежит элемент управления <output> |
* Атрибут for позволяет видеть взаимосвязь между элементами формы, используемыми в вычислении, и результатом вычисления, выведенном в элемент управления <output>.
Атрибуты элемента <output> не являются обязательными, но, чтобы отобразить в этом элементе результаты вычислений, необходим один из атрибутов — id или name.
Примеры вычислений
Пример 1
Автоматическое вычисление площади треугольника сразу при вводе аргументов:
|
1 2 3 4 5 |
<form oninput="out.value=(parseFloat(a.value)*parseFloat(h.value))/2"> <p>Основание треугольника: <input type="text" name="a" size="6" value="0"> м</p> <p>Высота треугольника: <input type="text" name="h" size="6" value="0"> м</p> <p>Площадь треугольника: <output name="out" for="a h">0</output> м²</p> </form> |
Атрибут oninput срабатывает при изменении значения элемента <input>, участвующего в вычислении в качестве аргумента. Теги абзаца (<p></p>) использовать не обязательно, а для разделения строк применить тег <br>. Текст можно обернуть тегами <label></label>, или <span></span>, или оставить без тегов.
Метод parseFloat анализирует значение элемента формы как строку и возвращает первое число. Если первый символ строки не является цифрой, возвращается значение NaN.
Результат:
В качестве разделителя дробной части следует использовать точку. Чтобы можно было вводить запятую, необходимо предусмотреть ее преобразование в точку:
|
1 |
<form oninput="out.value=(parseFloat(a.value.replace(',', '.'))*parseFloat(h.value.replace(',', '.')))/2"> |
Замените первую строку в коде первого примера, и введенная запятая, перед вычислением, будет автоматически преобразовываться в точку.
Пример 2
Вычисление площади круга по его радиусу при нажатии кнопки:
|
1 2 3 4 5 |
<form> <p>Радиус круга: <input type="text" name="r" size="6" value="0"> м</p> <p>Площадь круга: <output name="out">0</output> м²</p> <p><input type="button" onclick="out.value=Math.pow(parseFloat(r.value.replace(',', '.')), 2)*3.14159" value="Вычислить"></p> </form> |
Метод Math.pow(x, y) вычисляет возведение в степень (xy), а метод onclick запускает вычисление при нажатии кнопки (точнее, при ее отпускании).
Результат:
Пример 3
Выполнение сразу трех вычислений при изменении значения счетчика:
|
1 2 3 4 5 6 7 8 |
<form oninput="out1.value=(num.value*1000).toFixed(0), out2.value=(num.value*100000).toFixed(0), out3.value=(num.value*1000000).toFixed(0)"> <p>Длина в километрах: <input type="number" name="num" placeholder="Счетчик"> км</p> <p>Длина в метрах: <output name="out1">0</output> м</p> <p>Длина в сантиметрах: <output name="out2">0</output> см</p> <p>Длина в миллиметрах: <output name="out3">0</output> мм</p> </form> |
В поле счетчика можно вписывать значения вручную, в том числе дробные. Метод toFixed() округляет число до указанного количества знаков после запятой.
Результат:
Используемые в примерах методы parseFloat, toFixed, Math.pow — это методы JavaScript. Стоит также отметить, что результаты вычисления можно выводить не только в элемент управления <output>, но и точно также, через атрибут value, в элемент формы <input>.