Возможные значения атрибута type объекта формы input. Поле ввода адреса электронной почты. Скрытое поле HIDDEN

Новые типы элемента

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

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

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

Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:

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

Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.

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

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

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

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

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

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

Тип данных	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
email	-	4	10	5	10.6	-	-
url	-	4	10	5	10.6	-	-
search (без проверки)
tel (без проверки)
number	-	-	10	5	-	-	-
range	-	-	6	5	11	-	-
datetime, date, month, week, time	-	-	10	-	11	-	-
color	-	-	-	-	11	-	-

Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.

Адреса электронной почты

Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки - минимум два символа:

Тип email поддерживает атрибут multiple , который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.

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

URL-адреса

Тип url применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.

Некоторые браузеры также предлагают возможные варианты URL в выпадающем списке, которые обычно взяты из журнала недавно посещенных браузером страниц.

Поля поиска

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

В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.

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

Телефонные номера

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

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

Числа

В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

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

Возраст*

Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max . В следующем коде представлен пример ограничения возраста разумным диапазоном:

Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step , который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

Атрибут step также влияет на работу кнопок поля со счетчиком:

Ползунки

Другим числовым типом HTML5 является range . Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

Возраст*

Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:

Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

Дата и время

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

Ниже показан пример использования дат:

Дата рождения*

В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.

Цвет

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

Выберите любимый цвет

Цвет

Несколько необычных атрибутов элемента

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

Атрибут spellcheck

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

По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

Атрибут autocomplete

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно - как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Атрибуты autocorrect и autocapitalize

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

Атрибут multiple

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

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .

Атрибуты тега

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

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

Autocomplete="off" Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. .setAttribute("autocomplete","off"); autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами: ... ... ... Пример эмуляции свойства автофокус для старых браузеров . disabled Делает элемент недоступным. Недоступные элементы не передаются на сервер. name Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки. value Значение поля по умолчанию или надпись на кнопке. size Размер поля типа . maxlength Ограничение на количество символов, которые можно ввести в поле типа . readonly="readonly" или "" Запрещает изменение элемента. required Автоматически проверяет заполнено ли поле.
Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style: min Минимальное значение числа в поле типа number . max Максимальное значение числа в поле типа number . step Шаг изменения числа в поле типа number . pattern Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern . placeholder Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:

В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.

РЕЗУЛЬТАТ:

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

Типы элемента INPUT

Кнопка BUTTON

Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

Пример

РЕЗУЛЬТАТ:

Кнопка SUBMIT

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

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге

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

Пример

РЕЗУЛЬТАТ:

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

Пример

РЕЗУЛЬТАТ:

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

РЕЗУЛЬТАТ:

Кнопка RESET

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

Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input , то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name , всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

РЕЗУЛЬТАТ:

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

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

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

РЕЗУЛЬТАТ:

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

Пример

РЕЗУЛЬТАТ:

Для задания любого шага используйте step="any" .

Пример

РЕЗУЛЬТАТ:

Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

Пароль

Скрытое поле HIDDEN

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

Пример

...Другие элементы формы....

...Другие элементы формы...

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

Пример

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

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)

Пример

E-mail:

15 августа 2018

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

При выборе пола даются два варианта: мужской и женский. Они представлены в виде полей для выбора. Эти поля и создаются с помощью HTML тега checkbox.

Поля в HTML не всегда соответствуют дизайну сайта, поэтому их необходимо изменять. В этой статье мы поговорим с вами о том, как сделать стилизацию checkbox в CSS.

Что такое checkbox?

Это значение атрибута тега input, который содержится в теге form. Чаще всего используется для указания личной информации пользователя, например личных предпочтений.

Его отличие от radio в том, что он допускает выбор нескольких полей одновременно.

Создание checkbox. HTML

Чтобы разместить чекбоксы на сайте, необходимо создать форму. Для этого используется парный тег form. Он содержит в себе 2 атрибута - action и method. Первый указывает ссылку на обработчик формы, а второй - на метод индексации и обработки полученных значений.

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

Нам нужны только чекбоксы. Чтобы создать их, задайте атрибут type для тега input, со значением checkbox.

У нас есть пустые чекбоксы, нужно добавить обозначения. Их можно ввести после тега input.

Чтобы checkbox работал корректно, укажите атрибут value и name. Name - обязателен для обработчика, задавайте ему значение, равное названию поля. Value (значение чекбокса) - необязательный атрибут, но лучше использовать его для удобства.

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

Вот пример создания чекбоксов:

Видео по теме

Оформление checkbox. CSS

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

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

Чтобы изменить расположение checkbox в CSS, используем свойство margin. С его помощью мы сделаем так, чтобы наши чекбоксы располагались в центре веб-страницы, на небольшом расстоянии друг от друга.

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

Создадим 3 тега label на 3 тега input. Каждый label должен находиться перед полем input. Это парный тег, который имеет обязательный атрибут for. Он нужен для привязки этого тега к полю формы.

Создаем 3 идентификатора для наших полей: check1, check2, check3. Эти же значения указываем в атрибуте for. Теперь они привязаны к чекбоксам.

Теперь допишите ваш CSS код, чтобы он выглядел так:

Тут есть некоторые стили, которые не относятся к самим чекбоксам, но это нужно для общего оформления страницы.

Если вы все сделали правильно, то теперь ваша форма с чекбоксами будет иметь нормальный вид.

Описание

HTML тег - является пустым элементом и содержит только атрибуты. Используется в пределах элемента

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

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

Атрибуты

accept: Указывает типы файлов, которые могут быть переданы на сервер через поле загрузки файлов. Если тип загружаемого файла не совпадает ни с одним из типов файлов, указанных в значении, то файл будет игнорироваться. При указании нескольких значений, они должны разделяться запятой. Атрибут accept работает только совместно с атрибутом type="file", его возможные значения:

• audio/* - принимаются все звуковые файлы.
• video/* - принимаются все видео файлы.
• image/* - принимаются все файлы изображений.
• MIME_тип - принимается допустимый MIME-тип без параметров.

Совет: не рекомендуется использовать этот атрибут, как инструмент для проверки типа загружаемого файла. Загруженные файлы должны проверятся на сервере. Пример »

Примечание: атрибут accept не поддерживается в IE9 и более ранних версиях.

Alt: Предоставляет альтернативный текст для пользователя, если он по каким-либо причинам не может просматривать изображения. Атрибут alt может использоваться только совместно с атрибутом type="image". autocomplete: Определяет, будет ли включено автозаполнение для поля ввода данных:

• on - браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
• off - пользователь должен сам вводить значения для поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete работает со следующими значениями атрибута type элемента : text, search, url, tel, email, password, datepickers, range и color.

Autofocus: Указывает браузеру, что элемент должен получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

Checked: Указывает, что данный элемент будет выбран по умолчанию при загрузке страницы. Работает только с атрибутом type="checkbox" или type="radio". Значения для логического атрибута checked можно задавать следующими способами: Пример » disabled: Указывает, что элемент должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами: Пример »

Примечание: атрибут disabled не работает с .

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

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

Примечание: атрибут form не поддерживается в IE.

Formaction: Указывает URL-адрес файла, который будет обрабатывать данные ввода, при отправке формы. Атрибут formaction используется только с type="submit" или type="image", и переопределяет атрибут action элемента .

Примечание: атрибут formaction не поддерживается в IE9 и более ранних версиях.

Formenctype: Определяет способ кодирования данных формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post" элемента . Возможные значения:

• application/x-www-form-urlencoded - значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+ ", а специальные символы в значения ASCII HEX).
• multipart/form-data - символы не кодируются. Используется для элементов , у которых в атрибуте type установлено значение "file ".
• text/plain - пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.

Атрибут formenctype используется только совместно с type="submit" или type="image", и переопределяет атрибут enctype элемента .

Примечание: атрибут formenctype не поддерживается в IE9 и более ранних версиях.

Formmethod: Определяет HTTP метод для отправки данных на указанный URL (для type="submit" и type="image"):

• get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение (значение по умолчанию).
• post - отправляет данные формы, как HTTP после транзакции.

Атрибут formmethod может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут method элемента .

Примечание: атрибут formmethod не поддерживается в IE9 и более ранних версиях.

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

Примечание: атрибут formnovalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

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

• _blank - открывает документ в новом окне или вкладке.
• _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
• _parent - открывает документ в родительском фрейме.
• _top - открывает документ во всю ширину окна.
• имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.

Атрибут formtarget может использоваться только совместно с type="submit" или type="image", и переопределяет атрибут target элемента .

Примечание: атрибут formtarget не поддерживается в IE9 и более ранних версиях.

Height: Определяет высоту элемента в пикселях, используется только с (пример: height="100"). list: Устанавливает взаимосвязь между элементом

Примечание: атрибут list не поддерживается в IE9 и более ранних версиях, и в Safari.

Max: Указывает максимальное значение для ввода числа или даты. Можно использовать атрибут max совместно с атрибутом min для создания диапазона допустимых значений.

• число - указывает максимально допустимое значение.
• дата - указывает максимальную дату, разрешенную для ввода.

Атрибуты min и max работают со следующими значениями атрибута type: number, range, date, datetime, datetime-local, month, time и week.

Примечание: атрибут max не поддерживается в IE9 и более ранних версиях, и в Firefox.

Maxlength: Определяет максимальное количество символов, которое можно будет ввести в поле ввода. Этот атрибут можно использовать для ограничения количества символов, которое разрешается пользователю ввести в данное поле. Например при запросе года можно ограничить количество символов, установив значение атрибута maxlength равным 4. Пример » min: Определяет минимальное значение для ввода числа или даты.

• число - указывает минимально допустимое значение.
• дата - указывает минимальную дату, разрешенную для ввода.

Введите дату до 1980-01-01:
Введите дату после 2000-01-01:
Введите число (от 1 до 5):

Примечание: атрибут min не поддерживается в IE9 и более ранних версиях, и в Firefox.

Multiple: Указывает, что пользователь может ввести более одного значения. Атрибут multiple работает только с type="email" и type="file". Возможные значения логического атрибута multiple: Пример »

Примечание: атрибут multiple не поддерживается в IE9 и более ранних версиях.

Name: Атрибут name определяет имя элемента, оно отправляется на сервер вместе с введенными в поле данными. Имя может использоваться в JavaScript для ссылки на элемент или для идентификации переданных данных на сервере (например, при обработке данных на сервере, имя элемента позволяет определить, что было введено в качестве имени пользователя, а что - в качестве пароля). pattern: Указывает регулярное выражение, которое определяет синтаксис данных, ввод которых должен быть разрешен в поле ввода. Шаблон регулярного выражения должен соответствовать введенному значению целиком. Для описания работы шаблона можно воспользоваться глобальным атрибутом title. Атрибут pattern работает со следующими значениями атрибута type: text, search, url, tel, email и password.

Примечание: атрибут pattern не поддерживается в IE9 и более ранних версиях, и в Safari.

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

Атрибут placeholder работает со следующими значениями атрибута type: text, search, url, tel, email и password. Пример »

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версиях.

Readonly: Указывает, что поле ввода может быть использовано только для чтения и не может быть изменено (однако, текст можно выделить и скопировать). Возможные значения логического атрибута readonly: Пример » required: Указывает, что поле ввода необходимо заполнить перед отправкой формы. Если пользователь попытается отправить форму, не введя в поле никакого значения, то на экране отобразится предупреждающее сообщение. Это сообщение будет отличаться по содержанию и стилизации в зависимости от браузера и типа поля ввода.

Атрибут required работает со следующими значениями атрибута type: text, search, url, tel, email, password, date pickers, number, checkbox, radio и file. Возможные значения логического атрибута required:

Примечание: атрибут required не поддерживается в IE9 и более ранних версиях, и в Safari.

Size: Указывает ширину поля ввода (в качестве единицы измерения выступает количество видимых символов). Так, например, значение 3 создает поле ввода текста, ширина которого достаточна для отображение трех введенных символов (хотя пользователь при желании может ввести и большее количество). Атрибут size работает со следующими значениями атрибута type: text, search, tel, url, email и password. Для указания максимального количества вводимых знаков, воспользуйтесь атрибутом maxlength. Пример » src: Указывает путь к графическому файлу для поля с изображением. Атрибут src является обязательным для элементов с type="image" и может использоваться только с ними. step: Определяет интервал чисел для элемента . Пример: если step="3", то возможные значения чисел могут быть: -3, 0, 3, 6 и тд. Атрибут step может использоваться совместно с атрибутами max и min, для создания диапазона допустимых значений.

Примечание: атрибут step не поддерживается в IE9 и более ранних версиях, и в Firefox.

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

• button - определяет активную кнопку (главным образом используется с JavaScript для активации скрипта).
• checkbox - определяет элементы управления флажки, которые могут быть либо установлены, либо сняты. Можно установить сразу несколько флажков или не устанавливать ни один из них. Это отличает флажки от радио-кнопок (type="radio").
• color - генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
• date - позволяет получить доступ к встроенному в браузер виджету выбора даты.
• datetime - определяет элемент управления датой и временем (год, месяц, день, час, минута, секунда и доли секунды, основанный на часовом поясе UTC).
• datetime-local - определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
• email - определяет поле для адреса электронной почты.
• file - определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
• hidden - определяет скрытые поля ввода.
• image - определяет изображение, как кнопку для отправки.
• month - позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2014-05).
• number - определяет поле для ввода чисел.
• password - определяет поле для ввода пароля (замаскированные символы).
• radio - создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными.
• range - создает элемент управления ползунок, диапазон ползунка по умолчанию - от 0 до 100. Для изменения диапазона используются атрибуты min и max с желаемыми значениями. Обратите внимание, что данный элемент управления не отображает текущее значение.
• reset - определяет кнопку сброс (сбрасывает все поля формы в значения по умолчанию).
• search - определяет текстовое поле для ввода строки поиска.
• submit - определяет кнопку "Отправить".
• tel - определяет поле для ввода телефонного номера.
• text - определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
• time - допускает ввод значений в 24-часовом формате, например: 12:34. В поддерживающих браузерах элемент управления отображается как числовое поле ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
• url - определяет поле для ввода URL-адреса.
• week - позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2014-W15).

Пример » value: Указывает значение элемента , и используется по-разному для разных типов ввода:

• Для "button", "reset", и "submit" - определяет текст на кнопке
• Для "text", "password", "hidden" - определяет начальное (по умолчанию) значение поля ввода
• Для "checkbox", "radio", "image" - определяет значение, связанное с вводом (значение, которое передается при отправке)

Атрибут value не может использоваться с type="file", и обязательно должен присутствовать при type="checkbox" и type="radio". Пример » width: Определяет ширину элемента в пикселях, используется только с (пример: width="100").

Тег так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Пример

Имя:
Фамилия: