В одной из предыдущих заметок, я рассказывал об универсальном теге input, с помощью которого можно создать большинство элементов веб-форм. Но, используя лишь эти элементы (текстовое поле, кнопка и.т.д.) создать полноценную форму не получиться.
Предположим, у нас есть простая форма, которая состоит из двух текстовых полей, в которые пользователь должен ввести свое имя и фамилию.
Имя
Фамилия
куда
конкретно и каким образом
Теперь понятно, что эта часть кода является формой.
Если вы просмотрите страницу с этим кодом в браузере, то увидите, что особых изменений на ней не произошло. Сам по себе этот тег никаких визуальных изменений в структуру страницы не вносит.
Но эта форма до сих пор не является рабочей. Хотя два текстовых поля теперь у нас воспринимаются браузером как часть одной формы, но совсем не понятно, куда же все-таки отсылать данные, которые введет в эту форму пользователь. У этой формы отсутствует очень важный, обязательный
атрибут.
Смысл использования тега form
в специальных атрибутах, которые можно к нему применять.
Давайте посмотрим, что это за атрибуты. В первую очередь, это два самых важных атрибута для веб-форм.
1) a
ction – этот атрибут является обязательным. Т.е. создавать форму без его использования особого смысла не имеет. С его помощью указывается путь к программе (скрипту), которая будет обрабатывать данные введенные в форме.
2) method
– этим атрибутом мы указываем метод, с помощью которого данные будут переданы к программе обработчику.
Здесь возможны два варианта GET
и POST
. Я не буду в этой заметке описывать, чем отличаются эти два метода. Это тема уже другой статьи.
Если не указывать этот атрибут, то по умолчанию будет использован метод GET
.
Давайте добавим эти два атрибута к нашей форме:
Имя
Фамилия
Вот теперь наша форма уже практически рабочая. Мы указали, куда должны отправляться данные, которые введет пользователь с помощью атрибута action
, и указали, каким образом эти данные должны отправляться.
Следующие атрибуты встречаются намного реже, для решения специфичных задач, но я все равно немного расскажу о них.
3) enctype – с помощью этого атрибута можно указать тип содержимого/content type, которое будет отправлено на сервер.
4) accept
— задает список разделённых запятыми типов содержимого / content type list
, которые будут отправлены на сервер.
4) accept
—charset
– задает список кодировок текста, которые будут сообщаться программе (скрипту).
С первым действием все, переходим ко второму.
2 действие. Создать элемент управления – кнопку, при нажатии на которую данные бы отправились в программу обработчик.
Хорошо, мы с вами создали веб-форму, но ведь пользователю нужно совершить какое-то действие, чтобы данные, которые он ввел, были отправлены в программу обработчик. Обычно это делается созданием кнопки с атрибутом type=»submit»
.
Все браузеры уже настроены таким образом, что когда пользователь кликает по кнопке с атрибутам type
=»submit
«. То автоматически данные, которые введены в форме, будут отправлены по адресу, который задан в атрибуте action
, формы.
Давайте прямо сейчас добавим эту кнопку к нашей веб-форме. О том, как создаются кнопки, я рассказывал в предыдущем уроке .
Теперь, когда пользователь нажмет на кнопку «Отправить», данные, которые он ввел в текстовые поля, будут отправлены программе-обработчику, которая находится, например, по адресу «http
://dimachen
.info
/papka
/script
.php
».
На сегодня все. До встречи!
Пользователь может заполнить эти поля, но никаких изменений от этого не произойдет. Для того, чтобы браузер начал воспринимать эту форму как единую структуру, нужно произвести два действия:
1 действие. Сообщить браузеру, что эти текстовые поля являются единым целым, одной формой.
Специальный тег, который позволяет это сделать — это тег form
. form
– это специальный элемент, который позволяет объединить множество элементов формы в единую структуру и сообщает браузеру, чтобы эта структура воспринималась как единое целое.
Используя тег form
, мы можем сообщать браузеру, куда
конкретно и каким образом
нужно отправить данные, которые введены в элементах формы, чтобы они были обработаны специальной программой.
Тег form
это что-то вроде контейнера, в котором хранятся элементы формы. Это парный тег. Зоной его действия, между открывающим
, определяются элементы, которые будут являться частью формы.
Давайте вернемся к нашему предыдущему примеру и попробуем заключить элементы формы в этот тег:
Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?
Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.
Атрибут action
является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные
).
Атрибут method
определяет способ отправки содержимого формы. Существует два метода - GET
и POST
. Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET
и POST
относится к языкам обработки данных (например, PHP
). Достаточно знать, что именно метод передачи данных POST
в большинстве случаях используется в формах.
Атрибут name
тега
Сторона света - одно из четырех основных направлений:
7 Чудес света!
Сторона света - одно из четырех основных направлений:
Север
Юг
Запад
Восток
7 Чудес света!
Пирамида Хеопса
Висячие сады Семирамиды
Статуя Зевса в Олимпии
Храм Артемиды в Эфесе
Мавзолей в Галикарнасе
Колосс Родосский
Александрийский маяк
Многострочное текстовое поле - тег
Тег
Атрибут name
тега
Атрибут disabled
блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly
говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols
и rows
соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *
Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.
Синтаксис тега
...
Тег
имеет очень важный атрибут action
, которому присваивается адрес (URL) скрипта, которому передается полученная информация с формы для обработки. Мы не будем углубляться в подробности того, что происходит после отправки данных, поскольку эти вопросы уже решает не html, а методы GET и POST в PHP.
Пример 1. Форма html с кнопками
Это будут кнопки:
Кнопка один
Кнопка два
Кнопка три
После нажатия кнопки ОК, страница просто обновится, т.к. мы не прописали параметр action
Преобразуется на странице в следующее:
Это будут кнопки:
Кнопка один
Кнопка два
Кнопка три
А это будет текстовое поле. Например сюда можно вводить логин
А это будет большое текстовое поле. Например сюда можно ввести информацию о себе
После всего перечисленного будет кнопка ОК
После нажатия кнопки ОК, страница просто обновится, т.к. мы
не прописали параметр action
Пояснения к примеру
action=""
- говорит о том, что обработка данных будет происходить на этой же странице.
- атрибут type="radio"
говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name
и value
в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
- атрибут type="text"
говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name
(для php) и value
(значение по умолчанию).
- атрибут type="textarea"
говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
- атрибут type="submit"
говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.
Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега
, где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
1. Атрибут accept-charset="Кодировка"
- определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.
2. Атрибут action="URL"
- адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.
3. Атрибут autocomplete="on/off"
- задает или отключает автозаполнение формы. Может принимать два значения:
on
- включить автозаполнение;
off
- выключить автозаполнение;
4. Атрибут enctype="параметр"
- задает способ кодирования данных. Может принимать следующие значения:
application/x-www-form-urlencoded
- вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
multipart/form-data
- данные не кодируются
text/plain
- пробелы заменяются знаком +, буквы и другие символы не кодируются.
5. Атрибут method="POST/GET"
- задает метод отправки. Может принимать два значения:
GET
- передача данных в адресной строке (есть ограничение по объёму отправки данных)
POST
- посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)
6. Атрибут name="имя"
- задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.
7. Атрибут novalidate
- отменяет встроенную проверку данных формы на корректность ввода.
8. Атрибут target="параметр"
- имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:
_blank
- загружает страницу в новое окно браузера
_self
- загружает страницу в текущее окно
_parent
- загружает страницу во фрейм-родитель
_top
- отменяет все фреймы и загружает страницу в полном окне браузера
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.
В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам
чтобы перемещаться по веб-страницам.
Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода
. Эти виды взаимодействия включают в себя:
регистрацию и вход на сайтах;
ввод личной информации (имя, адрес, данные кредитной карты и др.);
фильтрацию контента (с помощью выпадающих списков, флажков и др.);
выполнение поиска;
загрузку файлов.
Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления
формы:
текстовые поля (для одной или нескольких строк);
переключатели;
флажки;
выпадающие списки;
виджеты для загрузки;
кнопки отправки.
Эти элементы управления задействуют разные теги
HTML, но большинство из них использует тег
. Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type
:
Элемент
является блочным элементом, который определяет интерактивную
часть веб-страницы. Как результат, все элементы управления (такие как
,