Html form and output

Html form and output

Тег используется для отображения результатов вычислений или действий пользователя на веб-странице. Обычно он используется в сочетании с формой и JavaScript для выполнения вычислений и отображения результатов на странице.

Атрибуты тега :

• for — идентификаторы одного или нескольких элементов, с которыми связан элемент .
• form — идентификатор формы, к которой принадлежит элемент .
• name — имя элемента .

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

Отображение пользовательского ввода:

Для чего использовать тег

• чтобы отобразить результат вычисления на веб-странице;
• чтобы показать пользователю результат поискового запроса или операции фильтрации;
• для отображения результата игры или викторины;
• чтобы показать пользователю результат онлайн-викторины;
• для отображения результата ввода или выбора пользователя.

Глобальные атрибуты

Ограничения

• Тег не следует использовать для представления результата вычисления, критически важного для функционирования веб-страницы, поскольку результат может быть отредактирован пользователем.
• Тег не поддерживается в Internet Explorer.

Нюансы

• Если используется атрибут for , атрибут id связанного элемента (элементов) должен быть уникальным на странице.
• Если атрибут for не используется, элемент должен содержать атрибут value или дочерний текстовый узел для предоставления выходного значения.

Чем заменить тег

• использовать элемент или с соответствующим стилем и содержимым для отображения вывода;
• используйте JavaScript для динамического обновления вывода на странице.

👉 Другие теги для создания форм

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

HTML Tag

Perform a calculation and show the result in an element:

Definition and Usage

The tag is used to represent the result of a calculation (like one performed by a script).

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	10.0	13.0	4.0	5.1	11.0

Attributes

Attribute	Value	Description
for	element_id	Specifies the relationship between the result of the calculation, and the elements used in the calculation
form	form_id	Specifies which form the output element belongs to
name	name	Specifies a name for the output element

Global Attributes

Event Attributes

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Элемент output

Посещая Интернет вы увидите ряд сайтов, которые используют калькулятор для расчёта разных вещей, таких как: погашение ссуды, ставки по ипотечным кредитам, налоги, страхование и многое другое. До сегодняшнего дня у вас не было способа семантической разметки результата таких вычислений. Встречайте — элемент ! В этой статье мы расскажем об этом элементе и некоторых связанных с ним трюках JavaScript. Расщёлкнем этот орешек.

Определение

, новый элемент в HTML5, применяется в формах. Спецификации WHATWG HTML описывает очень просто.

Наряду со стандартными глобальными атрибутами понимает следующие.

for

Список разделённый пробелами, содержащий идентификаторы элементов, значения которых участвуют в вычислениях.

form

Форма связанная с элементом . Значение должно быть идентификатором формы в том же самом документе. Это позволяет размещать за пределами с которой он связан.

name

Реализация

Начнём с создания простого примера, который складывает два целых числа (пример 1). Будем использовать новый в HTML5 тип number и функцию parseInt для преобразования строк в целое число.

Пример 1. Простой калькулятор в Chrome

Заметьте, что мы используем стандартное событие oninput , которое заменило устаревшиесобытие onforminput . Даниэль Фризен написал подробную статью о текущей поддержке oninput; oninput не поддерживается в IE8 и ниже, а его поддержка в IE9 несколько странная, но вы можете обойти эти проблемы с помощью html5Widgets.

Как и следовало ожидать, если ввести только одно значение, функция возвращает NaN. Она пытается сложить число и значение undefined, в итоге 1 + undefined = undefined.

Использование атрибута for

Возьмём за основу предыдущий пример и добавим к атрибут for (пример 2). Нам нужно добавить идентификаторы каждого связанного , это аналогично атрибуту for для .

Пример 2. Использование атрибута for для элемента

Свойство valueAsNumber

В HTML5 представлено свойство JavaScript valueAsNumber для полей формы (в частности: number, date, range). Оно возвращает значение в виде числа, а не строки, то есть нам больше не нужно использовать parseInt или parseFloat , и оператор + складывает, а не склеивает.

Пример 3. Использование свойства valueAsNumber для получения числового значения из полей

Финансовый калькулятор: подробный пример

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

Пример 4. Финансовый калькулятор отображает результат в элементе

 
Invoice
 
Number of hours 
Rate £ 
VAT 
Total: £
0
 

Хорошая новость — все современные браузеры поддерживают в некоторой степени элемент . Плохая новость в том, что есть несколько подводных камней.

Поддержка в браузерах

Браузер	Поддержка
Chrome	13+
Safari	5.1+
Firefox	6+
Opera	9.20+
Internet Explorer	10+

Все примеры, которые мы видели до сих пор, должны безупречно работать в Opera 11.5 +, Safari 5.1+ и Chrome 13 +. IE, как и следовало ожидать, несколько отстаёт, поддерживается в IE10 Platform Preview 2, а oninput поддерживается уже в IE9. Чтобы обойти это в наших простых примерах, мы должны вернуться к надёжному и проверенному getElementById и parseFloat (пример 6).

Пример. 6. Использование getElementById для поддержки старых браузеров

Это всё не идеально, зато будет работать до тех пор, пока отстающие браузеры не умрут медленной и мучительной смертью.

Чтобы проверить поддержку в текущем браузере, откройте тестовую страницу Майка Тейлора.

Виджеты

Для поддержки отстающих браузеров есть виджеты вроде HTML5 Widgets созданным Золтаном «Du Lac» Хорилюк. Золтан проведёт вас через процесс в своей подробной статье о создании кроссбраузерных форм с помощью html5Widgets.

Резюме

Вероятно вы не будете использовать элемент всё время, но в ряде ситуаций он полезен. Вычисление значения на финансовых сайтах на лету или вывод текущей позиции курсора мыши, или, возможно, разница голов в спортивной таблице. Какие ещё варианты вы можете придумать для ? Дайте знать в комментариях!

Что ещё почитать

Источник

HTML Tag

The tag is one of the HTML5 elements. It defines a place for representing the result of a calculation performed by a script or user’s interaction with a form element ( tag). The tag is designed for complex calculations, like the results of an exchange rate conversion.

Calculating with the tag

In order to use the , some basic knowledge of JavaScript is required. Define an type of number to inform the form that the user is entering integers. If the user enters another information, the form returns NaN , that means not a number. Nowadays, is not supported internationally.

Syntax

The

tag comes in pairs. The content is written between the opening (

) and closing (

) tags.

Example of the HTML tag with two elements:

html> html> head> title>Title of the document title> head> body> form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 input type="range" id="a" value="50">100 + input type="number" id="b" value="25"> = output name="x" for="a b"> output> form> p>Multiplication: p> form oninput="d.value = e.valueAsNumber * f.valueAsNumber"> input type="number" id="e"> * input type="number" id="f"> = output name="d" for="e f"> output> form> body> html>

Result

Example of the HTML tag with one element:

html> html> head> title>Title of the document title> style> div < display: flex; align-items: center; margin-bottom: 20px; > style> head> body> form oninput="result.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)"> div> input type="number" name="a" value="30" /> + input type="range" name="b" value="0" /> + input type="number" name="c" value="25" /> div> The result is: output name="result"> output> form> body> html>

Attributes

Attribute	Value	Description
for	element_id	Defines the id of an element/elements, specifying the connection between the calculation result and elements, which are used in the calculation.
form	form_id	Defines one or more forms, which the output element belongs to.
name	name	Defines the name of the element.

Источник

: The Output element

The HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

Attributes

This element includes the global attributes.

A space-separated list of other elements’ id s, indicating that those elements contributed input values to (or otherwise affected) the calculation.

The element to associate the output with (its form owner). The value of this attribute must be the id of a in the same document. (If this attribute is not set, the is associated with its ancestor element, if any.)

This attribute lets you associate elements to s anywhere in the document, not just inside a . It can also override an ancestor element.

The element’s name. Used in the form.elements API.

The value, name, and contents are NOT submitted during form submission.

Examples

form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> input type="range" id="b" name="b" value="50" /> + input type="number" id="a" name="a" value="10" /> = output name="result" for="a b">60output> form> 

Result

Accessibility Concerns

Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

Technical summary

Content categories	Flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	status
Permitted ARIA roles	Any
DOM interface	HTMLOutputElement

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник