output в HTML


HTML тег

Парный тег, определяющий результат вычисления либо действий пользователя.

  • От англ. «[output]» — «выход», «вывод».
  • Может содержаться в фразообразующем контенте.
  • Может содержать фразообразующий контент.
  • Используется как область, в которую можно выводить результат работы программы.
  • Если мы в документе говорим о какой-то ранее запущенной программе, результатом выполнения которой стали некоторые данные — нужно использовать («вывод информации»).

в HTML

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

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

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

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

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

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

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

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

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

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

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

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

HTML — Tag

Description

The HTML tag specifies the result of a calculation.

Example

This will produce the following result −

Global Attributes

This tag supports all the global attributes described in − HTML Attribute Reference

Specific Attributes


The HTML tag also supports the following additional attributes −

Attribute Value Description
for for List of IDs of other elements, i.e it indicates the elements who have contributed input value to the calculation.
form form Enables to place output elements anywhere within a document.
name name It is the name of the element.

Event Attributes

This tag supports all the event attributes described in HTML Events Reference

HTML тег

Парный тег, определяющий результат вычисления либо действий пользователя.

  • От англ. «[output]» — «выход», «вывод».
  • Может содержаться в фразообразующем контенте.
  • Может содержать фразообразующий контент.
  • Используется как область, в которую можно выводить результат работы программы.
  • Если мы в документе говорим о какой-то ранее запущенной программе, результатом выполнения которой стали некоторые данные — нужно использовать («вывод информации»).

HTML 5 Tag

The HTML tag is used for representing the result of a calculation or user action. This could inlude displaying the results of a calculation performed by a script, or it could display the output of a user’s interaction with a form element.

The tag was introduced in HTML 5.

Example

This example uses the element to display the result of an interest rate calculation, based on user input. The element is also used to display the result of the range slider as the user adjusts the interest rate.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to prov >style=»color:black;» .

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute Description
for Allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The value must be a list of IDs (separated by a space) of elements within the same document.
form Associates the output with a form.
name Specifies the name of this element.

Global Attributes

The following attributes are standard across all HTML 5 tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate


For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Новые теги HTML5 — output.

Поддержка Браузеров

Google Chrome Опера Firefox Сафари, то есть тег поддерживается во всех основных браузерах.

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

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

Отличия между HTML 4.01 и HTML5. Тег является новым в HTML5.

Основы разметок HTML дают необходимый минимум материала, чтобы отображать документ на странице сайта. В настоящее время в разработках HTML наблюдается следующий цикл создания основ HTML. На более высоком интерактивном уровне. В самих разметках создаются атрибуты, которые самостоятельно оживляют действия над объектами при создании и оформления страниц сайта. Будет прорыв основ HTML в голосовом управлении всеми действиями на страницах сайта. Все трудоемкие процессы по созданию сайта возьмет на себя машина и основы HTML преобразятся. Что из этого выйдет — покажет время, точнее идет прорыв в данном направлении.

Атрибуты

Вновь : New in HTML5.

Атрибут Значение Описание
for Вновь element_id Указывает на связь между результатом вычисления, и элементы, используемые в расчетах
form Вновь form_id Задает одну или более форм выходной элемент принадлежит
name Вновь name Задает имя выходного элемента

Тег поддерживает Глобальные атрибуты в HTML: КЛИКНИ СЮДА

Тег также поддерживает Атрибуты событий в HTML: КЛИКНИ СЮДА

Пишем программу — Выполнение вычислений и показа результата в элементе:

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

Примечание: выход тег не поддерживаются в Internet Explorer.

в HTML

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1


В интернете полно сайтов с формами расчетов, например, погашение кредитов, ставки по ипотечным кредитам, налоговые, страховые и многое другое. До сих пор мы не имели возможности семантической разметки результата этих расчетов. Выход: новый элемент output. В этой статье будет продемонстрирована работа с output и еще некоторые javascript трюки.

Новый элемент output в HTML5 используется в формах. Спецификации WHATWG HTML описывает output очень просто: элемент output представляет собой результат вычисления.

На ряду с глобальными атрибутами, output также принимает следующие:

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

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

Начнем с создания простого примера, который складывает два целых числа друг с другом (рис. 1). Мы будем использовать новые в HTML5 поля ввода типа «число» и функцию JavaScript ParseInt для преобразования строк в целые числа:

Рисунок 1 — простой калькулятор, отрендерено в Chrome v. 15.0.874.121 m.

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

Как и следует ожидать, если ввести только одно значение, функция возвращает NaN.

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

Опираясь на предыдущий пример добавим атрибут for к output. Нам нужно добавить идентификаторы для каждого из связанных input, так же, как для атрибута for у label:

HTML5 также представил свойство объектов JavaScript valueAsNumbe (числа, даты и диапазон). Оно возвращает значение в виде числа, а не в виде строки, означает, что нам больше не нужно использовать ParseInt или parseFloat, и оператор + добавляет, а не объединяет:

Углубленный пример: выставление счета

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

Рисунок 2 — калькулятор, который рендерит результат в output элемент.

Пример использования с input type=«range»

HTML5 также вводит тип диапазон, который отображается, как ползунок в поддерживаемых браузерах. С помощью этого типа ввода, пользователь может ввести приблизительное значение в заданном диапазоне без необходимости быть полностью точными или непосредственно вводит числовое значение. Для кросс-браузерности можно воспользоваться примером, который описал Реми.

Рисунок 5 — использование input type=«range» с output элементом.

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

Тем не менее в спецификации этот элемент обозначен, как «результат вычисления».

Chrome 13+, Safari 5.1+, Firefox* 6+, Opera 9.20+, Internet Explorer 10+.

* Firefox поддерживает элемент output и события oninput, но он не поддерживает valueAsNumber.

IE, как и следовало ожидать, несколько отстает, но output поддерживается в IE10 Platform Preview 2, а также oninput уже есть в IE9.

Для того, чтобы обойти это вернемся к проверенным GetElementById и parseFloat:


Хотя это и не идеально, это — работоспособно, пока старые браузеры не вымрут.

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

HTML tag

When writing in HTML, the tag is an inline element used to represent the result of a user’s action or a calculation. A good example of an output is a computation performed by a script. The following sections contain information about this tag, including an example of it in use, as well as related attributes and browser compatibility.

The tag belongs to a group of tags called form elements.

Example of code

Example result

You may adjust the value inside the box by clicking either the up or down arrows on the right side.

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair; all tags support standard attributes. The following table shows all of the current unique HTML attributes for the tag, as well as a description of each.

HTML .am>

The HTML tag is used for representing the result of a calculation (such as one performed by a script) or a user action (such as entering data into a form control).

The basic tag is written like this with the name attribute defining a name for this element, and the for attribute defining the explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation.

The tag was introduced in HTML 5.

Example

The following example shows the element in action. You can modify the code (on the left) and click «Refresh» to see your changes take effect (on the right).

Attributes

The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.

Attributes Specific to the Element

Attribute Description
for Allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The value must be a list of IDs (separated by a space) of elements within the same document.
form Associates the output with a form.
name Specifies the name of this element.

Global Attributes

The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.

Attribute Description
accesskey Specifies a shortcut key that can be used to access this element.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]


class This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use.
contenteditable This attribute specifies whether the user can edit the content or not.
  • true
  • false
contextmenu The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM.
dir Specifies the direction of the text.
Value Description
ltr Specifies that the text should read left to right.
rtl The text should read right to left.
auto The text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag this element or not.
  • true
  • false
  • auto
Value Description
true This value specifies that the element is draggable.
false A false value specifies that the element is not draggable.
auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone The dropzone attribute specifies what should happen when the user «drops» an element (i.e. after dragging it) onto this element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Value Description
copy Results in a copy of the dragged data. Default value.
move Results in the data being moved to the new location.
link Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: « Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: « Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden Indicates that this particular element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or h ).

  • [Empty string]
  • hidden
id The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
itemid The itemid provides a global identifier for an «item». This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.

itemprop This attribute provides one or more properties to one or more «items».

Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. Each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a «defined property name» allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref This attribute is used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
itemscope HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).

  • [Empty string]
  • itemscope
itemtype This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute’s value must have at least one token.


The itemtype attribute must only be present in elements that include the itemscope attribute.

lang Sets the language code to be used.

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck Specifies whether the element should have its spelling checked.
Value Description
[Empty string] The element should have its spelling checked.
true The element should have its spelling checked.
false The element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.

style Specifies inline styles for this element. This allows you to define the styles within the page, and within this tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
tabindex Helps determine the tabbing order for this element (for when the user uses the «tab» key on their keyboard to «tab» through the elements on the page in order to select an element).

[Any valid integer. For example, 0, 1, 2, 3, . etc]

title Specifies a title to associate with this particular element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).

[Any text to be displayed as a «tool tip».]

translate Determines whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translate attribute is an enumerated attribute and may contain the following possible values:

If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

Event Handler Content Attributes

The tag also accepts the event handler content attributes listed below.

An event handler content attribute is an attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

Event handlers are commonly used to extend the functionality of an HTML element. By using any of the event handler content attributes below, you can tell the browser to run a specific script and when to run it. For example, by using onclick=»» , you tell the browser to run a piece of JavaScript whenever someone clicks on the element. The JavaScript needs to be inserted between the double quotes. This is typically a small piece of JavaScript that simply calls a JavaScript function that has been defined elsewhere.

Here are the event handler content attributes that can be used with the element.

HTML | Tag

The tag in HTML is used to represent the result of a calculation performed by the client-side script such as JavaScript. The tag is a new tag in HTML 5 and it requires a starting and end tag.

Syntax:

Attributes: The output tag contains three attributes which are listed below:

  • for: This attribute contains an attribute value element_id which is used to specify the relation between result and calculations.
  • form: This attribute contains an attribute value form_id which is used to specify the one or more forms of output elements.
  • name: This attribute contains an attribute value name which is used to specify the name of output element.

Below examples illustrate the element in HTML:

Илон Маск рекомендует:  С builder как ускорить компиляцию с помощью предкомпилированных заголовков
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL