При передачи формы по умолчанию используется тип. Формы в HTML. Заголовок группы элементов формы
Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.
1) Создание простой формы
Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action
и method
. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method
указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST
и GET
.
Замечание
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
В данной 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 это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера.
Другими словами, формы используются для сбора информации введённой пользователями.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега
Рассмотрим пример использования:
Пример использования тега Да
Нет >
В этом примере мы:
Внутри первой
формы:
Разместили две
радиокнопки (
) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя
, значения мы указали разные. Для первой
checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes
). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
Внутри второй
формы:
Разместили две
радиокнопки (
) для выбора одного из ограниченного числа вариантов. Для второй
радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no
). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Подсказка для полей ввода
Давайте рассмотри пример использования:
Пример использования атрибута placeholder
В данном примере мы указали для элемента с типом text
(однострочное текстовое поле) и типом password
(поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Используя полученные знания составьте следующую форму оформления заказа:
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
С помощью средств HTML можно создавать формы для ввода информации посетителем Web-страницы.
Тег
accept-charset
Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму.
Помогает в ситуации, когда страницы сайта в одной кодировке, а данные нужно отправить в другой.
Или когда браузер неправильно автоопределил кодировку.
Например: accept-charset="cp1251"
или accept-charset="utf8"
.
action
Имя программы, которая будет обрабатывать форму.
enctype
Тип содержимого (метод кодирования). Например, если форма содержит файлы, то enctype="multipart/form-data"
.
(По умолчанию enctype="application/x-www-form-urlencoded
").
method
Метод передачи данных от формы обрабатывающей программе.
Может принимать значения: get
или post
. При использовании get
браузер кодирует данные, получаемые от пользователя,
и добавляет к значению атрибута action
парами имя=значение. Данные отделяются от значения атрибута action
вопросительным знаком (?).
При использовании post
данные передаются отдельно.
name
Имя формы. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру.
novalidate
Наличие этого атрибута означает, что данные формы не должны проверяться.
onsubmit
JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик
срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем
многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз
некорректно заполнил какое-то поле.
target
Фрейм, куда отправить полученную информацию (задается во фреймосодержащих документах).
Пример
...Элементы формы...
Контейнер
…
существует не сам по себе. Посылаемые данные содержатся в
специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.