Элемент output


HTML5 Doctor

Helping you implement HTML5 today

The output element

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the element! In this article, we’ll show you and some related JavaScript tricks. Let’s get cracking.

The Definition #

The element, new in HTML5, is used in forms. The WHATWG HTML specification describes very simply:

The output element represents the result of a calculation.

Along with the standard global attributes, also accepts the following:

for A space-separated list containing the IDs of the elements whose values went into the calculation. form Associates the element with its form owner. The value must be the ID of a form in the same document. This allows you to place an element outside of the

Figure 1: A simple calculator, rendered in Chrome

The step attribute is new to HTML5. It defines the increment by which a number input increases and decreases.

Notice that we’re using the now-standard oninput event, which has replaced the deprecated onforminput event. Daniel Friesen has written a detailed article on the background and current support of oninput . oninput isn’t supported in IE8 and below, and its IE9 support is a little flaky, but you can work around these problems using the html5Widgets polyfill.

Using the for Attribute #

Let’s build on the previous example and add the for attribute to the (Figure 2). We need to add IDs to each of the associated s, just as we would with the for attribute on a :

Figure 2: Using the for attribute on the element

The valueAsNumber Property #

HTML5 has also introduced the valueAsNumber property of JavaScript input objects (specifically those of type number, date, and range). This returns the value as a number rather than as a string, meaning we no longer need to use parseInt or parseFloat , and the + operator adds rather than concatenates:

Figure 3: Using the valueAsNumber property for retrieving a numeric value from an input

Invoicing Calculator: An In-depth Example with Fallbacks #

For a more realistic example, let’s create an invoicing calculator that multiplies the number of hours by the hourly rate and adds tax to give an overall total (Figure 4):

Figure 4: An invoicing calculator that renders its result in an output element

Nothing too complicated going on there. In fact, the scripting is so simple that even I can do it ;)

A Mildly Controversial Example Using #

HTML5 also introduces the range input type, which renders as a slider control in supporting browsers. With this input type, a user can enter an approximate value within a given range without having to be completely precise or directly type a numeric value. For cross browser compatibility, see Remy’s input range polyfill.

While researching this article, I found a number of examples using the element in conjunction with as shown in Figure 5:

Figure 5: Using with the element

Using to show the current value to the user seems like a perfectly reasonable use case to me, but it isn’t the result of a calculation as the spec describes. I haven’t spoken directly to Hixie about this, but a couple of people on the IRC channel seemed to agree with, so I filed a bug report to request the definition be amended. I’ll update this article if something changes .

Browser Support and Polyfills #

The good news is that all modern browsers support the element to some extent. The bad news is that there are still a few gotchas.

Browser support for the element

Browser Support
Chrome 13+
Safari 5.1+
Firefox* 6+
Opera 9.20+
Internet Explorer 10+

* Firefox does support the element and the oninput event, but it doesn’t support the valueAsNumber property.

All the examples we’ve seen so far should work perfectly in Opera 11.5+, Safari 5.1+, and Chrome 13+. IE, as you might expect, is lagging somewhat, but support for is in IE10 Platform Preview 2, and support for oninput is already in IE9.

In order to work around this in our simple examples, we’ll need to revert to the tried-and-trusted getElementByID and parseFloat (Figure 6):

Figure 6: Using getElementById to support older browsers

While this isn’t ideal, it’s workable until those less-capable browsers die a slow and painful death. Alternatively, you can use polyfills to plug the gaps.

To check support in your current browser, open up Mike Taylor’s support test page.

Polyfills #

To support less-capable browsers, there are polyfills such as HTML5 Widgets created by Zoltan “Du Lac” Hawryluk . Zoltan talks you through the process in this detailed article on creating cross browser forms using html5Widgets.

Summary #

You probably won’t find yourself using the element all the time, but it’s useful in a whole host of situations. Calculating values on financial sites spring to mind, or outputting the current mouse position, or perhaps the goal difference in a table of sports teams. What other use cases can you think of for ? Let us know in the comments!


Richard Clark

This article was written by Richard Clark . Richard is Head of Interactive at KMP Digitata, a digital agency based in Manchester, UK. Co-author of Beginning HTML5 and CSS3: The Web Evolved. He runs a host of websites including this one and its sister site html5gallery. Another side project is Speak the Web, a series of small gig style web conferences. You should follow him on twitter or check out his site.

36 Responses on the article “The output element”

In Figure 6 you specify the id of the inputs twice (2nd and last attributes).

Great article though, thank you.

@Bernhard – So I did, thanks. Have updated it now.

Элемент output

Если Вы нажмете кнопку Сохранить, ваш код будет сохранен и вы получите URL, с который Вы можете поделиться с другими.

Нажав кнопку «Сохранить», Вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

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

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

40 важных вопросов и ответов по HTML5


Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

Поэтому ниже приводятся 40 важных вопросов, которые помогут вам блеснуть знаниями по HTML5 .

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

  • : Представляет блок заголовка страницы;
  • : Подвал страницы;

Элемент output

output element — išėjimo elementas statusas T sritis automatika atitikmenys: angl. output element vok. Ausgangselement, n; Ausgangsglied, n rus. выходной элемент, m pranc. élément de sortie, m … Automatikos terminų žodynas

élément de sortie — išėjimo elementas statusas T sritis automatika atitikmenys: angl. output element vok. Ausgangselement, n; Ausgangsglied, n rus. выходной элемент, m pranc. élément de sortie, m … Automatikos terminų žodynas

Element XML — Extensible Markup Language Extensible Markup Language Extension de fichier .xml Type MIME application/xml, text/xml Développé par World W >Wikipédia en Français

Élément XML — Extensible Markup Language Extensible Markup Language Extension de fichier .xml Type MIME application/xml, text/xml Développé par World W >Wikipédia en Français

Element Definition Document — An Element Document Definition (EDD) is a set of rules used in structured FrameMaker, based on the context of each element in the document. Similar to a Document Type Definition, an EDD is used only in structured FrameMaker documents. It contains … Wikipedia

Distributed element filter — Figure 1. A circuit featuring many of the f … Wikipedia

Electrical element — Electrical elements are conceptual abstractions representing >Wikipedia

chemical element — Introduction also called element, any substance that cannot be decomposed into simpler substances by ordinary chemical processes. Elements are the fundamental materials of which all matter is composed. This article cons >Universalium

Cardiac output — (Q or or CO ) is the volume of blood being pumped by the heart, in particular by a left or right ventricle in the time interval of one minute. CO may be measured in many ways, for example dm3/min (1 dm3 equals 1000 cm3 or 1 litre). Q is… … Wikipedia

C-element — The Muller C element, or Muller C gate, is a commonly used asynchronous logic component originally designed by Dav >Wikipedia

HTML element — This article is about the HTML elements in general. For information on how to format Wikipedia entries, see Help:Wiki markup and Help:HTML in wikitext HTML HTML and HTML5 Dynamic HTML XHTML XHTML Mobile Profile and C HTML Canvas element Character … Wikipedia

The output Element

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

Live Demo

element is the semantically correct element for displaying the results of a calculation from form elements.

  • Attributes include for , form and name , in addition to the global attributes.
  • It does not have the value attribute. Rather, the textnode between the opening and closing tags make up the value. The default being the empty string.
  • It really doesn’t need the value attribute, since the name/value pair are NOT submitted along with the form
  • For the most part, it’s just a simple semantic element that any browser supports in display but not necessarily in function: similar to a in appearance, but with added functionality.
  • The for attribute takes a space-separated (not comma-separated) list of ID’s of elements that went into calculation.
  • The form attribute associates the with a form, which is useful if it is not nested within it.
  • If the form is reset, the value will return to its default value.
  • Example usage: 1) subtotal, tax and total in a shopping cart, 2) output of a calculator, 3) current value of a range input.
  • Example code:
  • Article on HTML5 Doctor

Let Wufoo do the hard work.

Our Cookie Policy and Privacy Policy outline how we use cookies to help optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.

Текстовые семантические элементы HTML5

Мы начали рассматривать семантику с изучения элементов уровня структуры страницы потому, что разобраться с семантикой этого уровня довольно легко. А легкая она оттого, что структура подавляющего большинства веб-сайтов сравнительно одинаковая и создается с помощью небольшого набора элементов дизайна — верхних и нижних колонтитулов, боковых панелей и меню.

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

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

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

Обозначение дат и времени с помощью элемента

Веб-страницы часто содержат информацию о датах и времени. Например, такая информация вставляется в конце большинства записей в блогах. К сожалению стандартного способа помечать даты не существует, вследствие чего другим программам (например, поисковым движкам) не так-то легко извлечь их из остального кода разметки. Эта проблема решается введением семантического элемента с помощью которого можно обозначить дату, время или комбинацию обоих. В следующем коде приводится пример использования этого элемента:

То, что элемент применяется как оболочка для даты (без времени) может показаться несколько нелогичным, но это просто одна из странностей HTML5. Логичнее было бы ввести элемент , но этого почему-то не сделали.

От элемента требуется выполнять две функции. Во-первых, он должен указывать местонахождение значения даты или времени в разметке. Во-вторых, он должен предоставлять заключенное в него значение даты или времени в форме, понимаемой любой программой. Предыдущий пример отвечает второму требованию предоставления универсального формата даты, который состоит из четырехсимвольного значения года, двухсимвольного значения месяца и двухсимвольного значения дня, в указанном порядке. Иными словами, формат даты имеет такой шаблон:

Но пользователю, просматривающему веб-страницу, дату вполне допустимо показать в другом формате. Более того, дату на экран можно выводить любым нравящимся вам способом, при условии предоставления ее значения в машиночитаемом универсальном формате в атрибуте datetime, как показано в следующем примере:

В браузере это будет выглядеть таким образом:

Подобные правила также применяются и для значения времени, которое предоставляется в таком формате:

То есть, дается двузначное значение часа (в 24-часовом формате), затем двузначное значение минут. Часть после знака «плюс» (или «минус») представляет смещение часового пояса от всемирного координированного времени. Указание смещения часового пояса является обязательным. Узнать смещение часового пояса для конкретного региона можно на веб-сайте «Часовой пояс».

Например, Москва находится в московском часовом поясе, который также называется UTC+4:00 (UTC — Universal Time Coordinated, всемирное координированное время), т.е. смещение данного часового пояса равно плюс четырем часам. Время 09:30 в Москве указывается в разметке следующим образом:

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

Наконец, время в определенный день указывается путем совмещения этих двух стандартов. Дата приводится первой, за ней следует прописная латинская буква Т, после которой указывается время:

Элемент также поддерживает атрибут pubdate. Он применяется в тех случаях, когда указываемая дата совпадает с датой публикации текущего содержимого (например, статьи, в которой помещается элемент ). В качестве примера можно привести такой код:

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

JavaScript-вычисления и элемент

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

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

В таких случаях для обозначения места для вывода результатов полю присваивается однозначный идентификатор. Обычно для поля подстановки используется элемент , который отлично работает, но не придает этому полю никакого специфического значения. Использование же элемента для этой цели делает код более осмысленным:

Собственно код JavaScript не требует никаких изменений, т.к. он ищет элемент по его идентификатору, и его ничуть не волнует тип этого элемента:

Часто для удобства элементы управления помещаются в элемент

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

Эти атрибуты в действительности ничего не делают, кроме как передают информацию о том, откуда элемент получает свои данные. Но они вносят очень важную информацию с точки зрения семантики. В частности, если страницу нужно будет отредактировать кому-то другому, а не разработчику-хозяину, эти атрибуты помогут ему разобраться, как она работает.

Выделение текста цветом с помощью элемента

Элемент обозначает блок текста, выделенного цветом. Применение этого элемента особенно подходит для выделения фрагментов текста, как показано в следующем листинге:

Текст, взятый в элемент , выделяется желтым цветом:

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

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

По сути, элемент не предназначен для выполнения форматирования текста. В конце концов, имеется множество других способов выделить текст на веб-странице. Поэтому элемент следует использовать (совместно с форматированием посредством CSS, если есть такое желание), когда это подходит с точки зрения семантики. Удачно использовать элемент для привлечения внимания к обычному тексту, содержание которого по какой-либо причине является важным, например из-за контекста обсуждения, в котором он находится, или из-за выполняемой пользователем операции.

Делаем плавающий пузырек со значением для элемента range

Элемент HTML5 range имеет вид:

В браузерах, которые поддерживают его он будет выглядеть так:

Отличный элемент. Вы можете использовать его где-угодно для того, чтобы пользователь ввел значение из диапазона с минимумом и максимумом.

Но кое-что в нем не так. Пользователь не видит число, которое он вводит. Конечно, если дело состоит в ответе на вопрос «Как вы себя чувствуете? Слева — отлично, а справа — плохо», то беспокоиться вроде бы не о чем. Но в большинстве случаев все-таки лучше показывать число, которое устанавливается в текущий момент.

В данном случае отлично подходит использование тега , который заточен под значения, вычисляемые элементами формы. Его применение не просто, а очень просто:

Но нам придется воспользоваться JavaScript, а точнее популярным jQuery, чтобы взять наш элемент, стилизованный с помощью CSS и поставить в нужную позицию, дабы получилось вот такое расширение возможностей элемента range:

Для начала зададим стили для элемента output . Будем позиционировать его абсолютно выше элемента ввода. Таким образом, мы сможем смещать его туда, куда нужно с помощью JavaScript. Разукрасим его с помощью градиентов и скругленных углов, а также добавим небольшой треугольник снизу с помощью псевдо элемента:

Теперь надо наблюдать за вводом значения, чтобы внести изменения в наш элемент. Задача заключается в том, чтобы сдвигать положение нашего «пузырька» со значением вместе со слайдером. Это не такая уж и простая задача, потому что слайдер может иметь какие-угодно значения для минимума и максимума. Придется использовать немного математики. Вот, собственно весь код jQuery JavaScript с комментариями:

Самым загадочным моментом в коде является число 1.3 для смещения. Дело в том, что центр слайдера никогда не располагается точно слева или справа от значения. Опытным путем вычислено загадочное число. Оно, конечно, не дает идеального результата, но все же лучше, чем ничего.

В качестве бонуса в браузерах, которые не поддерживают элемент range пузырек будет продолжать работать.

Примечание: Правильность работы выше приведенного кода зависит от заданных значений минимума и максимума для элемента range . Конечно, кажется дикостью, что такой элемент можно использовать без указания крайних положений, однако никто не застрахован от проявления глупости со стороны других пользователей кода. Для защиты от таких ситуаций можно использовать следующий код, который будет проверять наличие значений максимума и минимума и в случае отсутствия таковых, назначать величины по умолчанию (например, 0 и 100):

Для максимума используется аналогичный код.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/value-bubbles-for-range-inputs/
Перевел: Сергей Фастунов
Урок создан: 21 Апреля 2011
Просмотров: 24985
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Элемент output

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


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

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

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

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

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

Заметьте, что мы используем стандартное событие 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. Финансовый калькулятор отображает результат в элементе

См. живой пример

Ничего слишком сложного не происходит. На самом деле скрипты настолько простые, что даже я могу их сделать.

Немного спорный пример с использованием

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

Пока писалась эта статья я нашёл ряд примеров использования элемента в сочетании с , как показано в примере 5.

Пример. 5. Использование с элементом

См. живой пример

Использование для показа текущего значения пользователю кажется мне вполне разумным применением, но это не результат вычислений как описано в спецификации. Несколько человек на канале IRC согласились со мной, поэтому я подал отчёт об ошибке, где просил внести поправки в определение. С момента написания этой статьи ошибка была решена и определение расширили, так что использование , как показано выше, теперь корректно. Ура!

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

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

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

Браузер Поддержка
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.


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

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

  • WHATWG HTML Specification for
  • W3C Elements Wiki Page for
  • Wufoo HTML5 Forms Tests for
  • Mozilla Developer Network docs on

  • Is onforminput Deprecated in HTML5 Forms? (And Why Should I Care Anyways?) by Zoltan Hawryluk
  • A HTML5 Browser Maze: oninput Support by Daniel Friessen
  • Fixing oninput in IE Using html5Widgets by Zoltan Hawryluk

Отправить сообщение об ошибке
Если нашли ошибку в тексте выделите ее мышкой и нажмите сочетание клавиш Ctrl+ENTER, укажите правильный текст без ошибки.


Да, именно это пришло в голову разработчикам. Раз есть ввод, почему не может быть вывода? Тем более искусственные конструкции, выполняющие подобные функции, сплошь и рядом создаются на веб-страницах. Итак, встречайте — элементы вывода!

Прежде всего это элемент, который так и называется, — . В общем случае этот элемент выполняет те функции, которыми раньше нагружали какой-нибудь несчастный

Одним из таких сценариев может быть событие forminput, которое наступает при изменении содержания полей формы. У него два отличия от старого доброго onchange — во-первых, оно действует для всей формы, во-вторых, оно происходит непосредственно после изменений, не дожидаясь потери полем фокуса. В частности, это поведение позволяет сделать более информативным поле ввода типа range:

Результат — на рис. 22.

Рис. 22. input type = «range»

Следующим «полем вывода» служит элемент

. Да-да, это именно то, что мы долго эмулировали на html-страницах с разной степенью успешности, — индикатор процесса. Его применение очень просто — progress имеет всего два атрибута:

Результат — на рис. 23. Естественно, чтобы он что-либо отображал, следует изменять значение value, что вполне доступно любому JavaScript-сценарию.

Рис. 23. Элемент progress

Еще один элемент, предназначенный для вывода, — . Внешне он обычно похож на progress, но это скорее графический индикатор более общего назначения. Вот пример его использования:

Результат — рис. 24.

Рис. 24. Применение элемента meters

С атрибутами тут дела обстоят следующим образом:

— max и min задают максимальное и минимальное отображаемые значения;

— low обозначает предел, при достижении которого значение считается низким;

— high обозначает предел, при достижении которого значение считается высоким;

— optimum обозначает наилучшее или оптимальное значение.

Элемент output

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

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

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

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

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

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

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

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

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

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

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

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

Илон Маск рекомендует:  Таблица с зеброй
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL