Тег output


Определяет область в которую выводится информация, преимущественно с помощью скриптов.

Синтаксис

Атрибуты

Закрывающий тег

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

Спецификация ?

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
13 11 5.1 4
Android Firefox Mobile Opera Mobile Safari Mobile
4 11 5.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

HTML тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

HTML | тег

Тег в HTML используется для представления результата вычисления, выполненного клиентским скриптом, таким как JavaScript. Тег является новым тегом в HTML 5 и требует начального и конечного тега.

Синтаксис:

Атрибуты: Выходной тег содержит три атрибута, которые перечислены ниже:

  • for: Этот атрибут содержит значение атрибута element_id, которое используется для указания отношения между результатом и вычислениями.
  • form: Этот атрибут содержит значение атрибута form_id, которое используется для указания одной или нескольких форм выходных элементов.
  • name: Этот атрибут содержит имя значения атрибута, которое используется для указания имени выходного элемента.

Ниже приведены примеры, иллюстрирующие элемент в HTML:

Новые теги 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 — 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

Группа: Главные администраторы
Сообщений: 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 5

Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь.

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

Тег задает содержание сайта вроде новости, статьи, записи блога, форума или др.

Тег определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».

Тег устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

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

Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца

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

Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=»button | reset | submit»). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом . Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать в контейнер обязательно.

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

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

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

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

Тег задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

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

Тег задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

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

Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент . Закрывающий тег должен всегда стоять в документе последним.

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер .

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

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

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

Тег определяет отдельный элемент списка. Внешний тег

    или
      устанавливает тип списка — маркированный или нумерованный.

Тег Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега , тег
размещается всегда внутри контейнера и не создает ссылку.

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

Тег помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри выделяется желтым цветом.


Тег предназначен для отображения списка пунктов меню. Аналогично тегам

    и
      внутри контейнера список формируется с помощью тегов
      .

Тег определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере . Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

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

Тег задает навигацию по сайту. Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

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

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

HTML-тег

Тег input представляет собой элемент управления формы. Он позволяет пользователю вводить данные и взаимодействовать с сайтом или приложением.

Синтаксис

Записывается как ( без закрывающегося тега ). Тегу присваивается атрибут type для указания типа элемента управления и атрибут name , чтобы процессор формы мог ссылаться на него. Часто используется атрибут value для указания значения по умолчанию для элемента управления.

Базовый пример синтаксиса тега с несколькими атрибутами:

Пример, содержащий три элемента в стандартной форме:

Примеры

Базовая форма

Ниже приводится форма, которая используется для ввода имени/фамилии пользователя. Используются три тега input type : для имени и фамилии, один для кнопки отправки:

Атрибут form

Мы можем связать тег input с формой с помощью атрибута form .

Если вы используете атрибут form , то должны указать идентификатор формы, с которой необходимо связать элемент.

В следующем примере я разместил элементы, связанные с формой, вне элемента

Радио-кнопки (переключатели)

В этом примере мы создадим радиокнопки. Для этого тега input атрибуту type присваивая значение radio .

Каждый пункт для выбора в группе должен иметь одно и то же значение name . Таким образом они связываются. Через value мы можем задавать различные варианты:

Связанные с формой элементы

Тег input рассматривается как связанный с формой элемент. Так как он может принадлежать определенной форме.

Ниже приводится список связанных с формой элементов HTML :

Атрибуты

Атрибуты могут добавляться в HTML-элемент , чтобы предоставить дополнительную информацию о том, как элемент должен отображаться или функционировать.

Существует три типа тега input атрибутов : связанные с конкретным элементом, глобальные и связанные с событием.

Атрибуты, связанные с конкретным элементом

В приведенной ниже таблице приведены атрибуты, связанные с конкретным тегом / элементом :

Атрибут Описание
accept Задает разделенный запятыми список типов контента, которые принимает сервер.
Допустимые значения:
  • audio/*
  • v >[Валидный MIME-тип, без параметров]
  • [Строка, в которой первый символ — «.» Символ (U+002E)] (для указания расширения файлов).

Можно указать и любые MIME-типы, и любые соответствующие расширения. Например, alt Альтернативный текст. Указывает на текст, который будет использоваться в случае, если браузер пользователя не может отобразить элемент управления. autocomplete Предотвращает использование браузером автоматического заполнения для этого элемента управления. Может оказаться полезным для конфиденциальных данных, таких как платежные данные и тому подобное.
Допустимые значения:

autofocus Автоматически выделяет фокусом ввода данный элемент управления при загрузке страницы. Это позволяет начать использовать элемент управления без предварительного выбора. В документе должно быть не более одного элемента с указанным атрибутомautofocus.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (например, autofocus или autofocus=»autofocus»).
Обязательными значениями атрибута для тега input являются :
  • [Пустая строка];
  • Autofocus.
checked Элемент управления будет выбран при загрузке страницы. Используется с type=»radio» или type=»checkbox». disabled Отключает элемент управления. Он не будет принимать изменения от пользователя. Элемент также не может быть выделен фокусом ввода, и при переключении фокуса с помощью табуляции будет пропускаться.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть либо disabled, либо disabled=»disabled»).
Допустимые значения:


  • [Пустая строка];
  • Disabled.
dirname Определяет направление написания текста, представленного в поле input. Значение этого атрибута может быть строкой текста, например, именем поля. Если вы, к примеру, укажете этот атрибут как dirname=»text_dir», когда данные формы будут отправлены, они могут выглядеть следующим образом:text_dir=ltr . form Задает идентификатор формы, которой принадлежит данный элемент управления. formaction Указывает URL-адрес файла, в котором будет происходить обработка данных элемента управления после их отправки. formenctype Указывает тип содержимого, используемый для кодирования набора данных формы, когда они отправляются на сервер.
Допустимые значения:
· application/x-www-form-urlencoded (по умолчанию);
· multipart/form-data (используется при загрузке файлов);
  • text/plain(используетсяэто при загрузке файлов).
  • dialog(закрывает диалоговое окно, в котором находится сама форма. В противном случае данные не отправляются).
  • [Пустая строка];
  • Novalidate.
  • _blank;
  • _self;
  • _top;
  • _parent.
formmethod Задает метод HTTP, который будет использоваться при отправке данных через элемент управления.
Допустимые значения атрибута тега input:
· get (данные формы добавляются к URL-адресу при отправке);
· post (данные формы не добавляются к URL-адресу); formnovalidate Указывает, должна ли выполняться валидация во время отправки данных формы.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце(то есть, noval > Допустимые значения: formtarget Определяет контекст просмотра для загрузки целевого адреса, указанного в атрибуте action.
Допустимые значения: height Определяет высоту элемента управления. inputmode Определяет, какой метод ввода будет наиболее полезен для пользователей, вводящих содержимое в элемент управления.
Допустимые значения тега input атрибута:
· verbatim — значение по умолчанию. Буквенно-цифровой ввод латиницей содержимого нетекстового характера. Например, имя пользователя, пароли, коды продуктов.
  • latin — ввод латиницей на предпочтительном языке (языках) пользователя со включением некоторых вспомогательных средств ввода (например, автоматическая подстановка текста). Предназначен для передачи информации от человека компьютеру. Например, текстовые поля в форме поиска.
  • latin-prose — ввод латиницей на предпочтительном языке (языках) пользователя для передачи информации от человека к человеку, с обязательным включением вспомогательных средств при наборе текста (например, автоматическая подстановка текста и автоматическая замена прописных букв в начале предложений на заглавные). Данное значение предназначено для электронных писем и обмена мгновенными сообщениями.
  • full-w > — ввод латиницей на вторичном языке (языках) пользователя, с использованием символов полной ширины, с обязательным включением вспомогательных средств при наборе текста (например, автоматическая подстановка текста и автоматическая замена прописных букв в начале предложений на заглавные). Данное значение предназначено для ввода латинского текста, встроенного в текст CJK.
  • numeric — цифровой ввод, включая клавиши цифр от 0 до 9, предпочитаемый пользователем разделитель тысяч символов и символ для указания отрицательных чисел. Данное значение предназначено для числовых кодов. Например, номеров банковских карт. Для чисел предпочтительно .
  • tel- ввод номера телефона, включая клавиши цифр от 0 до 9, символ «#» и символ «*». В некоторых локалях также может включать в себя буквенные мнемонические метки (например, в США, ключ с меткой «2» исторически также обозначается буквами A, B и C). Вместо этого используйте .
  • email- текстовый ввод в локали пользователя, с клавишами для ввода адреса электронной почты, например, символов «@» и «.».Вместо этого используйте .
  • url- ввод текста в локали пользователя с поддержкой клавиш для ввода веб-адресов, например, символов «/» и «.», и вспомогательных средств для быстрого ввода строк, обычно встречающихся в доменных именах, таких как «www» или «.co.uk». Вместо этого используйте .
list Указывает элемент datalist, который будет использоваться для списка предопределенных для пользователя параметров. Значение должно быть идентификатором элемента datalist в том же документе. max Этот тег input атрибут указывает максимальное значение для элемента управления. maxlength Указывает максимальное количество символов, которое пользователю разрешено вводить в текстовом поле. min Указывает минимальное значение для элемента управления. minlength Указывает минимальное количество символов, которые пользователь должен ввести в текстовом поле. multiple Указывает, разрешено ли пользователю вводить более одного значения.
Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть. multiple или multiple=»multiple»).
Допустимые значения:
· [Пустая строка];
  • multiple.
name Присваивает элементу управления имя. pattern Указывает регулярное выражение, по которому должно быть проверено значение элемента управления. Значение должно соответствовать составлению шаблонов по правилам грамматики ECMA 262. placeholder Задает коротк ую подсказку (слово или короткую фразу), которая должна помочь пользователю при вводе данных. Подсказка может представлять собой примерное значение или краткое описание ожидаемого формата.
Примечание. Для создания более длинных подсказок или другого вспомогательного текста более подходит глобальный атрибут title.
Также обратите внимание, что атрибут placeholder не должен использоваться как альтернатива элементу . readonly Задает для элемента управления режим «только для чтения» — пользователь не может изменять значение. Тем не менее, элемент управления может выделяться фокусом ввода и становиться активным при переключении фокуса ввода с помощью клавиши табуляции.
Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть readonly или readonly=»readonly»).
Допустимые значения:
· [Пустая строка];
  • readonly.
required Указывает, что поле ввода является обязательным для заполнения (пользователь должен заполнить это поле).
Это логический атрибут тега input type . Если он присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (то есть required или required =» required «).
Допустимые значения:
· [Пустая строка];
  • required.
size Указывает ширину элемента управления, в символах. Значение, которое является действительным неотрицательным целым числом больше нуля. src Если задано type = «image» , этот атрибут определяет местоположение изображения. step Указывает шаг изменения значения, который ожидается (и требуется), через ограничения допустимых значений. type Указывает тип элемента управления.
Допустимые значения этого тега input атрибута:
Значение Тип данных Тип элемента управления
hidden Произвольная строка. Не определено.
text Текст без разрывов строк. Текстовое поле.
search Текст без разрывов строк. Текстовое поле.
Tel Текст без разрывов строк. Текстовое поле.
url Полный URL-адрес. Текстовое поле.
email Адрес электронной почты или список адресов электронной почты. Текстовое поле.
password Текст без разрывов строк (конфиденциальная информация). Текстовое поле, в котором скрываются вводимые данные (например, пароль скрывается с помощью звездочек (******) или другим аналогичным способом).
datetime Дата и время (год, месяц, день, час, минута, секунда, доля секунды) с часовым поясом, установленные в UTC. Элемент ввода даты.
date Дата (год, месяц, день) без часового пояса. Элемент ввода даты.
month Дата, состоящая из года и месяца без часового пояса. Элемент ввода месяца.
week Дата, состоящая из номера недели и недели, без часового пояса. Элемент ввода недели
time Время (час, минута, секунды, доли секунды) без часового пояса. Элемент ввода времени.
datetime-local Дата и время (год, месяц, день, час, минута, секунда, доля секунды) без часового пояса. Элемент ввода даты и времени.
number Числовое значение. Текстовое поле или счетчик.
range Числовое значение, с дополнительной семантикой, при которой точное значение не важно. Элемент ввода диапазон или аналогичный.
color Цвет RGB с 8-битными красными, зелеными и синими компонентами. Элемент выбора цвета.
checkbox Набор из нуля или более значений из предопределенного списка. Чекбокс.
radio Перечень значений. Радиокнопка.
file Ноль или больше файлов, каждый из которых имеет MIME-тип и, опционально, имя файла. Метка и кнопка.
submit Пронумерованное значение с дополнительной семантикой, согласно которой оно должно быть последним выбранным значением, после чего инициируется кнопка отправки данных формы. Кнопка.
image Координата, связанная с конкретным размером изображения, с дополнительной семантикой, согласно которой она должна быть последним выбранным значением, после чего инициируется кнопка отправки данных формы. Кликабельное изображение или кнопка.
reset Не определено. Кнопка.
button Не определено. Кнопка.
value Задает значение по умолчанию для элемента управления. Примечание : Если type=»checkbox» или type=»radio» , атрибут является обязательным. width Определяет ширину элемента управления.

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

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

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

Атрибуты обработчика событий

Атрибуты обработчика событий тега input typ e позволяют вызывать скрипт из HTML-разметки. Скрипт вызывается, когда происходит определенное « событие ». Каждый атрибут обработчика события связан с другим событием.

Ниже приведены стандартные атрибуты обработчика событий HTML5 :

  • 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 .

Различия между HTML 4 и HTML 5

В HTML 4 и HTML5 имеется ряд различий для тега input .

В HTML5 атрибуты usemap , ismap и align устарели ( они поддерживались в HTML 4 ).

В HTML5 были введены следующие атрибуты:

  • form ;
  • autocomplete ;
  • autofocus ;
  • list ;
  • pattern ;
  • required ;
  • placeholder ;
  • dirname ;
  • formaction ;
  • formenctype ;
  • formmethod ;
  • formnovalidate ;
  • formtarget ;
  • height ;
  • max ;
  • min ;
  • minlength ;
  • multiple ;
  • step ;
  • width .

Кроме этого в HTML5 глобальный атрибут title имеет особое значение для тега input type .

В HTML 5.1 и WHATWG HTML Living Standard был введен следующий атрибут:

Спецификации

Вот официальные спецификации для элемента.

  • Спецификация HTML5 (W3C) ;
  • Текущий стандарт HTML (WHATWG) ;
  • Текущая версия W3C ;
  • HTML 4 ( W3C ).

В чем разница?

W3C создает « snapshot » спецификации, которые не меняются после их определения. Поэтому спецификация HTML5 не изменится, когда она станет официальной рекомендацией. С другой стороны WHATWG , разрабатывает « живой стандарт », который обновляется на регулярной основе. В целом, вы, вероятно, обнаружите, что HTML living standard будет более точно соответствовать текущему проекту W3C , чем спецификации HTML5 .

Данная публикация представляет собой перевод статьи « HTML input Tag » , подготовленной дружной командой проекта Интернет-технологии.ру

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