Форма авторизации на HTML и CSS: код входа и регистрации

Форма входа HTML состоит из тега form, двух полей и кнопки. Ниже вы найдете полный код в двух файлах: login.html и login.css. Сохраните их в одну папку, откройте страницу в браузере, и форма появится в том виде, как в примере.

Затем разберем форму регистрации, проверку данных, доступность, показ пароля, готовые шаблоны и WordPress. Сама разметка авторизацию на сайте не включает: входом управляет серверный код.

Обновлено: 2026-10-02 18:19:17 Вадим Дворниковавтор материала

Из чего состоит форма авторизации

Минимальная форма входа содержит пять элементов:

• тег form собирает данные и отправляет их на сервер;
• поле логина или почты принимает имя пользователя;
• поле пароля скрывает вводимые символы;
• кнопка submit отправляет форму;
• ссылка «Забыли пароль?» ведет на страницу восстановления.

Каждое поле получает подпись через label. Атрибут name задает имя, под которым сервер получит значение.

Базовая форма авторизации: HTML

Это форма авторизации HTML без стилей, с комментариями к каждому блоку. Сохраните код как login.html.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <!-- Без viewport телефон рисует страницу как для широкого экрана -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Вход</title>
  <!-- Стили лежат в файле login.css рядом с этой страницей -->
  <link rel="stylesheet" href="login.css">
</head>
<body>
  <main class="auth">
    <!-- action — адрес обработчика на сервере, post прячет пароль из адреса -->
    <form class="auth__form" action="/login" method="post">
      <h1 class="auth__title">Вход на сайт</h1>

      <!-- for связывает подпись с полем по id -->
      <label for="login-email">Почта</label>
      <input id="login-email" name="email" type="email"
             autocomplete="username" required>

      <label for="login-password">Пароль</label>
      <input id="login-password" name="password" type="password"
             autocomplete="current-password" required>

      <!-- Кнопка отправляет форму -->
      <button type="submit">Войти</button>
      <a class="auth__link" href="/forgot">Забыли пароль?</a>
    </form>
  </main>
</body>
</html>

Значения /login и /forgot замените на свои адреса.

Стилизуем форму на CSS

Сохраните стили рядом с разметкой как login.css. Они центрируют форму, задают отступы и видимый фокус.

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f2f4f8;
}

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth__form {
  width: 100%;
  max-width: 360px;
  padding: 32px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth__title {
  margin: 0 0 24px;
  font-size: 1.5rem;
}

.auth__form label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  color: #333;
}

.auth__form input {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #8a94a6;
  border-radius: 4px;
}

.auth__form input:focus,
.auth__form button:focus-visible {
  outline: 3px solid #1a5fd0;
  outline-offset: 2px;
}

.auth__form button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  color: #fff;
  background: #1a5fd0;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.auth__form button:hover { background: #1348a3; }

.auth__link {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 0.875rem;
}

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

Авторизация на сайте: что делает сервер

Форма только собирает данные. Авторизацию на сайте выполняет серверный код. Он получает почту и пароль, находит пользователя в базе, сверяет хеш пароля и открывает сессию. Пока вы не написали такой обработчик, кнопка «Войти» ничего не проверяет.

Поэтому на вопрос «как сделать авторизацию на сайте html» отвечают двумя частями: HTML дает интерфейс, сервер проверяет пароль. Серверную часть пишут на PHP, Python, Node.js или берут готовую: в WordPress она есть из коробки.

Форма регистрации HTML: чем отличается от входа

Форма регистрации на сайте собирает больше данных и создает учетную запись. Форма входа только проверяет существующую. Отличия такие:

• добавляется поле имени;
• пароль вводится дважды, чтобы исключить опечатку;
• у пароля стоит autocomplete="new-password", чтобы менеджер паролей предложил сгенерировать новый;
• появляется чекбокс согласия на обработку персональных данных;
• вместо «Забыли пароль?» ставится ссылка «Уже есть аккаунт».

<form action="/register" method="post">
  <label for="reg-name">Имя</label>
  <input id="reg-name" name="name" type="text"
         autocomplete="name" required>

  <label for="reg-email">Почта</label>
  <input id="reg-email" name="email" type="email"
         autocomplete="email" required>

  <label for="reg-password">Пароль (не короче 8 символов)</label>
  <input id="reg-password" name="password" type="password"
         autocomplete="new-password" minlength="8" required>

  <label for="reg-password2">Повторите пароль</label>
  <input id="reg-password2" name="password2" type="password"
         autocomplete="new-password" minlength="8" required>

  <label>
    <input type="checkbox" name="consent" required>
    Согласен на обработку персональных данных
  </label>

  <button type="submit">Зарегистрироваться</button>
  <a href="/login">Уже есть аккаунт</a>
</form>

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

Валидация средствами HTML5

Браузер проверяет поля до отправки, если вы задали атрибуты:

• type="email" требует адрес в формате почты;
• required запрещает пустое поле;
• minlength задает минимальную длину у input и textarea;
• pattern проверяет значение регулярным выражением у типов text, search, url, tel, email и password;
• autocomplete подсказывает браузеру, что подставить: username, email, current-password, new-password.

Например, pattern="[A-Za-z0-9_]{3,20}" пропустит логин из латиницы, цифр и подчеркивания длиной от трех до двадцати символов. Подсказку для пользователя добавьте в атрибут title.

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

Доступность формы

Доступная форма работает с клавиатуры и с экранным диктором. Что для этого нужно:

• Связывайте label for с id поля. Тогда диктор называет поле, а клик по подписи ставит в него курсор.
• Не заменяйте подпись плейсхолдером. Он исчезает при вводе, и пользователь забывает, что вводит.
• Оставляйте видимый фокус. Не пишите outline: none без замены.
• Следите за контрастом текста и фона. Серый текст на белом читается плохо.
• Сообщение об ошибке привязывайте к полю через aria-describedby, а неверное поле помечайте aria-invalid="true".

<label for="login-email">Почта</label>
<input id="login-email" name="email" type="email"
       aria-describedby="email-error" aria-invalid="true">
<p id="email-error" role="alert">Введите адрес в формате name@example.ru</p>

Адаптивность

Форма из примера уже адаптивна. Ширина 100% с ограничением max-width: 360px дает узкую карточку на телефоне и аккуратную на компьютере. Мета-тег viewport в разметке обязателен: без него телефон рисует страницу как для широкого экрана.

Для полей хватает font-size: 1rem. В iOS Safari при шрифте поля меньше 16 пикселей страница приближается при фокусе. При стандартном корневом шрифте 1rem равен 16 пикселям.

Для шрифтов и отступов берите rem, для ширины — %. Брейкпойнт нужен, только если форма делится на колонки. Тогда на узком экране колонки складывайте в одну:

.auth__row { display: grid; gap: 16px; }

@media (min-width: 640px) {
  .auth__row { grid-template-columns: 1fr 1fr; }
}

Показать и скрыть пароль

Кнопка показа пароля снижает число опечаток, особенно на телефоне. Скрипт переключает type поля между password и text.

<input id="login-password" name="password" type="password"
       autocomplete="current-password" required>
<button type="button" id="toggle-password"
        aria-controls="login-password" aria-pressed="false">
  Показать пароль
</button>

<script>
  const field = document.getElementById('login-password');
  const toggle = document.getElementById('toggle-password');

  toggle.addEventListener('click', () => {
    const show = field.type === 'password';
    field.type = show ? 'text' : 'password';
    toggle.setAttribute('aria-pressed', String(show));
  });
</script>

У кнопки указан type="button", иначе она отправит форму. Подпись «Показать пароль» остается постоянной, а состояние диктору сообщает атрибут aria-pressed: он отвечает, включен ли показ. Меняющуюся подпись вместе с aria-pressed не ставьте, диктор прочтет «Скрыть пароль, нажата».

Готовые шаблоны форм

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

• Bootstrap Sign-in. Официальный пример на Bootstrap 5.3: поля почты и пароля, чекбокс «Запомнить меня», кнопка входа и переключатель светлой и темной темы. Отдельной лицензии у примера нет, действует MIT всего репозитория Bootstrap.
• bootstrap-4-login-page. Шаблон включает вход, регистрацию, восстановление и сброс пароля. Он построен на Bootstrap 4.1.3 и jQuery 1.12.4, поэтому устарел по версиям: перед использованием обновите зависимости. Умеет показывать и скрывать пароль. Лицензия MIT.
• SB Admin 2. Админ-тема на Bootstrap, Sass и jQuery. В репозитории лежат страницы login.html, register.html и forgot-password.html. Лицензия MIT.
• AdminLTE. Админ-тема на Bootstrap 5.3 без jQuery. Страницы входа, регистрации и восстановления пароля лежат в src/html/pages/examples в формате Astro, поэтому готовых HTML-файлов там нет. Лицензия MIT.
• Purple Admin Free. Админ-тема на Bootstrap 5 и jQuery. Страницы pages/samples/login.html и pages/samples/register.html лежат в репозитории. Лицензия MIT.
• Bulma Templates: login. Страница входа на Bulma с CDN и Font Awesome 4.7. В форме поля почты и пароля, чекбокс «Remember me», кнопка входа и ссылки «Sign Up» и «Forgot Password». Лицензия MIT.
• Tabler: sign-in. Страница входа из набора на Bootstrap 5. Поля почты и пароля, ссылка на восстановление, чекбокс «Remember me on this device», вход через Github и X. Лицензия MIT; у сторонних библиотек в составе набора свои лицензии.
• CoreUI Free Bootstrap Admin Template. Шаблон построен на Bootstrap 5, Pug и Sass. В каталоге src/pug/views/authentication лежат login.pug и register.pug, а также страницы сброса и смены пароля. Лицензия MIT.

Админ-темы из списка тянут за собой много лишнего, поэтому берите из них только страницу входа и ее стили. Шаблон, найденный вне этого списка, проверьте по файлу LICENSE: в репозитории без лицензии код по умолчанию несвободен.

Как встроить форму в WordPress

WordPress уже имеет страницу входа wp-login.php и серверную часть авторизации. Писать свой обработчик не нужно, достаточно изменить внешний вид.

• Стили через хук. Действие login_enqueue_scripts подключает свои CSS и JS на странице входа. Через этот хук логотип тоже задают стилями.
• Ссылка и подпись логотипа. Фильтр login_headerurl меняет адрес, куда ведет логотип, а login_headertext — текст этой ссылки.
• Форма в теме. Функция wp_login_form() выводит форму входа в любом месте сайта, например в шапке или на отдельной странице.
• Плагин. Если код писать не хочется, возьмите плагин для страницы входа. Разбор ниже.

add_action( 'login_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-login',
        get_stylesheet_directory_uri() . '/login.css',
        array(),
        '1.0'
    );
} );

add_filter( 'login_headerurl', function () {
    return home_url();
} );

Логотип заменяет правило в подключенном login.css. Адрес картинки подставьте свой:

.login h1 a {
  background-image: url('logo.svg');
  background-size: contain;
  width: 100%;
}

Код помещают в functions.php дочерней темы. Правку основной темы затрет обновление. Свою форму из этой статьи для WordPress не подключайте напрямую: отправлять ее на собственный /login бессмысленно, у системы свой обработчик.

Плагины для страницы входа

Название «Custom Login Page Customizer» в каталоге wordpress.org носят сразу два плагина от разных авторов: их различает только адрес страницы.

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

Безопасность: чего нельзя делать

• Не передавайте пароли по HTTP. Форма работает только по HTTPS.
• Не храните пароль открытым текстом. Сервер хранит только хеш, полученный алгоритмом для паролей: bcrypt, Argon2 или аналогом.
• Не отправляйте форму методом GET: пароль попадет в адрес, историю и журналы сервера.
• Ограничивайте число попыток входа. Без лимита пароль подбирают перебором.
• Защищайте форму CSRF-токеном. Сервер выдает случайное значение, кладет в скрытое поле и сверяет при отправке.
• Не подсказывайте, что именно неверно. Сообщение «Неверная почта или пароль» не помогает подбирать логины.

Частые ошибки в форме входа

• Поля стоят без обертки form, поэтому Enter не отправляет данные, а автозаполнение работает хуже.
• Кнопка без type. Внутри формы она по умолчанию отправляет форму, и «Показать пароль» вдруг перезагружает страницу.
• У поля пароля нет autocomplete="current-password". Менеджер паролей узнает поле и без него, но хуже отличает вход от регистрации и чаще ошибается при автозаполнении.
• Плейсхолдер вместо label.
• Проверка только в браузере, без проверки на сервере.
• Рамку фокуса убрали, и пользователь клавиатуры не видит, где находится.