Форма - это инструмент для отправки куда-либо (на сервер) введённой информации с компьютера пользователя.
Форма начинается с тега и заканчивается закрывающим тегом . Тег может включать в себя следующие атрибуты:
action. Указывает тот URL-адрес, куда будут отправлены данные, переданные из формы. По URL-адресу обычно находится программа, которая обрабатывает данные. Также вместо URL можно указать электронный адрес, например: action="mailto:[email protected]"
В этом случае, данные из формы отправятся на электронный адрес [email protected].
enctype. Используется для указания метода кодирования данных, передаваемых на сервер. Может иметь 3 значения.
text/plain. Используется для передачи данных по электронной почте.
multipart/form-data. Используется для передачи файлов на сервер со своего компьютера.
enctype="application/x-www-form-urlencoded. Применяется во всех остальных случаях. Является методом кодирования по умолчанию.
method. Определяет метод передачи введённой информации. Может иметь 2 значения.
get. Является значением по умолчанию. Передаваемые этим методом данные будут передаваться через графу URL-адреса и будут видимыми для глаз человека, который находится в момент передачи рядом с монитором. Информация находится вместе с адресом в одной графе и отделяется от него знаком "?". Используется для небольших объёмов информации.
post. Этим методом обычно передаются большие объёмы информации. Данные не выводятся в адресную строку браузера, как в предыдущем случае.
name. Имя формы. Не является обязательным атрибутом.
После тега обычно следуют различные элементы пользовательского интерфейса. Практически все они начинаются с тега . С его помощью создаются кнопки, поля ввода данных и различные переключатели. Тег содержит обязательный атрибут , с помощью которого задаётся тип элемента. Также этот тег может содержать другие атрибуты, но рассмотрим всё на примере.
Пример формы
Форма для написания небольшого ознакомительного письма (личные данные у нас не сохраняются).
Результат выполнения выше набранного html-файла смотри здесь. Соответственно, та веб-страница, на которой много элементов формы, есть результат выполнения нашего текста, а следующая страница (появляющаяся после оправки формы) - это результат простенького сценария, написанного на php. Следующая страница появляется только в том случае, когда компьютер подключен к интернету. Далее дадим комментарии к находящемуся выше примеру.
. Как вы уже догадываетесь, с этой строчки начинается сама форма. Запись action="https://mutivseti.ru/test.php" обозначает, что данные из формы передадутся программе test.php, которая находится на сайте mutivseti.ru. Затем она (программа) эти данные обработает и выдаст результат в виде веб-страницы. Данные будут переданы методом post, это видно из записи method=post.
. С тега начинается практически все элементы формы и этот элемент не является исключением. С помощью атрибута type определяется тип формы. type=text обозначает, что этот элемент формы будет текстовым полем для ввода данных (высота поля равна одной строке). Атрибут value задаёт надпись, которая будет находиться в текстовом поле по умолчанию (вместо неё можно написать свою). Атрибут size определяет длину поля ( в нашем случае 25 символов). С помощью атрибута name задаётся имя или название элемента формы. Значения атрибутов type и name здесь указываются без кавычек, так как содержат всего одно слово на английском языке. Если бы слова было два, то значения этих элементов были бы указаны в кавычках. Значение атрибута value указывается в кавычках, так как там находится слово на русском языке, хоть и одно.
. type=checkbox обозначает тип формы - флажок в виде маленького квадратика. value='не' - если флажок помечен галочкой, то результатом этого будет слово не, если галочка отсутствует, то значение этого элемента будет пустым. Атрибут checked указывает на то, что флажок помечен галочкой.
Во-первых, этот элемент формы не начинается с тега . создаёт открывающийся список c названием life. Для тега существуют дополнительные атрибуты.
align=left|right|center. Выравнивание элемента по левому краю|центру|правому краю.
multiple. Позволяет из списка выбрать несколько элементов.
size. Задаёт количество видимых элементов списка, до нажатия на стрелочку, по умолчанию size=1.
Каждый атрибут списка начинается с тега и заканчивается закрывающим тегом . Атрибут value, задаёт значение элемента, которое будет отправлено программе (а затем ей обработано) или по почте. Текст, который находится между метками виден пользователю, но никуда не отправляется. Атрибут selected указывает на то, что по умолчанию будет выбран этот элемент. Тегом элемент с "кодовым" названием открывающийся список закрывается.
. Здесь создаётся текстовое поле для ввода пароля. Текст, набранный на клавиатуре, будет отображаться в виде точек.
. Тег задаёт большое текстовое поле для ввода информации. Атрибут cols задаёт ширину текстового поля (измеряется в количестве символов одной строки), а rows задаёт высоту поля (количество строк). С помощью элемента wrap устанавливается пренос элементов на следующую строку. Ниже запишем значения для атрибута wrap.
wrap=virtual. Указывает, что текст в поле формы будет автоматически переноситься на другую строку при печатании с клавиатуры, однако, данные из формы передадуться программе-обработчику или по электронной почте в виде одной большой строки (без переносов).
wrap=physical. Текст будет переноситься на другую строку не только в поле формы при наборе его с клавиатуры, но и придёт на удалённый сервер в том же виде.
wrap=off. Текст не будет автоматически переноситься на следующую строку формы (будет переносится только в том случае, если пользователь будет сам его переносить нажатием клавиши ENTER). Также текст отправиться на сервер в том виде, в каком был набран с клавиатуры (со всеми пробелами и переносами строки).
Если между тегами напечатать что-нибудь при задании формы, то это автоматически будет отображаться в поле формы, правда может быть заменено на другую запись пользователем.
. Таким образом задаётся форма для загрузки данных на сервер.
. Всё, что находится между этими тегами, обводится в рамку (ипользуется только для форм!!!).
. Всё, что находится между этими тегами, является заголовком рамки.
гранж
рэп
рок
хаус
транс
альтернатива
Это группа радиокнопок. У всех этих радиокнопок одинаковое имя (название). Это означает, что из всех вариантов радиокнопок можно выбрать только одну, значение (value) которой будет передано на указанный URL-адрес. Как и в элементе формы checkbox, здесь тоже можно указать атрибут checked.
. Этот элемент создаёт кнопку для отправки данных. В атрибуте value указывается то, что будет написано на самой кнопкке.
. Этот элемент формы создаёт кнопку для отмены отправки данных на сервер и удаления всей написанной пользователем информации в форме.
. Создаётся кнопка для отправки данных в виде рисунка, где src - путь к рисунку.