HTML тег <output>html5

HTML теги

Значение и применение

Тег <output>html5 определяет область, в которую выводится результат вычислений или действий пользователя (обычно рассчитывается с помощью скриптов). Он может принадлежать определенной форме (элемент <form>), располагаясь внутри нее в качестве дочернего элемента, или ссылаться на неё (атрибут formhtml5).

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<output>html510.04.011.05.1НетНет

Атрибуты

АтрибутЗначениеОписание
forhtml5element_idОпределяет отношения между результатом расчета и элементами, используемые при нём.
formhtml5form_idЗадает одну или несколько форм к которым элемент принадлежит.
namehtml5nameОпределяет имя для элемента.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <output></title>
	</head>
	<body>
		<p>Сложение:</p>
		<form oninput = "с.value = a.valueAsNumber + b.valueAsNumber">
			<input type = "number" id = "a"> +
			<input type = "number" id = "b"> =
			<mark> <output name = "с" for = "a b"> </output> </mark>
		</form>
		<p>Умножение:</p>
		<form oninput = "d.value = e.valueAsNumber * f.valueAsNumber">
			<input type = "number" id = "e"> *
			<input type = "number" id = "f"> =
			<mark> <output  name = "d" for = "e f"> </output> </mark>
		</form>
		<p>Деление:</p>
		<form oninput = "z.value = g.valueAsNumber / h.valueAsNumber">
			<input type = "number" id = "g" step = "10" > /
			<input type = "number" id = "h" step = "5" > =
			<mark> <output  name = "z" for = "g h"> </output> </mark>
		</form>
	</body>
</html>

В данном примере мы создали три формы, в которых прописали функции сложения номерных полей для первой, умножения для второй и деления для третьей (<form oninput = "Переменная3.value = Переменная1.valueAsNumber + | * | / Переменная2.valueAsNumber">). Атрибут событий oninputhtml5 позволяет задать срабатывание скрипта, когда элемент получает ввод данных от пользователя. Атрибуты событий HTML необходимы для того, чтобы реагировать на какие-то действия пользователя, например, клике мышью или нажатии клавиши на клавиатуре, отправке формы, копировании текста и тому подобное. С полным перечнем возможных событий вы можете ознакомиться в разделе "Атрибуты событий".

Обратите внимание, что к тегу <input> применен атрибут type со значением number (элемент управления для ввода числа с плавающей точкой), благодаря которому мы можем щелчком мыши менять значение на 1 шаг в сторону увеличения или уменьшения. Для полей третьей формы мы указали атрибут stephtml5, которым мы можем регулировать этот шаг, например step = "5" будет увеличивать, или уменьшать значение на 5, step = "10" соответственно на 10.

Атрибут for внутри элементов <output>html5 определяет отношения между результатом расчета и элементами, используемые при нём. Результат выполнения наших функций мы выводим внутри элемента <output>html5, которые для наглядности мы поместили внутрь тега подсветки <mark>html5.

Результат нашего примера:

Сложение :

+ =

Умножение:

* =

Деление:

/ =

Пример использования тега <output>
Пример использования тега <output>

Значение CSS по умолчанию

output {
display: inline;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги