function
setErrorMessages
(formControl
)
{
var
validityState_object
=
formControl
.
validity
;
if
(validityState_object
.
valueMissing
)
{
formControl
.
setCustomValidity
("Please set an age (required)"
)
;
}
else
if
(validityState_object
.
rangeUnderflow
)
{
formControl
.
setCustomValidity
("You\"re too young"
)
;
}
else
if
(validityState_object
.
rangeOverflow
)
{
formControl
.
setCustomValidity
("You\"re too old"
)
;
}
else
if
(validityState_object
.
stepMismatch
)
{
Чаще всего в формах используется тег
. Он не имеет
закрывающего тега. Вся информация, необходимая
браузеру для обработки, содержится
непосредственно в теге и задается с
помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута 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
, заданный в теге
РЕЗУЛЬТАТ:
Атрибут 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
, при этом для разделения адресов используется запятая (,)
Пример
Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера
Параметры
Описание параметров тега
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис
Аргументы
- bottom
- Выравнивание нижней границы изображения по окружающему тексту
- left
- Выравнивает изображение по левому краю окна
- middle
- Выравнивание середины изображения по базовой линии текущей строки.
- right
- Выравнивает изображение по правому краю окна.
- top
- Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Значение по умолчанию bottom. Браузеры также подддерживают аргументы absbottom
, absmiddle
, baseline
и texttop
, которые не включены в спецификацию HTML 4.01.
Параметр ALT
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Значением может быть любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Параметр BORDER
Браузеры обрабатывают изображения, добавленные через тег , подобно рисункам, созданным с помощью тега ![]() . В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
Допустимое значение - любое целое положительное число в пикселах. Значение по умолчанию 0.
Параметр CHECKED
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Параметр DISABLED
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Параметр MAXLENGTH
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Параметр NAME
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.
Параметр READONLY
Когда к тегу добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Параметр SIZE
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Допустимое значение - любое целое положительное число.
Параметр SRC
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением.
Синтаксис
В качестве значения принимается полный или относительный путь к файлу.
Параметр TYPE
Обязательный параметр type сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Аргументы
- button
- Кнопка.
- checkbox
- Флажки. Позволяют выбрать более одного варианта из предложенных.
- file
- Поле для ввода имени файла, который пересылается на сервер.
- hidden
- Скрытое поле. Оно никак не отображается на веб-странице.
- image
- Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
- password
- Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
- radio
- Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
- reset
- Кнопка для возвращение данных формы в первоначальное значение.
- submit
- Кнопка для отправки данных формы на сервер.
- text
- Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
Значение по умолчанию - text.
Параметр VALUE
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается параметром name тега , а значение — параметром value.
В зависимости от типа элемента параметр value выступает в следующей роли:
- для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
- для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value;
- для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.
| 