HTML Формы. Создание форм в HTML Анимированные Поиск Входной
Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.
Синтаксис тега
Тег
, где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
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, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару
:
Элемент
является необходимым условием для всех форм. Он может иметь следующие атрибуты:
method Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
action Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.
Синтаксис формы для сценария:
Синтаксис формы для почты:
Элемент является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:
TEXT Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
Синтаксис:
PASSWORD Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
size. Задаёт максимально допустимую длину поля в символах.
value. Задаёт значение по умолчанию, которое можно менять.
Синтаксис:
HIDDENЕще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных. Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
CHECKBOXФлажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
checked. Задаёт начальный статус флажка по умолчанию.
value. Задаёт значение по умолчанию, которое можно менять.
Синтаксис:
RADIO Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.
SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе
. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения. Синтаксис:
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. Задаёт значение выбранного слова для сценария.
Элемент
Синтаксис:
Элемент Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.
Пример: Допустим что на текущей странице задан базовый URL при помощи элемента тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков? и +,поиск будет осуществлен.
Элемент
name задает имя элементу.
value задает значение элементу.
type при использовании в качестве кнопки принимает значения: button, submit и reset.
disabled делает недоступным данный элемент
tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.