Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Тег output в html

Приветствую вас дорогие друзья. В сегодняшней статье мы рассмотрим интересный тег output с помощью которого можно выводить результат выполнения скрипта. Итак, поехали!

Допустим мы хотим посчитать квадрат введенного в поле числа. Для это мы напишем следующий код.

<input placeholder="Введите число" id="number" type="number" oninput="result.value = number.value * number.value">

<label for="number">Квадрат числа </label>

<output id="result" ></output>

Здесь нас интересуют всего два элемента input(поле для ввода) и output(поле для вывода).

Обратите внимание что само вычисление осуществляется с помощью скрипта при возникновении события input(изменение значения в поле). В итоге для того чтобы произвести вывод в элемент output нам необходимо всего лишь указать идентификатор данного элемента и его свойство value, присвоив всему этому делу итоговое значение.

Как видите весь процесс довольно прост и прозрачен. В результате ввода числа в поле input в теге output у нас выведется его квадрат.

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

<input type="range" id="range1" min="1" value="50" oninput="output.value= this.value" max="100">
<output id="output">50</output>

К примеру здесь с помощью output мы можем отслеживать текущее значение поля range.

А здесь.

<input type="text" oninput="output2.value = this.value.length">

<label>Количество введенных символов</label>

<output id="output2">0</output>

Динамически производит подсчет введенных пользователем символов в поле.

Или даже так:

<body  onmousemove="result.value = event.clientX  +' : ' + event.clientY">
<output id="result"></output>

С помощью данного поля в наше поле output динамически выводятся текущие координаты курсора мыши.

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

На этом данная статья подошла к концу. Не забывайте оставлять вопросы в комментариях или группе

вк.

Я с вами прощаюсь. Желаю вам успехов и удачи! Пока.

Оцените статью

Еще статьи

Сравнение всех значений запроса с помощью ключевого слова ALL

Градиенты в CSS

CSS media

Работа с почтой php

Тег details в html5

Свойство touch-action в CSS3

Кодирование и декодирование url строк в php

Свойство quotes в css

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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