| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:adaptive_registration_form_sample [2026/01/26 22:46] – [header.php] VladPolskiy | software:development:demo:adaptive_registration_form_sample [2026/02/01 19:39] (текущий) – [Дополнения и Файлы] VladPolskiy |
|---|
| Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос ''@media screen and (max-width: 480px)'' Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет). | Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос ''@media screen and (max-width: 480px)'' Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет). |
| \\ | \\ |
| {{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png? |}} | * <fc #22b14c>Windows 10 Pro</fc> |
| | * [[https://www.apachefriends.org/download.html|XAMPP]] <fc #22b14c>- полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]]. |
| | * <fc #22b14c>Google Chrome — браузер, разрабатываемый на основе свободного браузера Chromium и движка Blink.</fc> |
| | * [[https://notepad-plus-plus.org/|Notepad++]] <fc #22b14c>- бесплатный текстовой редактор исходного кода. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]]. |
| | |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png?|}} |
| \\ | \\ |
| | * Главная страница (auth) |
| * Форма авторизации (Login Form) | * Форма авторизации (Login Form) |
| * Форма регистрации (Registration Form) | * Форма регистрации (Registration Form) |
| \\ | \\ |
| ===== style.css ===== | ===== style.css ===== |
| В директории css создадим пустой файл style.css и откроем его в блокноте, задав стили для нашего контейнера. | В директории css создадим пустой файл style.css и откроем его в блокноте, задав стили для нашего контейнера. Свойства стиля указаны в комментариях кода: |
| | <code css style.css> |
| | /*Стиль контейнера*/ |
| | .container { |
| | background: white; /*цвет контейнера*/ |
| | padding: 20px; /* Отступы по 20px со всех сторон */ |
| | border-radius: 5px; /*толщина рамки*/ |
| | border: 2px solid #6665ee; /*цвет и углы рамки*/ |
| | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*добавляет тень к элементу*/ |
| | width: 300px; /*ширина контейнера*/ |
| | } |
| | </code> |
| | Обновим страницу браузера и увидим наш контейнет. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_11.png? |}} |
| | \\ |
| | перейдем к фону страницы и стилю элемента ''body''. В данном примере мы используем изображение для фона нашей формы. Его размер может быть любым (в нашем случае это 1918х1224px). |
| | \\ |
| | {{:software:development:demo:fone_forms.jpg?|}} |
| | \\ |
| | Сохраним это изображение в директории ''css'' нашего проекта и перейдем к стилю элемента ''body'', прописав нижеприведенный код в начале файла ''style.css'' |
| | <code css style.css> |
| | /*Стиль контейнера*/ |
| | body { |
| | font-family: Arial, sans-serif; |
| | /*Управление поведением фоновых изображений*/ |
| | background-image: url("fone_forms.jpg"); |
| | background-size: cover; /* Растягивает и обрезает */ |
| | background-position: center; /* Центрирует */ |
| | background-repeat: no-repeat; /* Мы не повторяемся */ |
| | display: flex; /* Коробка становится гибкой */ |
| | align-items: center; /* Вертикальное выравнивание */ |
| | justify-content: center; /* Горизонтальное выравнивание */ |
| | max-width: 100%;/* Растянуть по ширине контейнера */ |
| | height: 100vh; /* Высота всего экрана */ |
| | object-fit: cover; /* Обрезка с заполнением */ |
| | object-position: center; /* Центрирование */ |
| | } |
| | </code> |
| | и снова обновил страницу браузера |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_12.png?|}} |
| | \\ |
| | Чтобы все у нас было в едином внешнем виде, добавим правила для стилей ссылок, параграфов и заголовков |
| | <code css style.css> |
| | /*Стиль ссылок*/ |
| | a { |
| | text-decoration: none;/*Ссылки без подчеркивания*/ |
| | color: #6665ee; /* цвет текста для всей страницы */ |
| | } |
| |
| | /*Стиль заголовка*/ |
| | H2 { |
| | color: #6665ee; /* цвет текста заголовка */ |
| | } |
| | |
| | /*Стиль параграфа*/ |
| | p { |
| | font-family: Arial, sans-serif; /* цвет текста заголовка */ |
| | font-size: small; /*задает размер шрифта*/ |
| | } |
| | </code> |
| | \\ |
| | ==== Заголовки, ссылки, параграфы и формы ==== |
| | Вставим в наш ''container'' код формы с элементами заголовка, ввода, параграфа и кнопки |
| | <code html html> |
| | <form method="post" action="#"> |
| | <h2>Форма входа</h2> |
| | <input type="email" id="email" required placeholder="Введите свой адрес электронной почты"> |
| | <input type="password" id="password" required placeholder="Введите свой пароль"> |
| | <p>Забыли пароль? <a href="index.php?page=reset">Восстановить?</a></p> |
| | <button type="submit">Авторизоваться</button> |
| | <p>Нет аккаунта? <a href="index.php?page=register">Зарегистрируйтесь.</a></p> |
| | </form> |
| | </code> |
| | * %%method="post"%% - отправка данных формы на сервер. |
| | * %%action="#"%% - значение параметра означает, что данные формы отправляются на ту же страницу |
| | Приведенный выше код - это просто заглушка, которая показывает нам пример приведения стиля заголовка, параграфа и ссылки (отсутствие подчеркивания). Позже мы поменяем адреса этой заглушки |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_13.png? |}} |
| | \\ |
| | ==== Формы и кнопки ==== |
| | Создадим правила для стилей кнопки и форм ввода. для этого пропишем в файле стилей ''style.css'' следующий код |
| | <code css style.css> |
| | /*Стиль поля ввода*/ |
| | input { |
| | width: 93%; |
| | padding: 10px; |
| | margin: 5px 0 0 0; /*Отступ только сверху*/ |
| | border: 1px solid #6665ee; |
| | border-radius: 5px; |
| | } |
| | |
| | /*Стиль кнопки*/ |
| | button { |
| | width: 100%; |
| | padding: 10px; |
| | background-color: #6665ee; |
| | color: white; |
| | border: none; |
| | border-radius: 5px; |
| | cursor: pointer; |
| | } |
| | |
| | button:hover { |
| | background-color: #5757d1;/*Изменение цвета кнопки при наведении курсора*/ |
| | } |
| | </code> |
| | Снова обновим страницу браузера |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_14.png?|}} |
| | \\ |
| | И последнее, что мы пропишем в файле ''style.css'', это медиа-запрос, используемый для адаптивного веб-дизайна. |
| | <code css style.css> |
| | @media screen and (max-width: 480px) { |
| | /* Стили для планшетов и телефонов */ |
| | .container { width: 90%; padding: 5px; } |
| | } |
| | </code> |
| | Так как форма у нас имеет ширину всего 300px, то нет смысла писать медиа запрос для планшетов, остановимся только на размере экрана телефона. |
| | \\ |
| | {{:software:development:demo:photo_2026-01-27_00-16-519.jpg? |}} |
| | \\ |
| | ===== Динамическое подключение страниц ===== |
| | Итак, пришло время создание динамически подключаемых страниц. |
| | * auth.php - Главная страница (auth) |
| | * login.php - Форма авторизации (Login Form) |
| | * register.php - Форма регистрации (Registration Form) |
| | * confirm.php - Форма подтверждения электронной почты (Email Confirmation Form) |
| | * reset.php - Форма сброса пароля (Password Reset Form) |
| | * 2fa.php - Форма 2х уровневой авторизации (2-Level Authorization Form) |
| | * logout.php - Выход из системы (logout) |
| | ==== login.php ==== |
| | Переименуем, находящийся в корне директории наш шаблон ''sample.php'' в ''auth.php'', а так же создадим файл ''login.php'' в директории ''pages''.\\ |
| | Из файла ''auth.php'' удалим весь код из %%<div class="container">%% и запишем это в файл ''login.php'', при этом изменив адреса ссылок на ''auth.php'' |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_16.png?|}} |
| | \\ |
| | Мы вынесли форму авторизации во внешний файл, подключим его. Для этого в файле ''auth.php'' пропишем код |
| | <code php auth.php> |
| | // Определяем список разрешенных страниц |
| | $allowed_pages = array('login', 'register', 'confirm', 'reset', '2fa'); |
| | $page = $_GET['page'] ?? 'login'; // По умолчанию 'login' |
| | </code> |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_17.png?|}} |
| | \\ |
| | В наш блок контейнера вставляем следующий код |
| | <code php auth.php> |
| | <?php |
| | // Получаем значение из URL: auth.php?page=login |
| | // Проверьте, находится ли запрошенная страница в списке разрешенных. |
| | if (in_array($page, $allowed_pages)) { |
| | // Безопасно подключить внешний файл |
| | include('pages/' . $page . '.php'); |
| | } else { |
| | // Обработать некорректный запрос страницы (страница не найдена). |
| | echo 'Page not found.'; |
| | } |
| | ?> |
| | </code> |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_18.png?|}} |
| | \\ |
| | ==== reset.php ==== |
| | Cоздадим файл ''reset.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php reset.php> |
| | <form method="post" action="#"> |
| | <h2>Форма сброса пароля</h2> |
| | <input type="email" id="email" required placeholder="Введите свой адрес электронной почты"> |
| | <p>Отменить? <a href="auth.php?page=login">Войдите здесь.</a></p> |
| | <button type="submit">Сбросить пароль</button> |
| | </form> |
| | </code> |
| | Обновим страница браузера и нажмем на ссылку "Восстановить?" |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_19.png?|}} |
| | \\ |
| | Ссылка "Отменить? Войдите здесь." вернет на форму "login" |
| | |
| | ==== register.php ==== |
| | Cоздадим файл формы регистрации ''register.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php register.php> |
| | <form method="post" action="#"> |
| | <h2>Форма регистрации</h2> |
| | <input type="text" id="user_login" name="user_login" required placeholder="Введите ваше полное имя"> |
| | <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты"> |
| | <input type="password" id="user_pass" name="user_pass" required placeholder="Придумайте сложный пароль"> |
| | <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Повторите введенный пароль"> |
| | <p title="Пароль должен содержать не менее 8 символов и содержать не менее: одной строчной буквы, одной заглавной буквы, одной цифры и одного символа.">*Примечание</p> |
| | <button type="submit">Зарегистрироваться</button> |
| | <p>Есть аккаунт? <a href="auth.php?page=login" >Войдите здесь.</a></p> |
| | </form> |
| | </code> |
| | Обновим страница браузера и нажмем на ссылку "Зарегистрируйтесь." |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_20.png?|}} |
| | \\ |
| | Ссылка "Есть аккаунт? Войдите здесь." вернет на форму "login" |
| | |
| | ==== confirm.php ==== |
| | Cоздадим файл формы верификации ''confirm.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php confirm.php> |
| | <form method="post" action="#"> |
| | <h2>Форма верификации</h2> |
| | <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты"> |
| | <input type="password" id="user_activation_email_key" name="user_activation_email_key" required placeholder="Введите код, отправленный на ваш email"> |
| | <p>*Необходимо подтвердить ваш email.</p> |
| | <button type="submit">Отправить полученный код</button> |
| | </form> |
| | </code> |
| | На эту форму не кнопки (ссылки) перехода, она откроется после формы регистрации. Так же эта форма будет открываться, если пользователь выбирет 2х факторную защиту аккаунта по электронной почте. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_21.png?|}} |
| | \\ |
| | ==== 2fa.php ==== |
| | Cоздадим файл формы 2х факторной аутентификации через мобильное приложение ''2fa.php'' в директории ''pages'' и запишем в него следующий код |
| | <code php index.php> |
| | <form method="post" action="#"> |
| | <h2>Форма аутентификация 2FA</h2> |
| | <input type="number" id="user_activation_2fa" name="user_activation_2fa" pattern="\d{6}" required placeholder="Введите OTP код"> |
| | <p>*OTP код из мобильного приложения </p> |
| | <button type="submit">Подтвердить одноразовый код</button> |
| | </form> |
| | </code> |
| | На эту форму нет кнопки (ссылки) перехода, она откроется после формы аутентификации, если пользователь выбирет 2х факторную защиту аккаунта в мобильном приложении. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_22.png?|}} |
| | \\ |
| | ==== OTP.php ==== |
| | Cоздадим файл формы получения кода 2х факторной аутентификации через мобильное приложение ''OTP.php'' в директории ''pages'' и запишем в него следующий код-заглушку |
| | <code php OTP.php> |
| | <form method="post" action="#"> |
| | <h2>Форма 2FA</h2> |
| | <p>*Отсканируйте в приложении QR code: </p> |
| | <!-- echo $tfa->getQRCodeImageAsDataUri('Demo', $secret);--> |
| | <img src="css/qr_code.png" /> |
| | <p>*Введите код вручную: </p> |
| | <h5>I4BQ P7MB TBG6 LW5I ID5O JY2E SQSV EWX4</h5> |
| | <p>*Подтвердите код на мобильном устройстве </p> |
| | </form> |
| | </code> |
| | Эта форма единожды будет доступна при включении пользователем двухфакторной авторизации после регистрации. |
| | \\ |
| | {{:software:development:demo:adaptiv_form-activ_sample_php_css_24.png?|}} |
| | \\ |
| | ==== logout.php ==== |
| | Последний файл ''logout.php'' не доступен для просмотра и будет служить для кода выхода из системы. |
| | ===== Дополнения и Файлы ===== |
| | * См.так же |
| | * [[software:development:demo:adaptive_registration_form_block|Блочная адаптивная форма регистрации и авторизации]] |
| | * [[software:development:demo:adaptive_registration_form_complex_block|Блочная полная адаптивная форма регистрации и авторизации]] |
| | * {{ :software:development:demo:htdocs.zip |Скачать архив с примерами}} |
