Исполняемые доки HTML: Кнопка в HTML

Q: Как сделать кнопку в HTML?

Напишите Click me . Текст между тегами это подпись кнопки. Добавьте обработчик click в JavaScript, чтобы она что-то делала, или поместите ее в с type="submit", чтобы она отправляла форму.

Q: Какой тип у кнопки HTML по умолчанию?

submit. без атрибута type внутри формы отправляет эту форму при клике, поэтому обычная кнопка в форме может перезагружать страницу. Для любой кнопки, которая запускает JavaScript, пишите type="button".

Q: Чем button отличается от input type=submit?

Оба отправляют форму. может содержать HTML (иконку, жирный текст) между тегами, а берет подпись из атрибута value и может содержать только обычный текст. В большинстве современного кода используют .

Q: Как сделать кнопку неактивной в HTML?

Добавьте атрибут disabled: Save . По неактивной кнопке нельзя кликнуть, на ней нельзя сфокусироваться, и ее name и value не отправляются с формой. Уберите атрибут (btn.disabled = false в JavaScript), чтобы снова ее включить.

Q: Как сделать, чтобы кнопка HTML вела на другую страницу?

Используйте ссылку, оформленную как кнопка: See pricing . нужен для действий на текущей странице. Кнопка внутри это некорректный HTML.

Q: Почему кнопка перезагружает страницу?

Она находится внутри и у нее нет type, поэтому это кнопка отправки, и браузер отправляет форму и загружает ответ. Добавьте ей type="button" или вызовите event.preventDefault() в обработчике submit, если обрабатываете форму через JavaScript.

Как сделать кнопку в HTML

Кнопка это элемент <button>. Содержимое между тегами это то, что видит пользователь, а type="button" говорит, что кнопка запускает ваш скрипт, а не отправляет форму. Кликните по ней в превью:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Больше рабочей кнопке ничего не нужно: подпись, type и что-то, что слушает click. Браузер делает ее доступной для фокуса с клавиатуры и нажимает ее по Enter или Space, так что пользователи клавиатуры получают все это без дополнительного кода. <div> с обработчиком клика не получает ничего из этого.

Можно встретить и onclick="...", написанный прямо в теге. Это работает, но addEventListener держит скрипт отдельно от разметки и позволяет нескольким обработчикам делить одну кнопку.

Три типа кнопок

Атрибут type определяет, что делает кнопка при нажатии.

`type`	Что делает	Для чего
`submit`	Отправляет форму, к которой относится. Это значение по умолчанию.	Главное действие формы
`button`	Сама ничего не делает; решает ваш JavaScript	Переключатели, диалоги, счетчики, все, что работает на скриптах
`reset`	Возвращает все поля формы к начальным значениям	Редко; пользователи нажимают ее по ошибке

Введите что-нибудь и попробуйте каждую кнопку. Превью не уходит со страницы при отправке формы; оно показывает данные, которые отправила бы форма.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset восстанавливает значение, записанное в HTML (Ada), а не пустое поле. А если удалить type="button" у Uppercase, она станет кнопкой отправки: переведет имя в верхний регистр и затем отправит форму.

Кнопка отправки: отправка name и value

У кнопки отправки могут быть собственные name и value. Они отправляются с формой, только если форму отправила именно эта кнопка, поэтому две кнопки могут делить одну форму и сообщать серверу, какое действие выбрано:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Нажмите Publish, и форма отправит title=My first post и action=publish. Очистите заголовок и нажмите любую кнопку: required остановит отправку, и браузер покажет свое сообщение. Нажатие Enter в текстовом поле тоже отправляет форму, и браузер считает это нажатием первой кнопки отправки, поэтому отправляется action=draft.

Кнопки отправки также принимают атрибуты, которые переопределяют форму для одной этой кнопки: formaction (другой URL), formmethod, formtarget и formnovalidate, который пропускает валидацию. formnovalidate обычно ставят кнопке «Сохранить черновик», которая должна работать, пока обязательные поля еще пустые.

Кнопка, стоящая вне своей формы, все равно может ее отправить через атрибут form, который принимает id формы: <button type="submit" form="signup">Sign up</button>.

Неактивные кнопки

Атрибут disabled выключает кнопку. Неактивная кнопка игнорирует клики, пропускается при переходе по Tab и не отправляется с формой. Браузеры также делают ее серой. Частый прием: держать кнопку отправки неактивной, пока не выполнено условие:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

В JavaScript button.disabled это логическое свойство: присваивайте ему true или false. В HTML важно наличие атрибута, поэтому disabled="false" все равно отключает кнопку.

Неактивная кнопка не объясняет, почему она неактивна, а пользователи клавиатуры и программ чтения с экрана, переходящие по Tab, никогда на нее не попадают. Если причина не очевидна, напишите ее текстом рядом с кнопкой или оставьте кнопку активной и показывайте сообщение об ошибке при нажатии.

Стили кнопки через CSS

Браузеры рисуют кнопки своим шрифтом, рамкой и фоном. Несколько свойств заменяют все это. Сохраняйте видимый стиль фокуса: по нему пользователи клавиатуры видят, где находятся.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Для чего каждое правило:

font: inherit заставляет кнопку использовать шрифт страницы. Без него кнопки используют собственный, более мелкий шрифт форм браузера (13.33px в Chrome и Firefox).
cursor: pointer показывает курсор в виде руки. По умолчанию у кнопок обычная стрелка.
:hover, :active и :focus-visible оформляют состояния указателя, нажатия и фокуса с клавиатуры. :focus-visible показывает рамку при фокусе с клавиатуры, но не после клика мышью, поэтому убирать outline, чтобы ее избежать, не нужно.
:disabled выбирает кнопки с атрибутом disabled.

Нажмите Tab в превью, чтобы увидеть, как янтарная рамка фокуса переходит между первыми двумя кнопками. Неактивная пропускается. (На Mac Safari и Firefox переходят по Tab к кнопкам, только если в системных настройках включена навигация с клавиатуры; в Safari без нее работает Option+Tab.) Полный список состояний есть на странице hover в CSS.

Кнопки с иконками

<button> может содержать HTML, поэтому иконка ставится внутрь рядом с текстом. У кнопки только с иконкой нет текста, который могла бы объявить программа чтения с экрана, поэтому дайте ей aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" у SVG исключает его из дерева доступности, поэтому первая кнопка объявляется как «Add item, кнопка», а вторая как «Delete, кнопка».

button или input type="submit"

<input type="submit"> это более старый способ написать кнопку отправки. Оба отправляют форму одинаково; разница в том, что они могут содержать.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Подпись	Содержимое между тегами	Атрибут `value`
Может содержать иконки или разметку	Да	Нет
Закрывающий тег	Обязателен	Нет (пустой элемент)
Тип по умолчанию	`submit`	Всегда отправка

Используйте <button>. Единственная причина оставить <input type="submit"> это существующий CSS или JavaScript, который его выбирает. Есть также <input type="button"> и <input type="reset">, та же идея для двух других типов.

Кнопка или ссылка?

Кнопка что-то делает на текущей странице: отправляет, открывает, переключает, удаляет. Ссылка ведет на другой URL. Если клик меняет адресную строку, это должен быть <a href>, оформленный как кнопка, если того требует дизайн. Этот прием и то, почему кнопка внутри ссылки некорректна, описаны на странице кнопка как ссылка в HTML.

Доступность

Используйте настоящий <button>. Он получает фокус, работает с Enter и Space и объявляется как кнопка. Чтобы воссоздать это на <div>, нужны role, tabindex и обработчики клавиш, и результат обычно все равно неполный.
У каждой кнопки должно быть имя: ее текст или aria-label, если у нее только иконка.
Сохраняйте видимый стиль фокуса. outline: none без замены оставляет пользователей клавиатуры без ориентира.
Делайте кнопку достаточно большой, чтобы в нее было легко попасть. WCAG 2.2 требует не меньше 24 на 24 пикселя CSS; отступы, как в примере со стилями выше, дают высоту около 40 пикселей.
Для переключателя добавьте aria-pressed="true" или "false" и обновляйте его при смене состояния.

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

Кнопка в форме без type. Она отправляет форму. Пишите type="button" у каждой кнопки, которая не должна отправлять форму.
Кнопка внутри ссылки, <a href="/x"><button>Go</button></a>. Это некорректный HTML, и в разных браузерах он ведет себя по-разному. Используйте один элемент: ссылку, оформленную как кнопка.
<div onclick> в роли кнопки. До него нельзя добраться с клавиатуры.
Удаленная рамка фокуса без стиля :focus-visible взамен.
disabled="false" в расчете на активную кнопку. Удалите атрибут.
Забытый font: inherit, после чего непонятно, почему у кнопок другой шрифт, чем у остальной страницы.

Часто задаваемые вопросы

Как сделать кнопку в HTML?

Напишите <button type="button">Click me</button>. Текст между тегами это подпись кнопки. Добавьте обработчик click в JavaScript, чтобы она что-то делала, или поместите ее в <form> с type="submit", чтобы она отправляла форму.

Какой тип у кнопки HTML по умолчанию?

submit. <button> без атрибута type внутри формы отправляет эту форму при клике, поэтому обычная кнопка в форме может перезагружать страницу. Для любой кнопки, которая запускает JavaScript, пишите type="button".

Чем button отличается от input type=submit?

Оба отправляют форму. <button> может содержать HTML (иконку, жирный текст) между тегами, а <input type="submit"> берет подпись из атрибута value и может содержать только обычный текст. В большинстве современного кода используют <button>.

Как сделать кнопку неактивной в HTML?

Добавьте атрибут disabled: <button disabled>Save</button>. По неактивной кнопке нельзя кликнуть, на ней нельзя сфокусироваться, и ее name и value не отправляются с формой. Уберите атрибут (btn.disabled = false в JavaScript), чтобы снова ее включить.

Как сделать, чтобы кнопка HTML вела на другую страницу?

Используйте ссылку, оформленную как кнопка: <a href="/pricing" class="btn">See pricing</a>. <button> нужен для действий на текущей странице. Кнопка внутри <a> это некорректный HTML.

Почему кнопка перезагружает страницу?

Она находится внутри <form> и у нее нет type, поэтому это кнопка отправки, и браузер отправляет форму и загружает ответ. Добавьте ей type="button" или вызовите event.preventDefault() в обработчике submit, если обрабатываете форму через JavaScript.

Связанные концепции