HTML Формы. Надписи к полям формы. Пример: Простая HTML-форма
Оставьте комментарий6,950
Чаще всего в формах используется тег . Он не имеет
закрывающего тега. Вся информация, необходимая
браузеру для обработки, содержится
непосредственно в теге и задается с
помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута 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
, при этом для разделения адресов используется запятая (,)
Пример
С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.
Несколько submit внутри одной формы
До недавнего времени в форму можно было вставить только одну кнопку submit, в противном случае форма обрабатывала только последнюю кнопку. Добавляя method="post" и url к элементу формы "form" мы получали рабочую форму.
Теперь ситуация изменилась – в HTML добавили новые свойства "formmethod" и "formaction". Они позволяют добавить метод post и url непосредственно в кнопку "submit", таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке "submit", а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.
Теперь каждая кнопка "submit" относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка "submit" без новых параметров, то он вернет форме значения, установленные для элемента form.
Свойства formmethod и formaction поддерживаются всеми популярными браузерами
Элементы формы (input, select, textarea) за пределами формы
Общепринятый факт, что все элементы формы, принадлежащие ей должны находится внутри элемента
На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).
Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования.
Для того, чтобы все это сделать на своих web-страницах и нужны формы.
Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это
все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках,
посвященных, например, javascript.
Итак, в html форма задается тегами . Все остальные элементы формы располагаются между этими
тегами.
У тега есть несколько параметров:
name
- имя формы. Необходимо, если на странице несколько форм
action
- определяет URL-адрес, по которому будет отправлена информация введеная пользователем
method
- определяет способ отправки информации
target
- указывает имя окна, в котором будут отображаться результаты обработки отправленной формы
На данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных.
А пока запомните, что все элементы формы располагаются между тегами :
Текстовое поле
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом
Результат:
Параметры:
name
- имя элемента,
type
- тип элемента (в данном случае - text),
size
- размер текстового поля в символах, которые одновременно будут видны, при вводе
большего количества символов, они будут прокручиваться,
maxlength
- максимальное количество символов, которое можно ввести в поле, если опустить
этот параметр, то число символов будет неограниченным,
value
- текст, который будет отображаться (его можно стереть), при отсутствии этого параметра
поле будет пустым.
Возможны еще два параметра:
disabled
- блокирует поле от любых изменений,
readonly
- делает поле доступным только для чтения.
Пример:
Результат:
Текстовое поле для ввода пароля
Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него
появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как
у простого текстового поля, кроме параметра type="password"
.
Пример:
Результат:
Попробуйте ввести что-нибудь в этом поле.
Флажки
Вы, конечно, встречали подобный элемент:
Он задается все тем же тегом , причем один тег задает один флажок. Нужно четыре флажка,
придется четыре раза писать input.
Пример:
Рассмотрим его параметры:
type
- тип элемента (в данном случае - checkbox),
name
- имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
value
- значение элемента, указывает программе обработчику формы значение пункта, который
выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
checked
- им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может
выбрать другие пункты.
Переключатели
В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name
должны быть
одинаковы для всех элементов группы. Параметр type="radio"
, все остальные такие же, как у флажков.
Результат:
Кнопки
Существует четыре вида кнопок:
submit
- кнопка отправки содержимого формы web-серверу. Ее параметры:
type="submit"
- тип кнопки,
name
- имя кнопки,
value
- надпись на кнопке.
image
- графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо
подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
type="image"
- тип графической кнопки,
name
- имя кнопки,
src
- адрес картинки для кнопки.
reset
- кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
type="reset"
- тип кнопки очищения,
name
- имя кнопки,
value
- надпись на кнопке.
button
- произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:
type="button"
- тип произвольной кнопки,
name
- имя кнопки,
value
- надпись на кнопке.
onclick
- указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие
события (например, двойной щелчок), но здесь мы не будем их рассматривать.
Если на форме несколько кнопок, то они должны иметь разные названия.
Пример кода:
Результат:
Кнопки можно задавать и по другому, при помощи тегов . Возможности у таких
кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:
type
- тип кнопки, может принимать значения:
reset
- кнопка очистки формы,
submit
- кнопка отправки данных,
button
- кнопка произвольного действия.
name
- имя кнопки,
value
- надпись на кнопке.
Пример кода:
Результат:
physical
- перенос и на экране и при поступлении на сервер.
disabled
- неактивное поле,
readonly
- разрешено только чтение.
Пример:
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента
Рис. 1. Улучшенные веб-формы с помощью HTML5