button

Элемент <button> создаёт кликабельную кнопку. Тип кнопки (submit, reset, button) определяет её поведение в контексте формы.

Зачем нужно

Кнопки -- основной элемент взаимодействия. Правильный тип кнопки предотвращает баги (случайная отправка формы), а семантический <button> обеспечивает доступность (фокус, клавиатура, screen readers) без дополнительных ARIA-атрибутов.

Где используется

  • Отправка форм
  • Действия на странице (открыть меню, добавить в корзину, удалить)
  • Навигация по шагам (мастер, карусель)
  • Модальные окна

Предпосылки

<button> vs <input type="submit">

<!-- <button> -- рекомендуемый способ -->
<button type="submit">
  <svg><!-- иконка --></svg>
  Отправить
</button>

<!-- <input type="submit"> -- только текст, без вложенного HTML -->
<input type="submit" value="Отправить">
<button> <input type="submit">
Содержимое Любой HTML (текст, иконки, span) Только текст (через value)
Гибкость стилей Полная Ограниченная
Семантика Лучше Достаточная
Рекомендация Предпочтительно Устаревший подход

Типы кнопок

type="submit" -- отправка формы (по умолчанию!)

<form action="/api/contact" method="POST">
  <input type="text" name="message">
  <!-- type="submit" -- по умолчанию внутри form! -->
  <button type="submit">Отправить</button>
</form>

Важно: <button> без type внутри <form> -- это submit! Это частая причина багов.

type="reset" -- сброс формы

<form>
  <input type="text" name="name" value="Иван">
  <button type="reset">Очистить</button>
</form>

Сбрасывает все поля формы к начальным значениям (указанным в value). Используется редко -- пользователи нажимают случайно.

type="button" -- нет действия по умолчанию

<!-- Кнопка для JavaScript-действий (вне формы или без отправки) -->
<button type="button" onclick="toggleMenu">
  Меню
</button>

<!-- Обязательно type="button" если не нужна отправка формы! -->
<form>
  <input type="text" name="search">
  <button type="submit">Найти</button>
  <button type="button" onclick="clearResults">Очистить результаты</button>
</form>

Атрибуты <button>

Атрибут Описание
type submit / reset / button
disabled Заблокирована
name Имя (для отправки значения)
value Значение (отправляется с формой)
form ID формы (если кнопка вне <form>)
formaction Перезаписывает action формы
formmethod Перезаписывает method формы
formenctype Перезаписывает enctype формы
formnovalidate Отключает валидацию при отправке
formtarget Перезаписывает target формы
autofocus Фокус при загрузке
popovertarget ID popover-элемента
popovertargetaction show / hide / toggle

Кнопка с перезаписью действия формы

<form action="/api/save" method="POST">
  <textarea name="content"></textarea>

  <!-- Основная кнопка: сохранить -->
  <button type="submit">Сохранить</button>

  <!-- Альтернативная: сохранить как черновик (другой URL) -->
  <button type="submit" formaction="/api/save-draft">
    Сохранить как черновик
  </button>

  <!-- Без валидации -->
  <button type="submit" formaction="/api/save-draft" formnovalidate>
    Сохранить без проверки
  </button>
</form>

Кнопка, привязанная к форме

<form id="loginForm" action="/login" method="POST">
  <input type="email" name="email">
  <input type="password" name="password">
</form>

<!-- Кнопка вне формы, но привязана -->
<button type="submit" form="loginForm">Войти</button>

Кнопка с name/value

<form action="/action" method="POST">
  <button type="submit" name="action" value="approve">Одобрить</button>
  <button type="submit" name="action" value="reject">Отклонить</button>
</form>
<!-- Сервер получит action=approve или action=reject -->

Кнопка vs ссылка

<!-- КНОПКА: выполняет действие -->
<button type="button" onclick="addToCart(42)">Добавить в корзину</button>
<button type="button" onclick="openModal">Открыть настройки</button>
<button type="submit">Отправить форму</button>

<!-- ССЫЛКА: навигация -->
<a href="/catalog">Перейти в каталог</a>
<a href="/about">О нас</a>

Правило: если клик переходит куда-то -- <a>. Если клик делает что-то -- <button>.

Доступность кнопок

<!-- Кнопка-иконка: нужен aria-label -->
<button type="button" aria-label="Закрыть">
  <svg aria-hidden="true"><!-- крестик --></svg>
</button>

<!-- Кнопка с состоянием -->
<button type="button"
        aria-expanded="false"
        aria-controls="dropdown-menu">
  Меню
</button>
<ul id="dropdown-menu" hidden>...</ul>

<!-- Кнопка загрузки -->
<button type="submit" aria-busy="true" disabled>
  <span class="spinner" aria-hidden="true"></span>
  Загрузка...
</button>

Стилизация

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
    color: white;
    background: #0066cc;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn:hover { background: #0052a3; }
  .btn:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
  .btn:active { background: #004080; }
  .btn:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
</style>

<button class="btn" type="submit">Отправить</button>

Частые ошибки

Ошибка Почему плохо Как правильно
<button> без type в форме По умолчанию submit -- случайная отправка Всегда указывай type
<div onclick> вместо <button> Нет фокуса, клавиатуры, a11y Используй <button>
<a href="#"> для действий Семантически неверно <button type="button">
<a href="javascript:void(0)"> Не работает без JS <button>
Кнопка-иконка без текста/aria-label Screen reader не прочитает aria-label
disabled без визуальной индикации Пользователь не понимает, почему не работает Стилизуй disabled-состояние

Практика

  1. Создай форму с type="submit", type="reset" и type="button" -- проверь поведение каждого типа
  2. Создай <button> без type внутри формы -- убедись, что он отправляет форму
  3. Создай кнопку-иконку с aria-label и проверь через screen reader
  4. Используй formaction для двух кнопок submit с разными URL
  5. Стилизуй кнопку: hover, focus-visible, active, disabled

Связанные темы

Ресурсы