HTML5 формы типы тега input (часть 1)


Содержание материала:

HTML тег

Элемент (от англ. «input» ‒ «ввод») является основным элементом формы (HTML тег

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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

2+

1+

1+

1+

1+

1+

Элемент
1+

1+

6+

1+

Элемент

Как создать кнопку отправки данных ( ):
Использование submit

Как создать ползунковый регулятор ( ):
Регулятор

Как создать поле для поиска ( ):
Поле для поиска

HTML5 формы: типы тега input (часть 1)

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

Преобразуется на странице:

3. Текстовое поле (html , в котором можно писать огромные тексты.

Преобразуется на странице:

Чтобы задать размеры

есть два атрибута cols=»размер по ширине» и rows=»размер по высоте» . Например, rows=»5″ означает, что текстовое поле рассчитано на 5 строк.

4. Кнопки ( )

Также есть тип кнопки type=»button» , с помощью которой можно просто создавать какие-то произвольные кнопки. Например, для обработки каких-то действий.

5. Радиокнопки ( )

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

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

В поле value записывается значение, которое будет прочитано из поля name .

6. Флажки ( )

В случае, когда нужно выбрать несколько элементов, можно использовать флажки (type=»checkbox»). Синтаксис очень похож на радиокнопки, но только за исключением того, что здесь возможен множественный выбор.

Как и с радиокнопками можно поставить некоторые галочки по умолчанию с помощью атрибута checked .

7. Загрузка файлов ( )

Если нужно загрузить какой-то файл на сервер, то это также делается через форму и элемента input с типом file: type=»file» .

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

8. Раскрывающиеся списки в form

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

Есть атрибут size , который отвечает за количество выводимых строк. Например, если size=5, то выводится 5 видимых элементов списка. Если атрибут size больше 1 и стоит опция multiple , то список будет раскрытом и будет возможен множественный выбор в списке.

Формы в HTML5 (часть 1)

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о новых структурных элементах в HTML5. В данной статье я бы хотел рассказать, что нового принёс нам HTML5 при работе с формами. В первую очередь это проверка полей на соответствие некоторым условиям, без использования Javascript. Раньше мы все поля для ввода задавали тегом с атрибутом type=»text» . Затем javascript’ом проверяли, чтобы поле было непустым, удовлетворяло определенным требованиями (например, e-mail пользователя). С приходом HTML5 вся эта процедура упростилась. Давайте начнём разбираться на примере. Давайте создадим форму и добавим тег с новым атрибутом type=»email» (данный атрибут не даст нам отправить форму, пока не будет введен корректный адрес электронной почты):

В данном случае мы указали тип поля email , и по сути, пока мы не введем корректный адрес электронной почты, форма не должна отправляться. Яндекс — браузер выводит очень интересную подсказку, когда мы вводим какую-нибудь ерунду в данное поле. Я ввел «123» и попробовал отправить. Вылезло сообщение о том, что необходим символ «@»

Т.е. если я введу «@» , то форма у нас должна отправится. Что собственно и произошло. Поэтому данным типом поля я не рекомендую пользоваться, если только не добавить в него ещё один атрибут — pattern .

Данный атрибут проверяет соответствие того, что мы ввели, тому что находится в pattern . Здесь необходимо знание регулярных выражений. Давайте сделаем, чтобы наша форма отправлялась только после того, как мы введем НОРМАЛЬНЫЙ адрес электронной почты, а не только строку, содержащую «@» :

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

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

Также появился атрибут type со значением tel , который позволяет ввести телефон:
Здесь же опять необходимо указывать pattern , чтобы данное поле работало нормально, ведь формат телефонов у всех же разный. К примеру вот такой формат:

Пока телефон не будет введен правильным способом, форма никуда не отправится. Также отмечу, что pattern можно использовать и в простых текстовых полях ( type=»text» ).

Ещё один новый атрибут type со значением url , который позволяет проверить действительно ли введен url. Пример:

Ещё один новый элемент — это ползунок, который задаётся атрибутом type со значением range .

У данного элемента есть минимальное и максимальное значение, которые затем можно куда-то передавать. Сразу домашнее задание:

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

Если возникнут трудности, то код можно посмотреть ниже:

Следующий новый элемент — это number . Сразу приведу пример и всё станет понятно:

В данном случае мы можем выбрать элементы от 5 до 100 с шагом 5. Данный элемент далек от совершенства. Мало того, что он в разных браузерах выглядит по-разному, так в него можно вручную внести значение (некоторые браузеры это обрабатывают). Хотя мой браузер вполне нормально обработал данное поле (пользуюсь яндекс-браузером). Использовать его пока не рекомендую, если только не делать проверки на Javascript. Ещё одно домашнее задание (на этот раз кода не будет):

Сделайте проверку на Javascript, что введенное значение в данное поле должно было кратно 5 (использовать событие change ).

Пока мы разобрали только один атрибут required . Но есть ещё и другие:

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

Атрибут placeholder служит для подсказки. Как только вы что-то начнете вводить, подсказка исчезнет. Для примера:

В данной статье вы узнали какие новые элементы по работе с формами появились в HTML5. Это была 1 часть статьи, в следующей статье мы рассмотрим другие элементы по работе с формами, подпишитесь, чтобы не пропустить.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Атрибут type

Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис

Значения

В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.

Табл. 1. Значения type

Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Пиво Чай Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. Пиво Чай Кофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения, представленные в табл. 2.

Табл. 2. Значения type в HTML5

Тип Описание
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

Поддержка этих значений браузерами показана в табл. 3.

Формы HTML5: разметка

Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами — здесь описано множество новых атрибутов и плюшек!

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

  • input type=»text»
  • input type=»checkbox»
  • input type=»radio»
  • input type=»password»
  • input type=»h
  • возможности стилизации с помощью CSS ограничены
  • расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
  • валидация на стороне клиента требует JavaScript

Дополнительные типы полей

В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Тип Описание
email ввод email-адреса
tel ввод телефонного номера — нет строгого синтаксиса, но разрывы строк будут удалены
url ввод URL
search поле поиска с разрывами строк автоматически удаляется
number число с плавающей точкой
range элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date ввод дня, месяца и года
datetime ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local ввод даты и времени без временной зоны
month ввод месяца и года без временной зоны
week ввод номера недели без временной зоны
time ввод времени без временной зоны
color выбор цвета

Атрибуты полей ввода

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

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

указывает способ ввода. Наиболее полезные возможности:

  • verbatim — содержимое с дословной передачей смысла, например имена пользователей
  • latin — латиница, например, поля поиска
  • latin-name — имена, то есть с заглавной первой буквой
  • latin-prose — содержимое с не дословной передачей смысла, например сообщения, твиты, прочее.
  • numeric — числовые значения, где не подходят типы number и range , например, номера кредитных карт
Атрибут Описание
name имя поля ввода
value изначальное значение
checked делает флажок или переключатель выбранным
maxlength Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования — pattern=».<3,>«, что проверит на наличие минимум трех символов во вводимой строке
placeholder ненавязчивая подсказка внутри поля
autofocus устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required указывает, что в поле должно быть введено значение (не пустое поле)
pattern проверяет значение на соответствие регулярному выражению
min минимальное разрешенное значение (числовое и дата)
max максимальное разрешенное значение (числовое и дата)
step шаг изменения значения. Например, input type=»number» min=»10″ max=»19″ step=»2″ разрешит только значения 10, 12, 14, 16 или 18
autocomplete указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode
size размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows Количество текстовых строк (только для textarea)
cols количество рядов символов (только для textarea)
list ссылается на список опций
spellcheck установить в true или false, чтобы включить/отключить проверку привописания для поля
form идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled отключает поле ввода — нет валидации, и данные не будут отправлены

Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.

Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.

Списки данных

Список данных содержит набор подходящих значений для любого типа поля, например:

но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome — по значениям (IE), а текст указывает уменьшенным серым шрифтом:

Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.

Отключение валидации

Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.

Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.

Поля вывода

Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации

  • output — результат вычисления пользовательских действий
  • progress — полоса прогресса (атрибуты value и max задают состояние)
  • meter — шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum

Разделение и подпись полей

Согласно спецификации, каждый элемент формы считается параграфом, и отделяется от остальных частей элементом

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

Что более важно — метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:

Элементы управления не стандартизированы

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

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

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

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

Всегда используйте правильный тип!

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

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

  1. Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
  2. IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
  3. JavaScript плагин, как в jQuery UI позволяет определять собственный формат — да хоть YYYY-MM-DD — но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.

Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.

За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется.

Валидация на серверной стороне

Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:

  • багов браузера или ошибок в JavaScript, пропускающих неверные данные
  • пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
  • отправка данных с систем, которые вы не контролируете
  • перехват данных на пути от браузера к серверу (обычно по HTTP)

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

И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.

В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-markup/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 38062
Правила перепечатки

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

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

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 » , подготовленной дружной командой проекта Интернет-технологии.ру

Формы HTML | Теги input и textarea

Здравствуйте уважаемые начинающие веб-мастера. Продолжим изучение HTML

Эту статью полностью посвятим формам html.

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

Различные окошки, в которые выставляются галочки или точки для выбора того или иного элемента или действия — это тоже форма.

Поля для комментариев, кнопки Отправить, Очистить, Выберите файл — всё это тоже формы html.

Создаются формы при помощи тегов

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

Поле для ввода пароля
Поле для ввода текста
Кнопка
Сбросить
Отправить
Кнопка картинка
Позволяет выбрать несколько элементов Арбуз
Дыня
Переключатель выбирает один элемент Арбуз
Дыня
Выбор файла

Кроме обязательного атрибута type , тег input принимает ещё ряд атрибутов, значения которых влияют на формы.

size — определяет ширину текстового поля.

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

Синтаксис: input type=»text» size=»20″ >

value — присваивает значение элемента.

В зависимости от типа формы, значения атрибута value выполняют следующие функции:

1. Для текстовых полей, указывает предварительно введённую строку. Например в форме подписки — это Ведите Ваш E-mail. При заполнения поля, эта строка исчезает, а после очистки появляется вновь.

input type=»text» value=»Введите Ваш e-mail» >

2. Для кнопок устанавливает текст внутри кнопки.

input type=»button» value=»Кнопка» >

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

input type=»radio» value=»one» > Арбуз
input type=»radio» value=»two» > Дыня

align — определяет выравнивание изображения, текста.

bottom — выравнивание по нижней границе (задаётся по умолчанию);

top — выравнивание изображения по самому высокому элементу первой строки;

left — выравнивание по левому краю;

right — выравнивание по правому краю;

middle — выравнивание середины изображения по базовой линии;

input type=»image» src=»https://starper55plys.ru/html/formyi-html-teg-input/images/10.png» align=»left» >

alt — альтернативный текст изображения.

Выводит окно с описанием изображения при наведении курсора.

input type=»image» alt=»Любой текст» >

border — добавляет рамку к изображению.

Задаётся только толщина рамки любым целым числом в пикселях. Цвет — под цвет текста.

input type=»image» border=»2″ >

name — имя формы, необходимое для идентификации её обработчиком.

В значении указывается любое уникальное имя.

input type=»Любой из элементов» name=»Любое имя» >

checked — предварительно активированный переключатель или флажок.

У этого атрибута нет значений. Просто его присутствие указывает, что переключатель или флажок уже помечен.

disabled — блокирует возможность изменения элемента.

У этого атрибута нет значений. Его присутствие блокирует всякую активность в форме.

maxlenght — определяет максимальное количество символов в тексте.

В значении указывается любое целое положительное число

input type=»text» maxlenght=»200″ >

readonly — устанавливает, что поле и его содержание не могут изменятся пользователем.

У этого атрибута нет значений.

Форма комментариев создаётся несколько иначе.

Для создания формы комментариев применяется тег textarea

Размер окно задаётся атрибутами cols и rows , через количество предполагаемых строк и столбцов.

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

Теперь напишем html файл с формами, и посмотрим, как всё это смотрится в коде.

input type =» radio » name =» pol » value =» muj «> Муж. br >
input type =» radio » name =» pol » value =» jen «> Жен. /p >

p >Ваша профессия

input type =» checkbox » name =» builder » value =» buil «> Строитель

input type =» checkbox » name =» military » value =» mil «> Военный

input type =» checkbox » name =» farmer » value =» farm «> Фермер /p >

p >Напишите несколько слов о себе

textarea name =» comment » cols =» 40 » rows =» 3 «> /textarea > /p >

p > input type =» submit «>
input type =» reset «> /p >
/form >
/body >
/html >

Вот такая форма обратной связи с пользователем получилась.

Как Вы надеюсь понимаете — это чистый html. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

Но об этом читайте в рубрике CSS

Желаю творческих успехов.

Приглянулось платье. Решила купить — не влезла. Расстроилась, купила торт. Влез гад.

HTML5 формы: типы тега input (часть 1)

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

Вид элемента определяет атрибут type :

• type=»text» — создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value ;

• type=»password» — создание поля для ввода пароля, причем введенная информация отображается звездочками;

• type=»checkbox» — создание флажка;

• type=»radio» — определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов .

• type=»button» — создание кнопки произвольного назначения;

• type=»submit» — создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке;

• type=»reset» — тоже кнопка, но для отмены ввода данных в форму;

• type=»image» — создание кнопки с рисунком. Для указания графического файла используется атрибут src . Атрибут align предназначен для позиционирования кнопки с рисунком. Значения атрибута уже неоднократно упоминались: bottom , left , middle , right , top .

• type=»file» — средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Кроме того, браузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный (для операционной системы) диалог выбора файлов;

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

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

accept . Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

accesskey . . Переход к элементу с помощью комбинации клавиш.

align . Определяет выравнивание изображения.

alt . . Альтернативный текст для кнопки с изображением.

autocomplete . Включает или отключает автозаполнение.

border . . Толщина рамки вокруг изображения.

checked . Предварительно активированный переключатель или флажок.

disabled . . Блокирует доступ и изменение элемента.

form . Связывает поле с формой по её идентификатору.

formaction . Определяет адрес обработчика формы.

formenctype . Устанавливает способ кодирования данных формы при их отправке на сервер.

formmethod . Сообщает браузеру каким методом следует передавать данные формы на сервер.

formnovalidate . . Отменяет встроенную проверку данных на корректность.

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

list . . Указывает на список вариантов, которые можно выбирать при вводе текста.

max . Верхнее значение для ввода числа или даты.

maxlength . . Максимальное количество символов разрешенных в тексте.

min . Нижнее значение для ввода числа или даты.

multiple . Позволяет загрузить несколько файлов одновременно.

name .. . Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern . . Устанавливает шаблон ввода.

placeholder . Выводит подсказывающий текст.

readonly . Устанавливает, что поле не может изменяться пользователем.

required . Обязательное для заполнения поле.

size . . Ширина текстового поля.

src . Адрес графического файла для поля с изображением.

step . Шаг приращения для числовых полей.

tabindex . Определяет порядок перехода между элементами с помощью клавиши Tab.

type . . Сообщает браузеру, к какому типу относится элемент формы.

Формы HTML | Теги input и textarea

Здравствуйте уважаемые начинающие веб-мастера. Продолжим изучение HTML

Эту статью полностью посвятим формам html.

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

Различные окошки, в которые выставляются галочки или точки для выбора того или иного элемента или действия — это тоже форма.

Поля для комментариев, кнопки Отправить, Очистить, Выберите файл — всё это тоже формы html.

Создаются формы при помощи тегов

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

Поле для ввода пароля
Поле для ввода текста
Кнопка
Сбросить
Отправить
Кнопка картинка Позволяет выбрать несколько элементов Арбуз
Дыня
Переключатель выбирает один элемент Арбуз
Дыня
Выбор файла

Кроме обязательного атрибута type , тег input принимает ещё ряд атрибутов, значения которых влияют на формы.

size — определяет ширину текстового поля.

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

Синтаксис: input type=»text» size=»20″ >

value — присваивает значение элемента.

В зависимости от типа формы, значения атрибута value выполняют следующие функции:

1. Для текстовых полей, указывает предварительно введённую строку. Например в форме подписки — это Ведите Ваш E-mail. При заполнения поля, эта строка исчезает, а после очистки появляется вновь.

input type=»text» value=»Введите Ваш e-mail» >

2. Для кнопок устанавливает текст внутри кнопки.

input type=»button» value=»Кнопка» >

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

input type=»radio» value=»one» > Арбуз
input type=»radio» value=»two» > Дыня

align — определяет выравнивание изображения, текста.

bottom — выравнивание по нижней границе (задаётся по умолчанию);

top — выравнивание изображения по самому высокому элементу первой строки;

left — выравнивание по левому краю;

right — выравнивание по правому краю;

middle — выравнивание середины изображения по базовой линии;

input type=»image» src=»https://starper55plys.ru/html/formyi-html-teg-input/images/10.png» align=»left» >

alt — альтернативный текст изображения.

Выводит окно с описанием изображения при наведении курсора.

input type=»image» alt=»Любой текст» >

border — добавляет рамку к изображению.

Задаётся только толщина рамки любым целым числом в пикселях. Цвет — под цвет текста.

input type=»image» border=»2″ >

name — имя формы, необходимое для идентификации её обработчиком.

В значении указывается любое уникальное имя.

input type=»Любой из элементов» name=»Любое имя» >

checked — предварительно активированный переключатель или флажок.

У этого атрибута нет значений. Просто его присутствие указывает, что переключатель или флажок уже помечен.

disabled — блокирует возможность изменения элемента.

У этого атрибута нет значений. Его присутствие блокирует всякую активность в форме.

maxlenght — определяет максимальное количество символов в тексте.

В значении указывается любое целое положительное число

input type=»text» maxlenght=»200″ >

readonly — устанавливает, что поле и его содержание не могут изменятся пользователем.

У этого атрибута нет значений.

Форма комментариев создаётся несколько иначе.

Для создания формы комментариев применяется тег textarea

Размер окно задаётся атрибутами cols и rows , через количество предполагаемых строк и столбцов.

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

Теперь напишем html файл с формами, и посмотрим, как всё это смотрится в коде.

input type =» radio » name =» pol » value =» muj «> Муж. br >
input type =» radio » name =» pol » value =» jen «> Жен. /p >

p >Ваша профессия

input type =» checkbox » name =» builder » value =» buil «> Строитель

input type =» checkbox » name =» military » value =» mil «> Военный

input type =» checkbox » name =» farmer » value =» farm «> Фермер /p >

p >Напишите несколько слов о себе

textarea name =» comment » cols =» 40 » rows =» 3 «> /textarea > /p >

p > input type =» submit «>
input type =» reset «> /p >
/form >
/body >
/html >

Вот такая форма обратной связи с пользователем получилась.

Как Вы надеюсь понимаете — это чистый html. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

Но об этом читайте в рубрике CSS

Желаю творческих успехов.

Приглянулось платье. Решила купить — не влезла. Расстроилась, купила торт. Влез гад.

Определение и Использование

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

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

Изменения в HTML5

В HTML5 у элемента input появились новые атрибуты, а у его атрибута type появились новые значения.

Примеры с использованием новых атрибутов Вы можете найти в нашем HTML5 учебнике.

Атрибуты

В поле Изменения Вы можете узнать какие изменения произошли с данным атрибутом в HTML5.

Топ-пост этого месяца:  Топ плагинов jQuery. Плагин jQuery Cookie
Добавить комментарий