Это старая версия документа!
Содержание
Простая адаптивная форма регистрации и авторизации
Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос @media screen and (max-width: 480px) Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет).
- Форма авторизации (Login Form)
- Форма регистрации (Registration Form)
- Форма подтверждения электронной почты (Email Confirmation Form)
- Форма сброса пароля (Password Reset Form)
- Форма 2х уровневой авторизации (2-Level Authorization Form)
- Выход из системы (logout)
Sample (шаблон)
В блокноте создадим простой шаблон php и сохраним его в корне на сервере как sample.php
Ниже приведен стандартный код для разметки HTML5
- sample.php
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Название Вашей Страницы</title> <!-- Подключение CSS --> <link rel="stylesheet" href="/css/style.css"> </head> <body> <header> <p>Название приложения</p> </header> <main> <article> <section> <h3>Раздел Контента</h3> <p>Еще один раздел.</p> </section> </article> </main> <footer> <p>© 2025 разработчик</p> </footer> </body> </html>
В этой же директории каталог css для файлов стиля и фонового изображения, а так-же директорию pages для страниц
Запустим наш локальный сервер и откроем нашу страницу http://localhost/sample.php
блоки header и footer
Блоки <header></header> и <footer></footer> мы скроем просто удалив из них контент
<p>Название приложения</p> <p>© 2025 разработчик</p>
т.к. это будет действитель простая форма, а они будут необходимы только если форме регистрации и авторизации будет неоходим общий стиль со страницей сайта.
header.php
В директории pages создадим пустой файл header.php и откроем его в блокноте. Удилим из нашего файла шаблона sample.php код от начала %<!DOCTYPE html> и до окончания блока </header> и вставим этот код в файл header.php.
Так как файл header.php будет распологаться в директории pages, то в строке подключения файла внешнего стиля style.css добавим две точки .. изменив тем самым путь к файлу.
footer.php
В директории pages создадим пустой файл footer.php и откроем его в блокноте. Удилим из нашего файла шаблона sample.php код от начала %<footer> и до окончания блока </html> и вставим этот код в файл footer.php.
Соединим оставшуюся часть кода нашего шаблона sample.php с помощью инструкция include для подключения внешних файлов с header.php и footer.php
<?php include "pages/header.php"; ?> и <?php include "pages/footer.php"; ?>
Обновим ну страницу http://localhost/sample.php в браузере
container
Класс HTML container это главное окно нашей формы в блоке <section>
- HTML
<div class="container"> </div>
Вставим его вместо нашей заглушки (заголовка и параграфа)
style.css
В директории css создадим пустой файл style.css и откроем его в блокноте, задав стили для нашего контейнера.