Шаблоны простых элементов веб-страниц

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Шаблоны простых элементов веб-страниц

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

Настоящая глава представляет собой справочник по наиболее часто используемым шаблонам HTML-элементов, дополненных базовой стилизацией через CSS и минимальной серверной логикой на PHP. Все примеры написаны с учётом современных стандартов веб-разработки, семантической корректности и доступности (accessibility). Каждый шаблон автономен, легко копируется и адаптируется под конкретные задачи.

Форма входа — один из самых распространённых элементов веб-интерфейсов. Она позволяет пользователю аутентифицироваться в системе с использованием логина (или email) и пароля.

Структура HTML

Код ITЗагрузка примера кода…

Разбор:

<form ... method="POST" action="login.php"> отправляет учетные данные на серверный обработчик login.php.
novalidate отключает встроенные сообщения браузера, чтобы проект мог использовать собственную стратегию валидации.
type="email" и type="password" задают корректные типы полей и улучшают UX на мобильных устройствах.
required в полях помогает отсеять пустые отправки еще до сервера, но не заменяет серверную проверку.
autocomplete="email" и autocomplete="current-password" подсказывают менеджерам паролей правильное поведение.
Чекбокс remember передает отдельный флаг, на основе которого на сервере можно ставить долгоживущую cookie.

Базовый CSS

Код ITЗагрузка примера кода…

Разбор:

Селектор #loginForm задает карточечный контейнер формы — ограниченная ширина, отступы, фон и скругления.
.form-group структурирует поля с равномерными вертикальными интервалами, упрощая чтение формы.
box-sizing: border-box в инпутах предотвращает "выпирание" ширины за контейнер.
button[type="submit"] получает акцентный стиль и hover-состояние для визуальной обратной связи.
.form-check переводит чекбокс и подпись в удобную горизонтальную линию.
Блок .form-footer оформляет вторичные ссылки ("забыли пароль", "регистрация") как вспомогательную навигацию.

Пример обработки на PHP (login.php)

Код ITЗагрузка примера кода…

Разбор:

session_start() инициализирует сессию и позволяет хранить состояние авторизации между запросами.
Проверка $_SERVER['REQUEST_METHOD'] === 'POST' ограничивает обработку только отправкой формы.
filter_var(..., FILTER_SANITIZE_EMAIL) очищает email, а FILTER_VALIDATE_EMAIL валидирует формат адреса.
$_POST['password'] ?? '' и isset($_POST['remember']) безопасно читают входные поля с дефолтами.
При успешной проверке учетных данных email кладется в $_SESSION, а опция "запомнить" создает cookie через setcookie(...).
header('Location: dashboard.php'); exit; делает редирект и обязательно завершает скрипт после отправки заголовка.

📌 Внимание
В реальных проектах пароли никогда не хранятся в открытом виде. Используйте password_hash() и password_verify() для безопасной работы с паролями.

Таблица с данными

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

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

Пагинация

Пагинация позволяет разбивать длинные списки на страницы.

HTML

<nav aria-label="Навигация по страницам">
  <ul class="pagination">
    <li><a href="?page=1" aria-label="Первая страница">&laquo;</a></li>
    <li><a href="?page=2" aria-label="Предыдущая страница">&lsaquo;</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li class="active"><span>3</span></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>
    <li><a href="?page=4" aria-label="Следующая страница">&rsaquo;</a></li>
    <li><a href="?page=10" aria-label="Последняя страница">&raquo;</a></li>
  </ul>
</nav>

CSS

Код ITЗагрузка примера кода…

PHP-логика

<?php
$page = $_GET['page'] ?? 1;
$perPage = 10;
$totalItems = 123; // Например, из COUNT(*) в SQL
$totalPages = ceil($totalItems / $perPage);
$page = max(1, min($page, $totalPages));

$offset = ($page - 1) * $perPage;

// Запрос к БД с LIMIT и OFFSET
// SELECT * FROM users LIMIT $perPage OFFSET $offset
?>

Разбор:

$page = $_GET['page'] ?? 1 задает страницу по умолчанию, если параметр не передан.
$totalPages = ceil($totalItems / $perPage) вычисляет общее число страниц на основе количества записей.
max(1, min($page, $totalPages)) ограничивает страницу допустимым диапазоном и защищает от выхода за границы.
$offset = ($page - 1) * $perPage рассчитывает смещение для SQL-пагинации.
Комментарий с LIMIT/OFFSET показывает, как серверная логика связывается с запросом к БД.
Такой шаблон — база для списка пользователей, заказов, товаров и любых табличных выдач.

Кнопки разных типов

Кнопки — ключевой элемент управления.

HTML

<div class="button-group">
  <button class="btn-primary">Основная</button>
  <button class="btn-secondary">Второстепенная</button>
  <button class="btn-success">Успех</button>
  <button class="btn-danger">Опасность</button>
  <button class="btn-warning">Предупреждение</button>
  <button class="btn-info">Информация</button>
  <button class="btn-link">Ссылка</button>
</div>

CSS

Код ITЗагрузка примера кода…

Вкладки (Tabs)

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

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

JavaScript (опционально, для интерактивности)

Код ITЗагрузка примера кода…

Разбор:

Скрипт навешивает обработчик клика на каждую кнопку вкладки через querySelectorAll(...).forEach(...).
Перед активацией новой вкладки он снимает класс active у всех кнопок и прячет все панели классом hidden.
Затем текущей кнопке возвращается active, а связанная панель определяется через aria-controls.
document.getElementById(panelId).classList.remove('hidden') показывает нужный блок контента.
Дополнительно обновляется aria-selected, чтобы состояние вкладок было корректным для ассистивных технологий.
Подход дает переключение разделов без перезагрузки страницы и поддерживает базовую доступность.

📌 Внимание
Для доступности важно использовать ARIA-атрибуты (role, aria-selected, aria-controls, aria-labelledby). Это позволяет пользователям скринридеров корректно взаимодействовать с вкладками.

Простой калькулятор

Калькулятор — полезный элемент для демонстрации обработки пользовательского ввода и вычислений на стороне клиента или сервера.

HTML + PHP (серверная версия)

Код ITЗагрузка примера кода…

Разбор:

Форма отправляет два числа и операцию на сервер, где вычисление выполняется в PHP-блоке.
value="<?= htmlspecialchars($_POST['a'] ?? '') ?>" сохраняет введенные значения после submit и экранирует вывод.
Валидация проверяет числовой формат через is_numeric(...) и отдельно обрабатывает деление на ноль.
switch ($op) маршрутизирует арифметическую операцию по символу +, -, *, /.
Ошибка и результат выводятся в разных ветках if ($error), обе с htmlspecialchars(...) для безопасного рендера.
number_format($result, 6, '.', '') нормализует формат результата (фиксированная точность и десятичная точка).

CSS для калькулятора

Код ITЗагрузка примера кода…

💡 Совет
Серверная реализация гарантирует работу даже при отключённом JavaScript. Для более сложных калькуляторов (например, с историей или научными функциями) лучше использовать клиентский JavaScript.

Поля ввода разных типов

Современный HTML предоставляет множество типов <input>, улучшающих UX и валидацию.

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

⚠️ Предупреждение
Типы email, url, number и другие обеспечивают базовую валидацию на клиенте, но никогда не заменяют серверную проверку. Злоумышленник может легко обойти клиентские ограничения.

Форма обратной связи

Форма обратной связи — стандартный элемент веб-сайта, позволяющий пользователю отправить сообщение владельцу ресурса. Она часто используется для запросов поддержки, предложений или жалоб.

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

PHP (send_feedback.php)

Код ITЗагрузка примера кода…

Разбор:

Обработчик формы обратной связи запускается только на POST, что отделяет просмотр страницы от отправки данных.
trim(...) убирает лишние пробелы у имени и сообщения, повышая качество входных данных.
Email сначала санитизируется, затем валидируется, чтобы снизить шум и отсеять некорректные адреса.
in_array($subject, [...]) ограничивает тему белым списком допустимых значений.
При нарушении правил выполнение прерывается через die(...), а при успехе возвращается подтверждение отправки.
Комментарии показывают, где подключать реальную интеграцию: почтовый сервис или сохранение в БД.

📌 Внимание
На продакшене используйте библиотеки вроде PHPMailer или SwiftMailer для надёжной отправки почты и защиты от спама. Обязательно добавьте защиту от CSRF и rate limiting.

Поиск по сайту

Простая форма поиска позволяет пользователю искать контент на сайте.

HTML

<form class="search-form" method="GET" action="search.php">
  <div class="search-container">
    <input type="text" name="q" placeholder="Поиск по сайту…" required>
    <button type="submit">🔍</button>
  </div>
</form>

CSS

Код ITЗагрузка примера кода…

PHP (search.php)

Код ITЗагрузка примера кода…

Разбор:

Поисковый запрос берется из $_GET, очищается trim и проверяется на пустоту.
Массив $pages в примере имитирует источник данных; в реальном проекте его заменяет БД/поисковый движок.
array_filter(...) отбирает элементы по условию в замыкании fn($page) => ....
stripos(...) !== false выполняет поиск без учета регистра в title и content.
Вывод результатов обрамлен htmlspecialchars(...), чтобы пользовательский ввод и текст из источника были безопасны.
Блок if (count($results)) ... else ... разделяет сценарии "найдено" и "ничего не найдено".

💡 Совет
Для полноценного поиска используйте Elasticsearch, Sphinx или хотя бы FULLTEXT индексы в MySQL.

Карточка товара / элемент списка

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

HTML

<article class="product-card">
  <img src="product.jpg" alt="Название товара" loading="lazy">
  <div class="product-info">
    <h3>Название товара</h3>
    <p class="price">1 990 ₽</p>
    <p class="description">Краткое описание товара, его особенности и преимущества.</p>
    <button class="btn btn-primary">В корзину</button>
  </div>
</article>

CSS

Код ITЗагрузка примера кода…

Страница профиля пользователя

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

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

📌 Внимание
На продакшене аватары следует загружать через защищённые маршруты с проверкой MIME-типов и ограничением размера файла.

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

HTML

Код ITЗагрузка примера кода…

CSS

Код ITЗагрузка примера кода…

JavaScript

Код ITЗагрузка примера кода…

💡 Совет
Для доступности важно управлять фокусом: при открытии модального окна фокус должен перемещаться внутрь него, а при закрытии — возвращаться к вызвавшему элементу.

Форма регистрации

Форма регистрации позволяет новому пользователю создать аккаунт.

HTML

Код ITЗагрузка примера кода…

CSS (частично совпадает с формой входа)

Код ITЗагрузка примера кода…

PHP (register.php)

Код ITЗагрузка примера кода…

Разбор:

Этот обработчик регистрации получает и валидирует имя, email, пароль и подтверждение пароля.
Проверка $password !== $confirm исключает несогласованные данные до обращения к БД.
strlen($password) < 8 и preg_match(...) реализуют базовые требования сложности пароля.
password_hash($password, PASSWORD_DEFAULT) создает безопасный хеш вместо хранения открытого пароля.
Комментарии обозначают инфраструктурные шаги: проверка уникальности email и вставка пользователя в БД.
При успехе возвращается сообщение и ссылка на вход в систему.

⚠️ Предупреждение
Никогда не храните пароли в открытом виде. Используйте password_hash() и password_verify().

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

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

HTML + JavaScript

Код ITЗагрузка примера кода…

CSS (дополнение)

.error {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  min-height: 1.2rem;
}

JavaScript

Код ITЗагрузка примера кода…

💡 Совет
Клиентская валидация — это удобство, а не защита. Всегда дублируйте проверки на сервере.

Простой список задач (To-Do List)

Элементарный интерфейс для управления персональными задачами.

HTML

<div class="todo-app">
  <h2>Список задач</h2>
  <form id="addTaskForm">
    <input type="text" id="newTask" placeholder="Новая задача…" required>
    <button type="submit">+</button>
  </form>
  <ul id="taskList">
    <!-- Задачи будут добавляться сюда -->
  </ul>
</div>

CSS

Код ITЗагрузка примера кода…

JavaScript

Код ITЗагрузка примера кода…

📌 Внимание
Данные хранятся в localStorage, что подходит для личного использования, но не для многопользовательских систем. Для общего доступа требуется серверное хранилище.

Страница восстановления пароля

Стандартный элемент безопасности, позволяющий пользователю сбросить забытый пароль.

HTML

<form id="resetForm" method="POST" action="reset_password.php">
  <h2>Восстановление пароля</h2>
  <p>Введите ваш email, и мы вышлем ссылку для сброса пароля.</p>
  <div class="form-group">
    <label for="resetEmail">Email</label>
    <input type="email" id="resetEmail" name="email" required>
  </div>
  <button type="submit">Отправить ссылку</button>
  <p class="form-footer">
    <a href="login.php">← Назад к входу</a>
  </p>
</form>

CSS

Код ITЗагрузка примера кода…

PHP (reset_password.php)

Код ITЗагрузка примера кода…

Разбор:

Восстановление пароля начинается с валидации email и нейтральной обработки запроса.
bin2hex(random_bytes(32)) генерирует криптостойкий токен для ссылки сброса.
Токен должен храниться в БД с TTL (например, 1 час) и признаком одноразового использования.
Отправка письма выполняется отдельным почтовым слоем, а не напрямую "сырым" mail в production.
Возвращаемое сообщение должно быть одинаковым вне зависимости от существования email, чтобы исключить enumeration.
Шаблон подчеркивает безопасность процесса, а не только UX.

⚠️ Предупреждение
Никогда не сообщайте пользователю, существует ли email в системе. Всегда выводите нейтральное сообщение, чтобы избежать перебора учётных записей.

Форма загрузки файла

Загрузка файлов — частая задача в веб-приложениях — аватары, документы, изображения и т.д.

HTML

<form id="uploadForm" method="POST" enctype="multipart/form-data" action="upload.php">
  <h2>Загрузка файла</h2>
  <div class="form-group">
    <label for="fileInput">Выберите файл</label>
    <input type="file" id="fileInput" name="uploaded_file" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" required>
    <small class="hint">Поддерживаются: JPG, PNG, PDF, DOC/DOCX (макс. 5 МБ)</small>
  </div>
  <button type="submit">Загрузить</button>
</form>

CSS

Код ITЗагрузка примера кода…

PHP (upload.php)

Код ITЗагрузка примера кода…

Разбор:

Обработчик загрузки файла проверяет наличие $_FILES['uploaded_file'] и код ошибки UPLOAD_ERR_OK.
Ограничение размера ($maxSize) защищает от чрезмерной нагрузки и отказа в обслуживании.
MIME-тип проверяется через finfo_file(...), а не только по расширению, что безопаснее.
Имя файла генерируется случайно через random_bytes(...), чтобы избежать коллизий и атак через исходное имя.
При отсутствии директории выполняется mkdir(..., true), затем move_uploaded_file(...) переносит временный файл.
Успех/ошибка разделяются явно, а путь в выводе экранируется через htmlspecialchars(...).

⚠️ Предупреждение
Никогда не используйте оригинальное имя файла напрямую ($_FILES['name']) — это уязвимость. Всегда генерируйте уникальное безопасное имя.

Уведомления (Notifications)

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

HTML

<!-- Контейнер для уведомлений -->
<div id="notificationContainer"></div>

<!-- Пример вызова -->
<button onclick="showNotification('success', 'Данные успешно сохранены!')">Показать успех</button>
<button onclick="showNotification('error', 'Произошла ошибка при отправке.')">Показать ошибку</button>
<button onclick="showNotification('warning', 'Пароль слишком слабый.')">Показать предупреждение</button>

CSS

Код ITЗагрузка примера кода…

JavaScript

Код ITЗагрузка примера кода…

💡 Совет
Для доступности добавьте role="alert" к уведомлениям об ошибках и role="status" — к информационным.

Страница "404 — Не найдено"

Стандартная страница ошибки, отображаемая при обращении к несуществующему URL.

HTML

Код ITЗагрузка примера кода…

📌 Важно
Сервер должен возвращать HTTP-статус 404, а не просто показывать страницу с таким текстом. Иначе поисковые системы будут считать её валидной.

Как работать с шаблонами из статьи

Чтобы эти шаблоны приносили пользу в реальном проекте, удобно использовать единый порядок:

Сначала берите HTML-шаблон и проверяйте семантику (label, fieldset, aria-*).
Затем подключайте серверную обработку в отдельный PHP-файл.
После этого добавляйте защиту — CSRF, валидацию, экранирование, rate limit.
В конце переносите CSS и JS в отдельные файлы и покрывайте e2e-тестами.

Такой порядок позволяет быстро запускать MVP и при этом не пропускать требования безопасности.

Практический маршрут по энциклопедии

Формы и валидация подробно разобраны в Работе с данными со страницы.
Сессии и авторизация с ролями разобраны в Работе с сессиями.
Загрузка файлов со всеми проверками есть в статье 162.
Архитектура классов и автозагрузка разобраны в Пространствах имен и автозагрузке.

Основа по протоколу

Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.