Обработка формы

@СергейСереб · Регистрация: 19.09.2016

Студворк — интернет-сервис помощи студентам

По клику на элементе меню, средствами HTML открывается фиксированное окошко - форма входа в админку поверх всего контента:

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
 
include ($page.'.php'); 
 
?>
 
 
<div class="blur" id="click_on">
<form action="" method="post" class="visible">
 
<div class="field">
Login:
<input class="inp" type="text" name="login">
</div>  
 
<div class="field">
Password:
<input class="inp" type="password" name="pass">
</div> 
 
<div class="field">
Email:
<input class="inp" type="email" name="em">
</div> 
 
<div class="buttons">
<input class="but" type="submit" name="log_in" value="LOG IN">
<button class="but" type="button" onclick="location.href='#'">CANCEL</button>
 
</div>
<div class="messages">
 
  <?php
$error = array();
   if (isset($_POST['login'], $_POST['pass'], $_POST['em'], $_POST['log_in'])) {
    if ($_POST['login'] =='' || $_POST['pass'] == '' || $_POST['em'] == '') {
        echo 'You have filled not all the fields'.'<br>';
      }  
    
    //тут будут проверки содержимого полей
    
    }
  else echo 'Fill all the fields and click LOG IN'.'<br>';
?>
</div>
</form>
</div>

Это посредством чего открываю окошко-форму:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#click_on:target{
    display: block;
  }
.blur {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,.8);  
    display: none;
  
  }
  
 
.visible {
    text-transform: uppercase;
    color: #3a3d40;
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: bold;  
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: right;
    width: 400px;
    height: 130px;
    margin: auto;  
    padding: 45px 10px 0px 10px;
    background-color: #fff;
    box-shadow:0px 0px 50px -25px rgba(0,0,0,0.75);
}

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

В какую сторону копать?

@Vshining · 16.12.2016, 15:14

Для начала, нужно заменить name всех input-ов по следующему принципу:

PHP
1
2
3
login => login_form[login]
pass => login_form[pass]
...

Таким образом, когда мы отправим эту форму, в скрипте все отправленные данные будут доступны в массиве $_POST['login_form']. Во вторых, нужно поставить action этой формы - название этого php-файла.
Теперь, в самом файле, мы проверяем - был ли отправлен post-запрос с нашей формы и если всё прошло хорошо - возвращаем админку, если нет - ставим флаг:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$error = true;
if($logging = isset($_POST['login_form'])) {//если установлена эта переменная, 
                                           //значит была отправлена форма
    //...здесь мы проверяем корректность введённых данных и возможность аутентификации
    //если аутентификация произошла, то пишем $error = false;
}
 
if(!$error && $logging) {
    require 'admin.php';
} else {
    $error &= $logging;
    //здесь - весь код, который был до этого, относящийся к отрисовке формы
    //с единственным отличием - проверяем $error, и если true - высвечиваем ошибку
}

@СергейСереб · 16.12.2016, 18:55 **[ТС]**

PHP
1
if($logging = isset($_POST['login_form']))

Так isset же будет true, если хоть один элемент будет в массиве?

Сообщение от Vshining

нужно поставить action этой формы - название этого php-файла.

Этого - это какого?

Сообщение от Vshining

если нет - ставим флаг:

Не совсем понял, для чего именно использовать $logging

@fanatikus · 16.12.2016, 22:35

Сообщение от Vshining

Для начала, нужно заменить name всех input-ов по следующему принципу:

а чем, name and pass не устраивает?

Сообщение от СергейСереб

Так isset же будет true, если хоть один элемент будет в массиве?

естественно. этим условием, просто проверяем отправку формы.

Сообщение от СергейСереб

Этого - это какого?

обработчика данных формы

@СергейСереб · 17.12.2016, 12:48 **[ТС]**

Сообщение от Vshining

//здесь - весь код, который был до этого, относящийся к отрисовке формы

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

@Vshining · 17.12.2016, 14:06

Код, относящийся к отрисовке формы - и есть разметка формы. Всё в одном файле, просто весь код этого файла помещается в else. В if-подключение админки, если аутентификация прошла успешно.

@СергейСереб · 17.12.2016, 19:31 **[ТС]**

Может Я все неправильно объясняю?? Я все равно так и не понял, где предлагается разметка формы... В разных сообщениях по разному написано

Сообщение от Vshining

весь код, который был до этого, относящийся к отрисовке формы

Что значит был до этого??

Сообщение от Vshining

весь код этого файла помещается в else

Весь код этого файла. Какого???? Обработчик формы? Код обработки формы - в else? Или какого файла? Вы же написали: все в одном файле...

Сообщение от Vshining

Во вторых, нужно поставить action этой формы - название этого php-файла.

Если

Сообщение от Vshining

Всё в одном файле

action="index.php"?? Так в этом случае по нажатию кнопки LOG IN будет открываться моя главная страничка, независимо от того, что было и было ли вообще введено в полях?? Это же просто указание. куда будут передаваться данные формы. чем это тогда отличается от action="" ?

Логику Вашего примера(именно php часть) за исключением последних двух комментариев в коде я понял. Как Ваш вариант связать с моей разметкой - не понимаю.. Или это абстрактный пример без связи с моим примером?

У меня по-моему больше вопросов появилось. чем было ДО этого...

что у меня сейчас:

У меня главный файл - index.php в нем постоянно подключены заголовок с меню и футер. Между ними из отдельных .рhp файлов подключается контент.
Изначально, форма окна входа у меня расписана в главном файле index.php , так как описано в первом посте. Выше этого кода - разметка заголовка, ниже - разметка футера.

@Vshining · 17.12.2016, 19:46

Сообщение от СергейСереб

Что значит был до этого??

Код, который вы приложили.

Сообщение от СергейСереб

Весь код этого файла. Какого????

Код которого вы приложили (форма).

Сообщение от СергейСереб

action="index.php"??

Да

Сообщение от СергейСереб

Так в этом случае по нажатию кнопки LOG IN будет открываться моя главная страничка, независимо от того, что было и было ли вообще введено в полях??

Нет. Как можете видеть, в if в случае, если аутентификация успешна, подключается админка. Можете это на редирект поменять, по своему вкусу. В общем, в этом блоке действия, если данные введены верно. Проверка, что было введено в полях происходит на этапе isset($_POST['login_form']). Проверка, пуста ли форма решается с помощью html (атрибут required) + проверка на скрипте, пусты ли значения в $_POST.

@СергейСереб · 18.12.2016, 01:55 **[ТС]**

Vshining,

Сообщение от Vshining

Код, который вы приложили.

В том коде, что я приложил, есть и php кода кусочек и HTMLкод...

Именно порверка полей на данные - не проблема. Проблема основная с отображением формы.

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

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

Активную вкладку я привязал к параметрам адресной строки, поэтому сейчас при попытке залогиниться и успешной авторизации активной получается вкладка, с которой нажали кнопку открытия входа.(при использовании include/require в таком случае в адресную строку параметр не передается.)

@fanatikus · 18.12.2016, 12:38

Сообщение от СергейСереб

при нажатии кнопки LOGIN на этом же окошке не закрываясь отображались ошибки, если есть.

чисто на php это не получится, так как php отрабатывает на сервере.
смотрите в сторону ajax

Сообщение от СергейСереб

чтобы окно входа закрывалось только при успешной авторизации.

аналогично

@cia · 19.12.2016, 03:46

Сообщение от fanatikus

чисто на php это не получится, так как php отрабатывает на сервере.

iframe. А закрывать окошко при помощи js через parent.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Vshining 65 / 65 / 47 Регистрация: 04.12.2016 Сообщений: 214
	17.12.2016, 14:06
	Код, относящийся к отрисовке формы - и есть разметка формы. Всё в одном файле, просто весь код этого файла помещается в `else`. В `if`-подключение админки, если аутентификация прошла успешно. 0