Типы полей input. Примеры форм, созданных на Input с различными значениями для Type. Стиль по умолчанию
Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной параметр тега INPUT , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text ), поле с паролем (password ), переключатель (checkbox ), флажок (radiobutton ), скрытое поле (hidden ), кнопка (button ), кнопка для отправки формы (submit ), кнопка для очистки формы (reset ), поле для отправки файла (file ) и кнопка с изображением (image ). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.
Синтаксис
Закрывающий тег
Не требуется.
Параметры
align
- определяет выравнивание изображения.
alt
- альтернативный текст для кнопки с изображением.
border
- толщина рамки вокруг изображения.
checked
- предварительно активированный переключатель или флажок.
disabled
- блокирует доступ и изменение элемента.
maxlength
- максимальное количество символов разрешенных в тексте.
name
- имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly
- устанавливает, что поле не может изменяться пользователем.
size
- ширина текстового поля.
src
- значение элемента.
Пример 1. Использование тега INPUT
Ваше имя:
Каким браузером в основном пользуетесь:
Internet Explorer
Netscape
Opera
FireFox
Mozilla
Комментарий
Описание
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис
Применяется
Аргументы
В таблице 1 перечислены возможные значение параметра align
и результат его использования.
| absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | |
| absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| bottom или baseline | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Значение по умолчанию
bottom
Пример 2. Выравнивание поля с изображением
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Примечание
Хотя все значения параметра align
поддерживаются браузерами, аргументы absbottom
, absmiddle
, baseline
и texttop
не описаны спецификацией HTML 4.
Описание
Параметр alt
устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
...
Описание
Браузеры обрабатывают изображения, добавленные через тег INPUT
, подобно рисункам, созданным с помощью тега IMG
. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 4. Добавление рамки к изображению
...
Примечание
В настоящее время этот параметр поддерживается только браузером Netscape, остальные браузеры его игнорируют и отображают изображение без рамки.
Описание
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (checkbox), может быть отмечен только один элемент группы, для флажков (radiobutton) допустимо пометить хоть все элементы.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
Пример 5. Помечаем переключатели
С какими операционными системамы вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS
Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Аргументы
Любое целое положительное число в символах.
Значение по умолчанию
Ввод символов не ограничен.
Пример 7. Ограничение ввода числа символов в поле
Описание
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name
.
Значение по умолчанию
Нет.
Пример 8. Использование имени поля
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
Введите текст
Описание
Когда к тегу INPUT
добавляется параметр readonly
, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 9. Поле только для чтения
Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Аргументы
Любое целое положительное число.
Значение по умолчанию
20
Пример 10. Ширина поля
Описание
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 11. Путь к графическому файлу
...
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Аргументы
В таблице 2 перечислены возможные значение параметра type
и получаемый вид поля формы.
Описание
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара имя/значение, где имя задается параметром name
тега INPUT
, а значение - параметром value
.
В зависимости от типа элемента параметр value выступает в следующей роли:
- для кнопок (input type=button | reset | submit ) устанавливает текстовую надпись на них;
- для текстовых полей (input type=password | text ) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value ;
- для флажков и переключателей (input type=checkbox | radio ) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
Любая текстовая строка.
Значение по умолчанию
Нет.
Пример 13. Добавление значения поля
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух
Новые типы элемента
Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута type элемента .
Если браузеру встречается неизвестный тип элемента , веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:
В HTML5 из этого поведения извлекается польза. А именно, в элемент было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле нового типа email :
Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:
Предложить услуги редактирования. Например, интеллектуальный браузер может предоставить способ выбрать адрес электронной почты из адресной книги и вставить его в поле адреса.
Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.
Выполнять проверку. Браузеры могут выполнять более сложные проверки после того, как пользователь нажмет кнопку для отправки данных.
Спецификация HTML5 не предоставляет разработчикам браузеров никаких наставлений по первому пункту. Браузеры свободны управлять отображением и редактированием разных типов данных любым имеющим смысл способом, и разные браузеры могут добавлять различные небольшие удобства.
Но более важными являются возможности проверки и исключения ошибок. Как абсолютный минимум, браузер с поддержкой HTML5-форм должен не допустить отправки формы, содержащей данные, которые нарушают правила типов данных. Поэтому, если браузер не может предотвратить ошибки непосредственно при вводе (согласно второму пункту вышеприведенного списка), он должен выполнить их проверку, когда пользователь попытается отправить форму (согласно третьему пункту).
К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры - они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.
В таблице ниже приведены новые типы данных и уровень полной поддержки основными браузерами. Полная поддержка означает, что в случае нарушения типа данных форма не отправляется.
| Тип данных | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
| - | 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 приводит к единообразному поведению.
Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно - как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.
Атрибуты autocorrect и autocapitalizeЭти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone
Атрибут multipleВеб-разработчики использовали атрибут multiple с элементом для создания списков с множественным выбором с незапамятных времен. Но сейчас они могут использовать этот атрибут с определенными типами элемента , включая тип file (для закачивания файлов) и email. В браузере, поддерживающем этот атрибут, пользователь может выбрать сразу несколько файлов закачивания на сервер или вставить несколько адресов электронной почты в одно поле.
Спецификация Обязательный атрибут ЗначенияВ табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
| button | Кнопка. | |
| checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. | Пиво Чай Кофе |
| file | Поле для ввода имени файла, который пересылается на сервер. | |
| hidden | Скрытое поле. Оно никак не отображается на веб-странице. | |
| image | Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. | |
| password | Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. | |
| radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. | Пиво Чай Кофе |
| reset | Кнопка для возвращения данных формы в первоначальное значение. | |
| submit | Кнопка для отправки данных формы на сервер. | |
| text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. |
В HTML5 добавлены новые значения, представленные в табл. 2.
Поддержка этих значений браузерами показана в табл. 3.
| Значение | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| color | 21.0+ | 11.01+ | |||||
| date | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime-local | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ | |
| month | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| number | 10.0 | 6.0+ | 10.62+ | 5.0+ | 2.3+ | 4.0+ | |
| range | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ | 5.0+ | |
| search | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 4.0+ | |
| tel | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 3.1+ | |
| time | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| url | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
| week | 5.0+ | 10.62+ | 5.0+ | 5.0+ |
HTML5 IE Cr Op Sa Fx
Тег input, атрибут type
Пиво
Чай
Кофе
HTML5 IE Cr Op Sa Fx
Тег input, атрибут type
Введите число от 1 до 10
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент ... . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
| accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов , которые будут использоваться для отправки формы, например, . |
| action | Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # . Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: |
| autocomplete | |
| enctype | Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" . application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 . multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
| method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. |
| name | Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . |
| novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
| target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
Элемент ... предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом . Название группы проявляется слева в верхней границе . Например, если в элементе хранится контактная информация:
Имя *
Рис. 2. Группировка элементов формы с помощью
| disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — . |
| form | в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. |
| name | Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id . |
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
| accept | Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов. |
| alt | Определяет альтернативный текст для изображений, указывается только для . |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
| autofocus | Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. |
| checked | Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" . |
| disabled | |
| form | Значение атрибута должно быть равно атрибуту id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. |
| formaction | Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы. |
| formenctype | Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты: application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX) multipart/form-data — символы не кодируются text/plain — пробелы заменяются на символ + , а специальные символы не кодируются. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса. |
| formnovalidate | Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. |
| formtarget | Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы. _parent – загружает ответ в родительский фрейм _top – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем. |
| height | Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля. |
| list | Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. |
| max | Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week . |
| maxlength | Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов. |
| min | Позволяет ограничить допустимый ввод числовых данных минимальным значением. |
| multiple | Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. |
| name | Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id . |
| pattern | Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. |
| placeholder | Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). |
| readonly | Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. |
| size | Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password . |
| src | Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля . |
| step | Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). |
| type | button — создает кнопку. |
| checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль |
|
| color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. |
|
| date — позволяет вводить дату в формате дд.мм.гггг. День рождения: |
|
| datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм. День рождения — день и время: |
|
| email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail: |
|
| file — позволяет загружать файлы с компьютера пользователя. Выберите файл: |
|
| hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. | |
| image — создает кнопку, позволяя вместо текста на кнопке вставить изображение. |
|
| month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. |
|
| number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5): |
|
| password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль: |
|
| radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец: |
|
| range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора | |
| reset — создает кнопку, которая очищает поля формы от введенных пользователем данных. |
|
| search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск: |
|
| submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки. |
|
| text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста. |
|
| time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время: |
|
| url — поле предназначено для указания URL-адресов. Главная страница: |
|
| week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю: |
|
| value | Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. |
| width | Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. |
Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
| autofocus | Устанавливает фокус на нужном начальном текстовом поле автоматически. |
| cols | Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки. |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно значению атрибута id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. |
| maxlength | Значение атрибута задает максимальное число символов для ввода в поле. |
| name | Задает имя текстового поля. |
| placeholder | Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. |
| readonly | Отключает возможность редактирования содержимого поля. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. |
| rows | Указывает число, которое означает, сколько строк должно отображаться в текстовой области. |
| wrap | Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard , то должно указываться значение атрибута cols . |
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
| autofocus | Устанавливает автоматический фокус на элементе при загрузке страницы. |
| disabled | Отключает раскрывающийся список. |
| form | Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы. |
| multiple | Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl . |
| name | Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. |
| required | Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. |
| size | Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. |
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. КнопкиЭлемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
| autofocus | Устанавливает фокус на кнопке при загрузке страницы. |
| disabled | Отключает кнопку, делая ее некликабельной. |
| form | Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы. |
| formaction | Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента . |
| formenctype | Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы. multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. text/plain — символы не кодируются, а пробелы заменяются на символ + . |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения: get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру. |
| formnovalidate | Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" . |
| formtarget | Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента . _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent — загружает ответ в родительский фрейм _top — загружает ответ во весь экран framename — загружает ответ во фрейм с указанным именем. |
| name | Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript. |
| type | Определяет тип кнопки. Возможные значения: button — кликабельная кнопка reset — кнопка сброса, возвращает первоначальное значение submit — кнопка для отправки данных формы. |
| value | Задает значение по умолчанию, отправляемое при нажатии на кнопку. |
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Элемент (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег ) и определяет пользовательское поле для ввода информации.
Поле ввода принимает различный вид, в зависимости от значения атрибута type , применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.
Так как тег является встроенным, то его не обязательно заключать в форму (тег ), но если вы отправляете данные на сервер, то это необходимо сделать. А вот, если вы обращаетесь к тегу , например, при помощи скриптов, то достаточно его разместить внутри любого элемента, который может содержать инлайн-теги.
Примечание: Тег не может содержать какой-либо контент, он может содержать только атрибуты.
Синтаксис Закрывающий тегНе требуется.
Атрибуты type Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text" .Возможные значения:
- button – определяет активную кнопку с надписью.
- checkbox – определяет элементы управления флажки.
- color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
- date – определяет поле для ввода календарной даты (год, месяц, день).
- datetime – определяет поле для ввода даты и времени.
- datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
- email – определяет поле для адреса электронной почты.
- file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
- hidden – определяет скрытое поле ввода (не отображается на Web-странице).
- image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src , чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height , чтобы определить размер изображения в пикселях.
- month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
- number – определяет поле для ввода чисел.
- password – определяет поле для ввода пароля (замаскированные символы).
- radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
- range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
- min = 1
- max = 100
- value = min + (max - min) / 2, или min , если max < min
- step = 1
- reset – создает кнопку сброса данных формы в первоначальное состояние.
- search – определяет текстовое поле для ввода строки поиска.
- submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
- tel – определяет поле для ввода телефонного номера.
- text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
- time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
- url – определяет поле для ввода URL-адреса.
- week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).
Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text
.
Элемент поддерживает
