шаг открытый урок
TRANSCRIPT
Про HTMLформы HTMLформа — часть htmlдокумента, с помощью которой пользователь может отправить произвольную информацию на сервер.
Применение:
1. Авторизация 2. Регистрация 3. Поиск 4. Отзывы 5. Обратная связь 6. Создание и добавление
записей 7. И многое другое
Область применения ограничена
только изобретательностью разработчика
Особенности HTML-форм
1. Документ может содержать любое количество форм, но одновременно можно отправить только одну;
2. Количество полей в форме — не ограничено; 3. На странице видно только поля формы; 4. Значения полей можно менять через JavaScript; 5. Форму можно отправить не только по кнопке, но и вызовом
JavaScript функции — submit() 6. … или нажав на клавишу Enter в пределах формы; 7. Данные с формы можно обработать как на локальном, так и на
внешнем сервере; 8. Обработчик формы может быть написать практически на любом
языке программирования.
Правила построения форм
<form> <input type="text">
</form> — Простейшая форма с
текстовым полем
<form> <input type="password">
</form> — Это вторая форма все
на той же странице
1. Любая форма начинается и заканчивается с тега <form>; 2. Форме принадлежат только те поля, которые находятся между
<form> и </form>; 3. Форма, как и большинство элементов htmlразметки, должна быть
описана внутри тегов <body> и </body>; 4. Одно поле не может принадлежать сразу нескольким формам.
Атрибут формы "action" Указывает обработчик, на который будет отправлена форма. В качестве значения принимается полный или относительный путь к серверному файлуобработчику (URL). Пример использования:
<form action=""> <form action="handler.php"> <form action="http://localhost/form.php"> <form action="https://login.vk.com"> а также: <form action="script.asp"> <form action="login.cgi">
В HTML 5 этот атрибут можноопустить. Тогда форма будет отправлена на URL адрес текущей страницы.
Атрибут формы "method" Устанавливаем метод (способ) передачи данных на сервер. Поддерживаемые значения: "get" и "post". Если не указывать, тогда по умолчанию — "get". Значение регистронезависимо. Пример использования:
<form method=""> // Означает — get <form method="get"> // Означает — get <form method="post"> // Означает — post
<form method="post"> <input type="text"> <input type="submit">
</form> — Форма будет отправлена
методом POST
Атрибут формы "name" Устанавливает уникальное имя формы в документе. Может принимать любой набор символов включая цифры и буквы. Используется при обращении к форме через JavaScript. Пример использования:
<form name="order2045"> <form name="loginform"> // Хорошая практика <form name="мояформа"> // Плохая практика
Пример отправки формы через JavaScript: document.forms["order2045"].submit() document.forms.loginform.submit()
Атрибут формы "enctype" Определяет способ кодирования данных формы при их отправке на сервер. Возможные значения:
1. application/xwwwformurlencoded — заменяет пробелы на знак "+" и кодирует русские буквы их шестнадцатеричными значениями. Например, %D0%90%D0%BD%D1%8F вместо Аня; Этот способ используется по умолчанию.
2. multipart/formdata — данные не кодируются. Применяется при отправке файлов;
3. text/plain — пробелы заменяются знаком "+", буквы и другие символы не кодируются.
Пример использования:
<form enctype="multipart/formdata"> <form enctype="text/plain">
Атрибут "name" у элементов формы Для того, чтобы значение поля было отправлено на сервер, у поля должен быть установлен атрибут "name". Пример использования:
<input type="text" name="login"> <select name="city">
<option value="1">Одесса</option> <option value="2">Киев</option>
</select> Так же, можно установить значение поля формы по умолчанию:
<input type="text" name="login" value="root">
Более детально про элементы формы можно узнать на сайте http://w3schools.com/ или http://htmlbook.ru
Как отправляется форма? При отправке формы, браузер формирует HTTPзапрос, в котором учитывает данные полей формы и отправляет на сервер. HTTPзапрос это сообщение, которое отправляется по сети на адрес назначения и несет в себе информацию, на основе которой сервер (получатель) должен сформировать и вернуть ответ. HTTPзапрос состоит из:
1. Строка запроса — содержит HTTP метод, URL назначения и версию протокола. Пример: GET http://localhost/ HTTP/1.1
2. Заголовки — характеризует клиента и передаваемые данные; 3. Тело — передаваемые данные. Например: HTML документ.
Всего существует 10 HTTP методов. В рамках данной лекции мы рассмотрим работу только с методами: GET и POST.
HTTP метод GET Передаваемые данные содержатся в URLадресе назначения, который указан в HTTPзапросе. Пример URLадреса с GETпараметрами:
http://site.ru/index.php?name=Annet&age=22 Содержит два параметра в формате key=value:
name содержит значение Annet; age содержит значение 22;
Служебные символы: ? — начало перечисления параметров запроса; = — присвоение значения параметру; & — начало следующего имени следующего параметра. HTTP метод GET не используется для передачи больших объемов информации и может иметь ограниченное количество символов в URL.
HTTP метод POST Передаваемые данные содержатся в теле HTTPзапроса. Метод POST предназначен для отправки больших объемов информации (изображения, видео и аудио файлы, текстовая информация и прочее). Важно! Пользователь не видит передаваемые данные. Этим методом рекомендуется передавать секретные данные и личную информацию (пароли, номера телефонов, кредитных карт и прочее).
Область применения
POST:
Используется для создания или редактирования:
Создание \ Редактирование новости или комментария;
Отправка больших файлов; Отправка текстовой
информации и для передачи секретной или конфиденциальной информации:
Авторизация \ Регистрация; Данные кредитных карт.
GET: Используется для получения чего либо с сервера:
Страницу каталога по ее номеру
Товары категории по идентификатору
Файл по имени Для передачи малых объемов данных:
Передача поисковой фразы Передача списка фильтров
Пример GET формы <form action="" method="get">
<input type="text" name="name" value="Annet"> <input type="text" name="age" age="19"> <input type="submit" value="Найти">
</form>
Пример POST формы <form action="" method="post">
<input type="text" name="login"> <input type="password" name="password"> <input type="submit" value="Найти">
</form>
Массив $_GET $_GET суперглобальный ассоциативный массив параметров переданных GET методом (через URL).
Пример чтения GET данных URLадрес:
http://site.ru/index.php?name=Annet&age=19 PHPобработчик:
$name = $_GET["name"]; // Annet $age = $_GET["age"]; // 19 echo "Привет! Я $name и мне $age года";
Результат: Привет! Я Annet и мне 19 лет
Массив $_POST $_POST суперглобальный ассоциативный массив параметров переданных POST методом (в теле HTTPзапроса).
Пример чтения POST данных Структура формы:
<form action="" method="post"> <input type="text" name="login"> <input type="password" name="password">
</form> PHPобработчик:
$login = $_POST["login"]; // Поле login $password = $_POST["password"]; // Поле password echo "Логин $login и пароль $password";
Форма обратной связи <form action="" method="post">
<input type="text" name="name"/> <input type="text" name="email"/> <textarea name="msg"></textarea>
</form> <?php $name = isset($_POST["name"]) ? $_POST["name"] : ""; $email = isset($_POST["email"]) ? $_POST["email"] : ""; $msg = isset($_POST["msg"]) ? $_POST["msg"] : ""; if ($name && $email && $msg)
$text = "Имя:$name, Почта:$email\n$msg"; mail("[email protected]", "Feedback", $text);
else echo "Заполните имя, email и текст сообщения";
Больше или меньше <form action="" method="post">
<input type="text" name="x"/> <input type="text" name="y"/> <input type="submit" value="Определить"/>
</form> <?php $x = (int) isset($_POST["x"]) ? $_POST["x"] : 0; $y = (int) isset($_POST["y"]) ? $_POST["y"] : 0; $value = ($x > $y) ? "больше" :
($x==$y ? "равно" : "меньше"); echo "Число $x $value $y"; // 4 и 5 4 меньше 5 // 8 и 7 10 больше 7 // 3 и 3 3 равно 3
Калькулятор <form action="" method="post">
<input type="text" name="x"/> <input type="text" name="y"/> <input type="radio" name="action" value="plus"/> <input type="radio" name="action" value="minus"/> <input type="radio" name="action" value="mult"/> <input type="radio" name="action" value="div"/> <input type="submit" value="Рассчитать"/>
</form> // Коды операций: // plus Сложение // minus Вычитание // multi Умножение // div Деление
<?php $x = (int) isset($_POST["x"]) ? $_POST["x"] : 0; $y = (int) isset($_POST["y"]) ? $_POST["y"] : 0; $action = isset($_POST["action"]) ? $_POST["action"]:""; $result = 0; switch ($action) case "minus" : $result = $x $y; break; case "multi" : $result = $x * $y; break; case "div" : $result = $x / $y; break; default : $result = $x + $y; echo "Результат: $result";