Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.
На рисунке представлена форма регистрации студента на сайте образовательного учреждения.
Для создания формы используется контейнер
с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.
Структура простейшей формы:
элементы форм…
В каждой форме необходимо также наличие кнопки 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. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
Создание форм HTML
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы
начинается с ключевого слова
. У тега
задают начало и конец формы. Начинающий форму тег
содержит два атрибута: action
и method
. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method
указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST
и GET
.
Замечание
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
$text
=
nl2br
($_POST
[
"mytext"
]);
?>
Задача:
Пусть необходимо создать выпадающий список с годами с 2000 по 2050. Решение:
Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.
Обсуждение:
Для начала создадим два файла: form.html
и action.php
. В файле form.html
будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:
I. Ввод данных вручную:
II. Ввод данных через цикл:
Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST
.
Описание:
Создадим HTML-форму для отправки файла на сервер.
В данной html-форме присутствует элемент browse
, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл"
, файл передается сценарию-обработчику.
Затем необходимо написать сценарий обработчик action.php
. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:
if(isset($_FILES
[
"myfile"
]))
// Если файл существует
{
$catalog
=
"../image/"
;
// Наш каталог
if (is_dir
($catalog
))
// Если такой каталог есть
{
$myfile
=
$_FILES
[
"myfile"
][
"tmp_name"
];
// Времменый файл
$myfile_name
=
$_FILES
[
"myfile"
][
"name"
];
// Имя файла
if(!
copy
($myfile
,
$catalog
)) echo
"Ошибка при копировании файла "
.
$myfile_name
// Если неудалось скопировать файл
}
else
mkdir
("../image/"
);
// Если такого каталога нет, то мы его создадим
}
?>
Замечание
Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.
Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.
Также хотел бы продемонстрировать пример с элементом checkbox
. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox
’a не выбран, то суперглобальная переменная $_POST
вернет пустое значение:
Синий
Черный
Белый
if (!empty($_POST
[
"mycolor"
])) echo
$_POST
[
"mycolor"
];
// Если выбран хоть 1 элемент
else echo
"Выберите значение"
;
?>
Описание
HTML тег
создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.
Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента
располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:
Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.
По умолчанию форма никак не отображается на веб-странице, видны только элементы расположенные внутри неё, однако с помощью CSS можно придать форме любой внешний вид.
Атрибуты
accept-charset:
Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды .
Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент
).
action:
Указывает адрес отправки данных из заполненной формы, где будет обрабатываться данная информация.
autocomplete:
Определяет, включить или выключить автозаполнение формы. При включенном автозаполнение браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута:
on:
браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
off:
пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.
Примечание:
атрибут autocomplete не поддерживается браузером Opera.
Enctype:
Указывает способ кодирования данные формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post". Возможные значения:
application/x-www-form-urlencoded:
значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+
", а специальные символы в значения ASCII HEX).
multipart/form-data:
символы не кодируются. Используется для элементов , у которых в атрибуте type установлено значение "file
".
text/plain:
пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
method:
Указывает метод передачи данных HTTP-протокола, который будет использован при отправке данных формы. Возможные значения:
get:
данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (?
), для разделения передаваемых данных между собой используется символ амперсанда (&
). Данный метод применяется при отправке данных небольшого размера.
post:
данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.
Если атрибут method не указан, по умолчанию будет использоваться метод GET.
name:
Определяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться, так же нельзя в качестве значения атрибута оставлять пустую строку.
novalidate:
Указывает, что данные введенные в форму не будут проверятся перед отправкой. Возможные значения логического атрибута novalidate:
Примечание:
атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.
Target:
Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы.
_blank:
открывает документ в новом окне или вкладке.
_self:
открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
_parent:
открывает документ в родительском фрейме.
_top:
открывает документ во всю ширину окна.
имя_фрейма:
открывает документ в iframe, имя которого было указано в качестве значения.