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


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

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

Тег — элемент языка 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 представляет собой элемент управления формы. Он позволяет пользователю вводить данные и взаимодействовать с сайтом или приложением.

Синтаксис

Записывается как ( без закрывающегося тега ). Тегу присваивается атрибут 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 (часть 2)

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

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

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

HTML Input Types

This chapter describes the different input types for the element.

HTML Input Types

Here are the different input types you can use in HTML:

Input Type Text

defines a one-line text input field:

Example

This is how the HTML code above will be displayed in a browser:

Input Type Password

defines a password field:

Example

This is how the HTML code above will be displayed in a browser:

User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit

defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form’s action attribute:

Example

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

Input Type Reset

defines a reset button that will reset all form values to their default values:

Example

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

Input Type Radio

defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

This is how the HTML code above will be displayed in a browser:

Male
Female
Other

Input Type Checkbox

defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car

Input Type Button

defines a button:

Example

This is how the HTML code above will be displayed in a browser:

HTML5 Input Types

HTML5 added several new input types:

New input types that are not supported by older web browsers, will behave as .

Input Type Color

The is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

You can also use the min and max attributes to add restrictions to dates:

Example

Input Type Datetime-local

The specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Email

The is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add «.com» to the keyboard to match email input.

Example

Input Type File

The defines a file-select field and a «Browse» button for file uploads.

Example

Input Type Month

The allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example

Input Type Number

The defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

Input Type Range

The defines a control for entering a number whose exact value is not important (like a sl >min , max , and step attributes:

Example

Input Type Search

The is used for search fields (a search field behaves like a regular text field).

Example

Input Type Tel

The is used for input fields that should contain a telephone number.

Example

Input Type Time

The allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

Input Type Url

The is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds «.com» to the keyboard to match url input.

Example

Input Type Week

The allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Часть 2. Организация ввода информации

Интерактивное взаимодействие с посетителем

Серия контента:

Этот контент является частью # из серии # статей: Основы HTML5

Этот контент является частью серии: Основы HTML5

Следите за выходом новых статей этой серии.

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

Часто используемые сокращения
  • API: Application programming interface (Интерфейс прикладного программирования, API-интерфейс)
  • CSS3: Cascading style sheet version 3(Каскадная таблица стилей, версия 3)
  • HTML5: Hypertext Markup Language version 5(HTML, версия 5)
  • IT: Information technology(Информационные технологии, ИТ)
  • UTC: Coordinated universal time (Время в формате UTC)

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

В свою очередь, важнейшим объектом этого внимания являются органы управления формами — селективные кнопки, текстовые окна, поля типа «spinner» и т.д. Все эти теги жизненно необходимы для общения пользователей с Web-сайтом. Другими словами, без полнофункциональных органов управления (как с точки зрения их «механической» функциональности, так и с точки зрения их адекватности для заданной задачи) диалог невозможен и, соответственно, невозможна потенциальная конверсия посетителей.

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

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

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

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

Проектирование формы

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

Макет формы, который мы будем разрабатывать, показан на рисунке 1. На этой странице формы мы создадим следующие три области: область Header, область Form и область Footer. Область Header содержит заголовок страницы и подзаголовок, которые заключены между тегами . Расположенная в нижней части страницы область Footer содержит информацию об авторском праве, заключенную между тегами . Построение области Header и области Footer рассматривается в примере, приведенном в части 1 данной серии. Если вы не знакомы с тегами и , обратитесь к указанной статье.

Рисунок 1. Макет страницы для формы

При рассмотрении данной формы мы сконцентрируем внимание на следующих четырех тегах.

JavaScript и CSS3

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

JavaScript-код представляет собой простое окно предупреждений, которое возвращает три требуемых поля (листинг 9). Хотя объем использованного здесь JavaScript-кода имеет всего одну строку, он был помещен в отдельный JavaScript-файл — согласно проверенным типовым методикам.

Листинг 9. Пример JavaScript-кода для формы

В листинге 10 показан CSS3-код, который форматирует наш пример формы. Информация для разделов и не показана.

Листинг 10. Пример CSS3-разметки для формы

Заключение

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

Ресурсы для скачивания

  • этот контент в PDF
  • Файлы примера (HTML, CSS3 и JavaScript) (HTML5Forms.zip | 10 KБ)

Похожие темы

  • Оригинал статьи: HTML5 fundamentals, Part 2: Organizing inputs.
  • Создание современных Web-сайтов с использованием HTML5 и CSS3 (developerWorks, март 2010 г.). Комплексная статья по технологиям HTML5 и CSS3.
  • Новые теги в спецификации HTML 5 (developerWorks, август 2007 г.). В данной статье приведена информация по нескольким новым тегам HTML5.
  • Web-сайт 5doctor предоставляет прекрасный обзор современных тенденций в области HTML5.
  • Раздел HTML5 Tag Reference на Web-сайте W3Schools.com содержит обширный перечень тегов, определений и примеров HTML5.
  • Web-сайт WHATWG предоставляет подробную информацию по спецификации HTML5.

Комментарии

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

Атрибут 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
Просмотров: 38064
Правила перепечатки

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.

Шпаргалка по HTML5 Формам

Дата изменения: 18.05.2015

Создание HTML формы. Тег Form

Тег form — контейнер, в котором могут содержаться элементы web форм, такие как input, checkbox, radio button и т.д.

Задание пути отправления данных (данные отправляются в указанный обработчик (метод отвечающий за обработку данных не сервере) указанным методом GET или POST

Поле для ввода числа

INPUT type=»number»

Поле для ввода даты

INPUT type=»date»

Поле для установки цвета

INPUT type=»color»

Поле для ввода числа слайдером

INPUT type=»range»

Поле для ввода времени

INPUT type=»time»

Поле для ввода даты и времени

Поле для ввода Email

INPUT type=»email»

Поле для поиска

INPUT type=»search»

Поле для ввода номера телефона

INPUT type=»tel»

Поле для ввода url адреса

Текстовое поле TEXTAREA

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

Флажки Check-Box

Выбор Select

Кнопка Submit

Кнопка Button

Кнопка для выбора файла для загрузки File

Атрибуты элементов формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

value — Значение элемента.

HTML Тип ввода

В этой главе описаны различные типы ввода данных элемента .

Тип ввода Текст

определяет однострочное поле ввода текста:

Пример

Вот как код HTML будет отображаться в браузере:

Тип ввода Пароль

определяет поле ввода пароля:

Пример

Вот как код HTML будет отображаться в браузере:

Имя пользователя:

Пароль пользователя:

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

Тип ввода Отправить

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

Обработчик формы обычно представляет собой серверную страницу со сценарием обработки входных данных.

Обработчик формы указывается в форме с помощью атрибута action:

Пример

Вот как код HTML будет отображаться в браузере:

Если нажмете на кнопку value=»Отправить», получите текст по умолчанию:

Пример

Тип ввода Сброс

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

Пример

Вот как код HTML будет отображаться в браузере:

Если Вы измените входные значения и затем нажмите кнопку «Сбросить», то данные формы будут сброшены и назначены по умолчанию.

Тип ввода Радиокнопки

определяет радиокнопки.

Радиокнопки позволяют пользователю выбирать только одно из ограниченного числа вариантов:

Пример

Вот как код HTML будет отображаться в браузере:

Мужчина
Женщина
Другие

Тип ввода Флажки

определяет флажки.

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

Пример

Вот как код HTML будет отображаться в браузере:

У меня есть велосипед
У меня есть автомобиль

Тип ввода Кнопка

определяет кнопку:

Пример

Вот как код HTML будет отображаться в браузере:

Типы ввода HTML5

Добавлены несколько новых типов ввода HTML5:

  • color — цвет
  • date — дата
  • datetime-local — дата_время-локальная
  • email — электронная почта
  • month — месяц
  • number — число
  • range — диапазон
  • search — поиск
  • tel — телефон
  • time — время
  • url — url-адрес
  • week — неделя

Новые типы входных данных, которые не поддерживаются в старых браузерах, будут вести себя как .

Типы ввода Цвет

используется для полей ввода, которые содержат цвет.

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

Пример

Типы ввода Дата

используется для поля ввода, которые содержат дату.

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

Пример

Можно также добавить ограничения к датам:

Пример

Тип ввода Дата_время-локальная

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

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

Пример

Тип ввода Электронная почта

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

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

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

Пример

Тип ввода Месяц

позволяет пользователю выбрать месяц и год.

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

Пример

Тип ввода Число

определяет числовое поле ввода.

Вы также можете установить ограничения на то, какие номера применить.

В следующем примере отображается числовое поле ввода, где можно ввести значение от 1 до 5:

Пример

Ограничения ввода

Ниже приведен список некоторых распространенных ограничений ввода (некоторые атрибуты являются новыми в HTML5):

Атрибуты Описание
disabled Указывает, что поле ввода должно быть отключено
max Задает максимальное значение для поля ввода
maxlength Указывает максимальное число символов для поля ввода
min Задает минимальное значение для поля ввода
pattern Задает регулярное выражение для проверки входных значений
readonly Указывает, что поле ввода доступно только для чтения (изменение невозможно)
required Указывает, что поле ввода (должны быть заполнено)
size Задает ширину (в символах) поля ввода
step Задает законные числовые интервалы для поля ввода
value Задает значение по умолчанию для поля ввода

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

В следующем примере отображается числовое поле ввода, где можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию — 30:

Пример

Тип ввода Диапазон

определяет элемент управления для ввода чисел, которое не имеет точного значения (например, элемент управления ползунком). Диапазон по умолчанию от 0 до 100. Однако можно установить ограничения на числа которые применяются атрибутами min, max и step:

Пример

Тип ввода Поиск

используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

Тип ввода Телефон

используется для поля ввода телефонного номера.

Выбор телефона в настоящее время поддерживается только в Safari 8.

Пример

Тип ввода Время

позволяет пользователю выбрать время (без часового пояса).

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

Пример

Тип ввода Url-адрес

используется для полей ввода содержания URL-адреса.

В поле URL-адрес проверяется автоматически при отправке в зависимости от поддержки браузера.

Некоторые смартфоны распознают тип URL-адреса и добавляют к клавиатуре «.com», для соответствия входного URL-адреса.

Пример

Тип ввода Неделя

позволяет пользователю выбрать день недели и год.

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

Топ-пост этого месяца:  Изменения в механизме формирования локальных выдач Google
Добавить комментарий