Главная›Интернет›Как создать форму регистрации html с мускул. CSS формы. Создание панели регистрации
Как создать форму регистрации html с мускул. CSS формы. Создание панели регистрации
Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.
Атрибут action
является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные
).
Атрибут method
определяет способ отправки содержимого формы. Существует два метода - GET
и POST
. Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET
и POST
относится к языкам обработки данных (например, PHP
). Достаточно знать, что именно метод передачи данных POST
в большинстве случаях используется в формах.
Атрибут name
тега
Многострочное текстовое поле - тег
Тег
Атрибут name
тега
Атрибут disabled
блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly
говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols
и rows
соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте
. В данной статье я бы хотел рассказать о создании форм в HTML
. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
Создание форм HTML
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы
начинается с ключевого слова
. У тега
В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.
Структура кнопки:
Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:
Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию
Пример записи формы с двумя текстовыми полями:
Введитеимя:
Введите фамилию:
Результат работы формы представлен на рисунке.
В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга
К вышеуказанному коду добавим поле текстовой области:
Комментарий:
Результат работы кода с текстовой областью представлен на рисунке.
Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги
Структура записи списка:
Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге
Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.
Структура записи флажка и радиокнопки:
текст
Радиокнопка:
текст
В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.
Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:
В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:
Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.
Для вставки изображения в кнопку используется код, представленный в следующем примере:
При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:
Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:
Элемент формы hiddenбудет невидим в окне браузера.
Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:
Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.
HTML форма
- это инструмент, с помощью которого HTML-документ может послать
некоторую информацию в некоторую заранее определенную точку внешнего мира,
где информация будет некоторым образом обработана.
Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина
очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего
мира", в которую HTML форма будет посылать информацию. В качестве такой
"точки" в большинстве случаев выступает программа, написанная
на Перл или Си.
Программы, обрабатывающие данные, переданные формами, часто
называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает
"общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве
случаев требует хорошего знания соответствующего языка программирования
и возможностей операционной системы Unix.
В настоящее время определенное распространение получил язык PHP/FI,
инструкции которого можно встраивать прямо в HTML-документы (документы
при этом сохраняются в виде файлов с расширением *.pht или
*.php).
HTML формы передают информацию программам-обработчикам в виде пар
[имя переменной]=[значение переменной] . Имена переменных следует
задавать латинскими буквами. Значения переменных воспринимаются обработчиками
как строки, даже если они содержат только цифры.
Как устроена HTML форма
Форма открывается тегом
и заканчивается тегом
. HTML-документ может содержать в себе несколько форм,
однако формы не должны находиться одна внутри другой. HTML-текст, включая
теги, может размещаться внутри форм без ограничений.
Тег
может содержать три атрибута, один из которых
является обязательным. Вот эти атрибуты:
Обязательный атрибут. Определяет, где находится обработчик формы.
Определяет, каким образом (иначе говоря, с помощью какого метода
протокола передачи гипертекстов) данные из формы будут переданы обработчику.
Допустимые значения: METHOD=POST и METHOD=GET . Если значение
атрибута не установлено, по умолчанию предполагается METHOD=GET .
Определяет, каким образом данные из формы HTML будут закодированы
для передачи обработчику. Если значение атрибута не установлено, по умолчанию
предполагается ENCTYPE=application/x-www-form-urlencoded .
Простейшая HTML форма
Для того, чтобы запустить процесс передачи данных из формы обработчику,
нужен какой-то орган управления. Создать такой орган управления очень просто:
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку
с надписью Submit (читается "сабмит" с ударением на втором слоге,
от английского "подавать"), при нажатии на которую все имеющиеся
в форме данные будут переданы обработчику, определенному в теге
.
Надпись на кнопке можно задать такую, какая нравится, путем введения
атрибута VALUE="[Надпись]" (читается "вэлью"
с ударением на первом слоге, от английского "значение"),
например:
Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму
(пример 11). Она не будет собирать никаких данных,
а просто вернет нас к тексту этой главы.