Беглый hp form success php. Создание Bootstrap контактной формы с использованием PHP и AJAX


В этой статье я опишу создание и отправку формы AJAX . После этого мы сможем рассмотреть реализацию анимации с помощью animate.css , валидации данных с помощью JavaScript .

На момент написания данной статьи Bootstrap 3.3.5 является актуальной версией фреймворка. Для этой статьи мы используем сборку Bootstrap по умолчанию (с 12 столбцами ). Когда вы будете выполнять задания этой статьи, убедитесь, что используете последние сниппеты и структуру кода, описанные в документации Bootstrap .

Структура файлов и папок

Мы создадим корневой каталог и добавим в него следующие файлы и папки:

Bootstrap-Form:


Нам нужно будет подключить некоторые front-end библиотеки:

  • Bootstrap ;
  • jQuery .

С учетом этих библиотек структура файлов будет выглядеть следующим образом:

Bootstrap-Form:


Создание формы

Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи :

Contact form using Bootstrap 3.3.4 " Send me a message

Это базовый шаблон HTML , в который мы будем добавлять содержимое формы. Мы подключили все необходимые файлы CSS и JavaScript . Заметьте, что для этого конкретного примера нам не нужен bootstrap.js .

Мы включили мета-тег viewport для медиа-запросов в рамках Bootstrap . JavaScript был помещен в нижней части файла, чтобы в первую очередь обрабатывался основной код.

В теге body мы включили div с классом col-sm-6 col-sm-offset-3 . Это означает, что в пределах окна просмотра sm (маленького ) и поверх него мы хотим отобразить столбец шириной 50% (максимальное количество столбцов 12 ). Класс col-sm-offset-3 задает отступ слева на 25% .

Таким образом, создается макет, который занимает половину доступного пространства и отцентрирован по горизонтали. После этого мы включили h3 , и дальше идет основа формы. Убедитесь в том, что вы применили к форме идентификатор, чтобы позже прикрепить к ней событие для отправки формы AJAX JQuery :


Без борьбы не бывает победы

Name Email Message Submit Message Submitted!

Это все поля ввода и кнопки, с которыми будет взаимодействовать пользователь. Первоначальный div с присвоенным классом row — это классический синтаксис Bootstrap , представляющий собой горизонтальную группировку элементов col . Столбцы в пределах Bootstrap создают отступы или пробелы. Удаляя их, можно добиться, чтобы строка равномерно вписывалась в контейнер.

Мы создали два столбца с классом col-sm-6 (50%) , который будем использовать, чтобы отделить верхнюю часть формы. В пределах первого столбца col-sm-6 мы создали label и поля для имени и электронной почты. Каждый из них содержит label с соответствующим атрибутом for , поэтому метка связана с соответствующим полем.

Каждый из этих столбцов включает в себя form-group , который семантически группирует метки, создавая небольшой отступ снизу:


Типографика

Bootstrap позволяет использовать классы для H1-H6 . Они помогают задать стили встроенных элементов без добавления дополнительных полей или создания блоков элементов super AJAX contact form . Мы использовали класс для H4 , чтобы задать стиль label и сделать их большими.

Класс form-control применяется для каждого элемента ввода, чтобы он занимал всю ширину контейнера (ширина 100% ). Этот класс также добавляет различные стили, которые позволяют создать легко читаемый элемент формы (большой размер, четкие края и т.д. ).

После этих столбцов мы включаем тело сообщения. Мы оборачиваем его в form-group и применяем те же стили, что и для меток и для текстовых полей.

Призыв к действию

Создадим submit button . Bootstrap содержит классы для различных кнопок и их состояний. Мы решили использовать кнопку “success ” (btn-success ), которая, по умолчанию, является зеленой.

Также нужно применить базовый класс btn , чтобы сбросить основные параметры кнопки (рамка, отступ, выравнивание текста, размер шрифта ). Мы применили класс btn-lg , который создает большую кнопку, а затем класс pull-right , который задает обтекание кнопки слева.

После кнопки мы включили div с идентификатором #msgSubmit и применили следующие классы: «h3 text-center hidden «. Класс h3 помогает создать больший заголовок, text-center устанавливает выравнивание текста по центру, а hidden — задает display: none и visible: hidden :


Добавление функционала отправки данных

Мы создали базовую Bootstrap JQuery AJAX form , но она еще ничего не делает. Наш следующий шаг — создать функцию, которая принимает вводимые Пользователями данные и отправляет их асинхронно в PHP .

Откройте файл scripts.js и скопируйте в него следующий код:

$("#contactForm").submit(function(event){ // отменяет отправку данных формы event.preventDefault(); submitForm(); });

Этот фрагмент кода JQuery , который прослушивает функции отправки данных #contactForm (как указано ранее ). Перед этой функцией мы обрабатываем переменную event , которая хранит действие отправки данных формы для функции.

event.preventDeafult() останавливает отправку данных формы при обновлении страницы без выбора действия в форме. И в конце этот код запрашивает функцию submitForm(); :

function submitForm(){ // Инициируем переменную с содержимым формы var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); $.ajax({ type: "POST", url: "php/form-process.php", data: "name=" + name + "&email=" + email + "&message=" + message, success: function(text){ if (text == "success"){ formSuccess(); } } }); } function formSuccess(){ $("#msgSubmit").removeClass("hidden"); }

Три инициированные переменные захватывают значения каждого из полей ввода формы и передают их переменной JavaScript для использования в дальнейшем.

Мы инициируем объект AJAX внутри JQuery и устанавливаем параметры для post , адрес размещения файла PHP , данные, которые мы хотим отправить, и функцию обратного вызова. Данные включают в себя все три переменные с соответствующим id . Функция обратного вызова вызывается, когда объект AJAX успешно принял информацию от скрипта PHP . Функция захватывает возвращенный текст и проверяет, равен ли он строке “success ”. Если да, то запускается финальная функция formSuccess .

Она удаляет скрытый класс из DIV #msgSubmit , который мы применили ранее, выводя таким образом текст.

Подключение к функции PHP Mail

Теперь нужно написать скрипт, который будет получать данные из формы AJAX , и отправлять контент через функцию PHP Mail . Откройте файл process.php и добавьте в него следующий код:

Нам необходимо сохранить переменные, которые мы хотим использовать. Из почтовой функции можно получить три входных переменных и присвоить им те же имена в PHP . Переменная $EmailTo является адресом электронной почты, которую можно задать в скрипте. $Subject — это строка, описывающая тему электронного письма.

Тело письма создается произвольно с добавлением трех созданных переменных. Сначала мы задаем текст описания, например, «Name: «, затем идет переменная, а затем перенос на новую строку (/n) . Те же действия мы повторяем, связывая все данные с переменной $body .

Чтобы отправить электронное письмо, мы присоединяем его к почтовой функции. Присвоив значение переменной $success , мы задаем адрес электронной почты, на который будет отправлено письмо, тему письма, тело и адрес электронной почты отправителя.

Чтобы начать процесс отправки электронной почте, нужно вызвать его в операторе if . Таким образом можно проверить, были ли данные формы успешно предоставлены или нет. Если функция Mail возвращает “true ”, скрипт возвращает “success ”, если функция выдает ошибку, возвращается “invalid ”.

Этот результат будет возвращаться объекту AJAX , и обрабатываться на стороне клиента. Преимущества AJAX заключается в том, что все это делается в асинхронном режиме на стороне клиента. Это позволяет пользователю продолжать взаимодействовать с сайтом во время отправки данных AJAX form :


Наводим блеск

Теперь мы сконцентрируемся на обеспечении обратной связи с пользователем с помощью различных дополнительных функций, которые можно включить. В частности, мы рассмотрим обратную связь формы с помощью обработки ошибок, как на стороне клиента, так и на стороне сервера.

Также для валидации формы мы используем некоторые инструменты:

  • Animate.css: ;
  • Bootstrap Validator .

Добавьте их в проект, как мы ранее делали с Bootstrap и JQuery . Эти инструменты помогут обеспечить обратную связь с пользователем после того, как он отправил данные.

Структура проекта теперь должна выглядеть следующим образом:


Валидация формы

Давайте начнем с установки валидатора после ввода данных формы обратной связи AJAX PHP. Перейдите в файл scripts.js и отредактируйте первый фрагмент кода, который вызывает функцию SubmitForm() после того, как данные формы отправлены.
Его нужно изменить следующим образом:

$("#contactForm").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // обработка ошибки формы... } else { // все в порядке! event.preventDefault(); submitForm(); } });

Этот новый фрагмент кода проверяет, нашел ли Bootstrap Validator проблемы и остановил ли работу кода. Если нет, мы продолжаем выполнение действий в стандартном режиме. Нам все еще нужно исключить действие по умолчанию (перезагрузку страницы без заполнения формы ) из сценария представления данных формы.

Теперь, если мы нажмем кнопку отправки данных формы, не заполнив все поля, пустые будут выделяться красным цветом:


В процессе добавления валидации мы заблокировали родную валидацию HTML5 . Можно добавить в валидацию дополнительный контекст, включив сообщения об ошибках. Bootstrap Validator имеет удобную функцию, позволяющую отобразить сообщения об ошибке по каждому из полей. Чтобы добавить их, нужно дополнить разметку HTML .

Внутри каждой form-group под полем ввода данных нужно разместить следующий HTML-код :

В качестве примера ниже приведен дополнительный div , добавляемый полям имени и адреса электронной почты:

Name Email

Теперь при повторной отправке данных AJAX JQuery формы будет выводиться сообщение об ошибке, если поля формы не были заполнены: “Please fill in this field. ”. Добавив data-атрибут для вводимых данных под названием “data-error ”, можно включить пользовательское сообщение об ошибке.

Например:


Добавление анимации обратной связи

Мы добавили функционал для индикации незаполненных полей формы. Но было бы неплохо добавить в форму дополнительную анимацию и несколько сообщений, которые дадут пользователю знать, что происходит. В настоящее время при успешной отправке данных формы появляется сообщение «Message Submitted! «, но как насчет ошибок?

Чтобы задействовать существующий код, мы изменим существующее сообщение об успешной отправке данных. Первым делом удалим текст «Message Submitted! » из HTML-разметки и оставим пустой div :

Теперь нужно создать новую функцию для обработки статуса сообщения. Добавьте эту функцию в нижнюю часть файла scripts.js :

function submitMSG(valid, msg){ var msgClasses; if(valid){ msgClasses = "h3 text-center tada animated text-success"; } else { msgClasses = "h3 text-center text-danger"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); }

Эта функция принимает два аргумента. valid будет логической переменной: если ее значение true , будет выводиться сообщение об успешной отправке данных. Если false , будет выводиться сообщение об ошибке. msg — это сообщение, которое мы будем выводить на экран в блоке div .

Данная функция проверяет, имеем ли мы дело с сообщением об успешной отправке данных или с сообщением об ошибке. Это делается через проверку значения переменной valid . В любом случае она устанавливает переменную с соответствующими классами CSS (нам необходимо повторно включить h3 и text-center , так как мы удалим их ).

Примечание: Для класса сообщения об успешной отправке данных мы используем некоторые классы animate.css . При успешной отправке данных AJAX JQuery contact form будет проигрываться анимация tada .

Наконец, функция удаляет все классы из #msgSubmit (чтобы избежать пересечения классов ), а затем устанавливает приоритетные классы и добавляет текст сообщения в div .

Внутри инициализации валидатора в начале этого раздела мы обновляем код, чтобы добавить вызов следующей функции внутри оператора if , когда он дает значение true :

submitMSG(false, "Did you fill in the form properly?");

Теперь, если вы не заполнили все поля, будет выводиться сообщение об ошибке “Did you fill in the form properly? »

Последний шаг для этой новой функции submitMSG — вызвать ее, когда данные формы отправлены успешно. Обновите функцию formSuccess() следующим образом:

$("#contactForm").reset(); submitMSG(true, "Message Submitted!")

Мы хотим сбросить форму и очистить значения, когда вызываем функцию submitMSG , как указано выше с сообщением об успешной отправке данных. Теперь при успешной отправке данных формы должно отображаться соответствующее сообщение с анимацией animate.css tada :


Встряхнемся

Давайте добавим ко всей форме анимацию ошибки, универсальная анимация “тряски ” должна подойти!

Создайте сразу после функции formSuccess() новую и назовите ее formError() :

function formError(){ $("#contactForm").removeClass().addClass("shake animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ $(this).removeClass(); }); }

Эта функция использует подход, описанный на демонстрационной странице animate.css , который позволяет добавить анимацию к элементу, а затем повторно вызывать ее снова.

Анимация CSS имеет неприятную особенность: отсутствие возможности повторного проигрывания, даже если удалить и повторно добавить класс. Эта функция помогает сбросить классы конца анимации, что позволяет повторно добавить их. Когда пользователь нажимает кнопку «Отправить », не заполнив все поля AJAX формы обратной связи, мы проигрываем анимацию shake . И если он снова не заполнит все поля, нужно снова проиграть эту анимацию.

Можно вызвать эту функцию formError() выше функции submitMSG() , которую мы создали для сообщения об ошибке. Например, так:

formError(); submitMSG(false, "Did you fill in the form properly?");

Теперь, когда пользователь попытается отправить данные формы, не заполнив все поля, она будет трястись, чтобы он понял, что что-то не так.

Больше валидации

Валидация на стороне клиента — это хорошо, но любой пользователь может отключить ее и отправить форму с пустыми полями, отредактировав код в браузере. Необходимо создать сервис валидации на стороне сервера.

Нам нужно открыть файл process.php и внести в него необходимые изменения, чтобы обеспечить проверку заполнения всех полей. Мы создадим переменную $errorMSG , с помощью которой будем перехватывать сообщения об ошибках, а затем включим дополнительную проверку $_POST :

Этот PHP-код проверяет, существуют ли пустые поля AJAX form , перед тем как установить их данные в качестве соответствующих переменных (заменяет существующие заданные в коде переменные из $_POST ). Если поля пусты, мы задаем общее сообщение для отправки обратно клиенту.

В ответ на исходный вызов AJAX нам нужно послать сообщение об ошибке, которое будет отображаться в браузере. Для этого отредактируйте оператор if , который мы создали ранее в нижней части кода PHP :

Через оператор if мы проверяем, является ли переменная $errorMSG пустой («») , а также статус встроенной функции Mail , которую мы использовали для переменной $success . В условии else мы включили дополнительную проверку, является ли ошибка результатом сбоя $success . Если да, то отправляем обратно сообщение “Something went wrong: “. Иначе выводим сообщение, которое было скомпилировано, когда мы производили проверку пустых полей.

И последний этап — нужно принять новое сообщение в AJAX и вывести его в форме. Нам нужно обновить объект AJAX в файле scripts.js следующим образом:

$.ajax({ type: "POST", url: "php/form-process.php", data: "name=" + name + "&email=" + email + "&message=" + message, success: function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } });

Мы только что обновили условия else , которое проверяет соответствие text == success . В else мы вызываем функцию formError() , которая применяет анимацию «тряски » и запрашиваем у функции submitMSG() текст, возвращенный из PHP .

Заключение

Зайдите на Github , чтобы посмотреть весь код целиком. Теперь форма обратной связи AJAX PHP предоставляет пользователю информацию о том, какие из полей он не заполнил. Мы выводим контекстные сообщения, основанные на статусе и возвращаемом от PHP сообщении. А также реализовали дополнительный уровень проверки на стороне сервера для тех пользователей, которые пытаются обойти front-end валидацию.

Я надеюсь, вам понравилась эта статья. Пожалуйста, оставляйте в комментариях свои вопросы и отзывы.

Функционал для загрузки файлов должен иметь индикатор выполнения. Но большинство разработчиков почему-то игнорируют этот элемент. Пользователи не должны…

В этой статье я покажу вам, как собирать и проверять данные HTML-форм с использованием двусторонних связей данных AngularJS. Мы узнаем, как реализовать простую…

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Работа с формами

Для передачи данных от пользователя Web-страницы на сервер используются HTML-формы. Для работы с формами в PHP предусмотрен ряд специальных средств.

Предварительно определенные переменные

В PHP существует ряд предварительно определенных переменных, которые не меняются при выполнении всех приложений в конкретной среде. Их также называют переменными окружения или переменными среды. Они отражают установки среды Web-сервера Apache, а также информацию о запросе данного браузера. Есть возможность получить значения URL, строки запроса и других элементов HTTP-запроса.

Все предварительно определенные переменные содержатся в ассоциативном массиве $GLOBALS . Кроме переменных окружения этот массив содержит также глобальные переменные, определенные в программе.

Пример 1 Просмотр массива $GLOBALS

В результате на экране появится список всех глобальных переменных, включая переменные окружения. Наиболее часто используемые из них:

Переменная Описание Cодержание
$_SERVER["HTTP_USER_AGENT"] Название и версия клиента Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
$_SERVER["REMOTE_ADDR"] IP-адрес 144.76.78.4
getenv("HTTP_X_FORWARDED_FOR") Внутренний IP-адрес клиента
$_SERVER["REQUEST_METHOD"] Метод запроса (GET или POST ) GET
$_SERVER["QUERY_STRING"] При запросе GET закодированные данные, передаваемые вместе с URL
$_SERVER["REQUEST_URL"] Полный адрес клиента, включая строку запроса
$_SERVER["HTTP_REFERER"] Адрес страницы, с которой был сделан запрос
$_SERVER["PHP_SELF"] Путь к выполняемой программе /index.php
$_SERVER["SERVER_NAME"] Домен сайт
$_SERVER["REQUEST_URI"] Путь /php/php_form.php
Обработка ввода пользователя

PHP-программу обработки ввода можно отделить от HTML-текста, содержащего формы ввода, а можно расположить на одной странице.

Пример 2 Пример обработки ввода

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "

Вернуться назад

" ;

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.

После чистки тегов добавляем отправку сообщения:

mail ("почта_для_получения_сообщений@gmail.com" , "Письмо с адрес_вашего_сайта" , "Вам написал: " . $name . "
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  • "почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту
  • "Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  • "Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  • Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

    • ВАЖНО!

    Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

    Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

    Проверка формы на адекватность вводимых данных

    Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

    Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

    Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

    < script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

    Ну а теперь обычный разбор:

    Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

    < form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

    Теперь по пунктам забираем состав проверки:


    Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.

    В основном, для передачи параметров используются методы POST и GET .
    Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку (URL ), т.е. в HTTP -заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP -запроса и никак не отражаются в адресной строке.

    1. Кнопки – Тег

    Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с параметром type="button | reset | submit" ). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML , в том числе изображения. Используя стили, можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
    Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом . Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом , если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать в контейнер обязательно. Закрывающий тег обязателен.
    Параметры:
    disabled – блокирует доступ и изменение элемента.
    type – тип кнопки
    value – Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

    Кнопка с текстом
    Параметр DISABLED
    Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.

    Активная кнопка Неактивная кнопка

    Параметр TYPE
    Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции. Значение по умолчанию: button .
    Аргументы:
    button – Обычная кнопка.
    reset – Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.

    Submit – Кнопка для отправки данных формы на сервер.

    Очистить форму Отправить форму

    Параметр VALUE Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение », где имя задается параметром name тега , а значение - параметром value . Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.

    Отправить форму

    1.1. Кнопка (input type=button) 1.2. Кнопка с изображением (input type=image) Кнопка с рисунком

    Кнопки с изображениями аналогичны по действию кнопке Submit , но представляют собой рисунок. Для этого задаем type=image и src="image.gif" .

    Когда пользователь щелкнет где-нибудь на изображении, соответствующая форма будет передана на сервер с двумя дополнительными переменными – sub_x и sub_y . Они содержат координаты нажатия пользователя на изображение. Опытные программисты могут заметить, что на самом деле имена переменных, отправленных браузером, содержат точку, а не подчеркивание, но PHP автоматически конвертирует точку в подчеркивание.

    1.3. Кнопка отправки формы (input type=submit)

    Служит для отправки формы сценарию. При создании кнопки для отправки формы необходимо указать 2 атрибута: type="submit" и value="Текст кнопки" . Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.


    РНР -сценарий не требуется.

    1.4. Массив кнопок (submit) для выбора варианта действий 2. Кнопка сброса формы (Reset)

    При нажатии на кнопку сброса (reset ), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.


    РНР -сценарий не требуется.

    3. Флажок (checkbox)

    Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).

    Белый
    Зеленый
    Синий
    Красный
    Черный

    Пример 2.
    // первый набор кнопок
    // второй набор кнопок
    // третий набор кнопок

    5. Текстовое поле (text)

    При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text . Если указан параметр value , то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

    6. Поле для ввода пароля (password)

    Полностью аналогичен текстовому полю, за исключением того, что символы, набираемые пользователем, не будут отображаться на экране.

    7. Скрытое текстовое поле (hidden)

    Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

    8. Выпадающий список (select)

    Тэг представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.
    Список начинается с парных тегов . Теги позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге указан параметр selected , то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1 , то список будет выпадающим. Если указан атрибут multiple , то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при size = 1 не имеет смысла.

    Белый Зеленый Синий Красный Черный

    Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.

    9. Многострочное поле ввода текста (textarea)

    Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. При необходимости можно указать атрибут readonly , который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами .
    Существует параметр wrap – задание переноса строк. Возможные значения:
    off – отключает перенос строк;
    virtuals – показывает переносы строк, но отправляет текст как он введен;
    physical – переносы строк оставляются в исходном виде.
    По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из 2 строк.


    Для того, чтобы в многострочном текстовом поле соблюдалось html-форматирование (перенос строк по средством тега
    или
    ), то используйте функцию nl2br() :

    Первоначально вставленный строка 1 Первоначально вставленный строка 2 Первоначально вставленный строка 3

    10. Кнопка для загрузки файлов (browse)

    Служит для реализации загрузки файлов на сервер. При создании текстового поля также необходимо указать тип поля type как "file" .

    Загрузить файл:

    Способы общения браузера с сервером

    Способов, предоставляемых протоколом HTTP , немного. Это важная информация. Никаких других способов нет. На практике используются два:
    GET – это когда данные передаются в адресной строке, например, когда пользователь жмет ссылку.
    POST – когда он нажимает кнопку в форме.

    Метод GET

    Чтобы передать данные методом GET не надо создавать на HTML -странице форму (использовать формы для запросов методом GET вам никто не запрещает) – достаточно ссылки на документ с добавлением строки запроса, которая может выглядеть как переменная=значение. Пары объединяются с помощью амперсанда &, а к URL страницы строка присоединяется с помощью вопросительного знака «? ».
    Но можно не использовать пары ключ=значение, если надо передать всего одну переменную – для этого надо после знака вопроса написать ЗНАЧЕНИЕ (не имя) переменной.
    Преимущество передачи параметров таким способом заключается в том, что клиенты, которые не могут использовать метод POST (например, поисковые машины), все же смогут, просто пройдя по ссылке, передать параметры скрипту и получить содержимое.
    Недостаток в том, что просто изменив параметры в адресной строке, пользователь может повернуть ход сценария непредсказуемым образом и это создает огромную дыру в безопасности, в сочетании с неопределенными переменными и register_globals on или кто-нибудь может узнать значение важной переменной (например ID -сеcсии), просто посмотрев на экран монитора.
    :
    - для доступа к общедоступным страницам с передачей параметров (повышение функциональности)
    - передача информации, не влияющей на уровень безопасности
    :
    - для доступа к защищенным страницам с передачей параметров
    - для передачи информации, влияющей на уровень безопасности
    - для передачи информации, не подлежащей модифицированию пользователем (некоторые передают текст SQL -запросов.

    Метод POST

    Передать данные методом POST можно только с помощью формы на HTML странице. Основное отличие POST от GET в том, что данные передаются не в заголовке запроса а в теле, следовательно, пользователь их не видит. Модифицировать можно только изменив саму форму.
    Преимущество :
    - большая безопасность и функциональность запросов с помощью форм методом POST .
    Недостаток :
    - меньшая доступность.
    Для чего следует использовать :
    - для передачи большого объема информации (текст, файлы..);
    - для передачи любой важной информации;
    - для ограничения доступа (например, использовать для навигации только форму – возможность, доступная не всем программам-роботам или грабберам-контента).
    Для чего не следует использовать :

    PHP способен принимать файл, загружаемый при помощи любого браузера,. Это дает возможность загружать как текстовые, так и бинарные файлы. Вместе с PHP -аутентификацией и функциями для работы с файловой системой, вы получаете полный контроль над тем, кому разрешено загружать файлы, и над тем, что делать с файлом после его загрузки.
    Страница для загрузки файлов может быть реализована при помощи специальной формы, которая выглядит примерно так:

    //Форма для загрузки файлов Отправить этот файл:

    В приведенном выше примере "URL " необходимо заменить ссылкой на PHP -скрипт. Скрытое поле MAX _FILE_SIZE (значение необходимо указывать в байтах) должно предшествовать полю для выбора файла, и его значение является максимально допустимым размером принимаемого файла. Также следует убедиться, что в атрибутах формы вы указали enctype="multipart/form-data" , в противном случае загрузка файлов на сервер выполняться не будет.
    Внимание
    Опция MAX _FILE_SIZE является рекомендацией браузеру, даже если бы PHP также проверял это условие. Обойти это ограничение на стороне браузера достаточно просто, следовательно, вы не должны полагаться на то, что все файлы большего размера будут блокированы при помощи этой возможности. Тем не менее, ограничение PHP касательно максимального размера обойти невозможно. Вы в любом случае должны добавлять переменную формы MAX _FILE_SIZE , так как она предотвращает тревожное ожидание пользователей при передаче огромных файлов, только для того, чтобы узнать, что файл слишком большой и передача фактически не состоялась.

    Как определить метод запроса?

    Напрямую:

    Getenv("REQUEST_METHOD");

    вернет GET или POST .

    Какой способ следует применять?

    Если форма служит для запроса некой информации, например – при поиске, то ее следует отправлять методом GET . Чтобы можно было обновлять страницу, можно было поставить закладку и/или послать ссылку другу.
    Если же в результате отправки формы данные записываются или изменяются на сервере, то следует их отправлять методом POST , причем обязательно, после обработки формы, надо перенаправить браузер методом GET . Так же, POST может понадобиться, если на сервер надо передать большой объём данных (у GET он сильно ограничен), а так же, если не следует "светить" передаваемые данные в адресной строке (при вводе логина и пароля, например).
    В любом случае, после обработки POST надо всегда перенаправить браузер на какую-нибудь страницу, пусть ту же самую, но уже без данных формы, чтобы при обновлении страницы они не записывались повторно.

    Как передать данные в другой файл непосредственно из тела PHP -программы методом GET и POST ?

    Пример, для демонстрации отправки данных методом POST и GET одновременно и получения ответа от сервера.

    Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – гостевая книга , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

    1) Создание простой формы

    Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .

    Замечание

    Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

    Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
    Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

    Обсуждение:

    Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

    I. Ввод данных вручную:


    2000
    2001
    2002
    ……………………………………………
    2050

    II. Ввод данных через цикл:



    Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST .

    Описание:

    Создадим HTML-форму для отправки файла на сервер.




    В данной html-форме присутствует элемент browse , который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл" , файл передается сценарию-обработчику.

    Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

    Замечание

    Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.

    Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

    Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:


    Синий
    Черный
    Белый




    Есть еще вопросы или что-то непонятно - добро пожаловать на наш




    

    2024 © gtavrl.ru.