Создание формы регистрации в html. Создание форм HTML
Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).
Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.
Атрибут name тега
Многострочное текстовое поле - тег
Тег
Атрибут name тега
Атрибут disabled блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols и rows соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.
Сама форма создаётся с помощью тега
Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега
В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto: . При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге
Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).
Рис. 1. Запуск приложения в Firefox
Рис. 2. Предупреждение Internet Explorer
Рис. 3. Выбор программы в Opera
Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару
:Элемент
Синтаксис формы для почты:
Элемент является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:
TEXT Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
Синтаксис:
PASSWORD Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
size. Задаёт максимально допустимую длину поля в символах.
value. Задаёт значение по умолчанию, которое можно менять.
Синтаксис:
HIDDENЕще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных. Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
CHECKBOXФлажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
checked. Задаёт начальный статус флажка по умолчанию.
value. Задаёт значение по умолчанию, которое можно менять.
Синтаксис:
RADIO Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.
SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе
RESET Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.
Синтаксис:
IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
src. Задаёт URL файла с изображением.
align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.
Синтаксис:
BUTTON Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
Синтаксис:
FILE Создает управляющий элемент выбор файла. Синтаксис:
ACCESSKEY Задает кнопку, при нажатии которой происходит обработка поля. Синтаксис:
SIZE Задает ширину элемента в пикселях. Синтаксис:
DISABLED Отключает возможность изменять содержимое поля или положение кнопки. Синтаксис:
Элемент
name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
rows. Задаёт высоту области в строках.
cols. Задаёт ширину области в символах.
Синтаксис:
Элемент
name. Задаёт имя.
size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
multiple. Задаёт возможность одновременного выбора нескольких значений.
Элемент же
Имеет атрибуты:
selected. Задаёт изначально выбранное слово.
value. Задаёт значение выбранного слова для сценария.
Элемент
Синтаксис:
Элемент
Пример:
Элемент
name задает имя элементу.
value задает значение элементу.
type при использовании в качестве кнопки принимает значения: button, submit и reset.
disabled делает недоступным данный элемент
tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
accesskey задает клавишу доступа.
Элемент
Элемент