HTML Кнопки

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

HTML Кнопка

Элемент HTML <button> определяет нажимаемую кнопку.

Сама по себе кнопка ничего не делает, пока вы не добавите к ней действие.

Пример

<button>Нажми меня</button>

Оформление HTML кнопок

Кнопки часто оформляются с помощью CSS:

Пример

<button class="mytestbtn">Зеленая кнопка</button>

Отключенные кнопки

Используйте атрибут disabled, чтобы сделать кнопку неактивной.

Пример

<button disabled>Неактивная кнопка</button>

Совет: Отключенные кнопки нельзя нажать, и обычно они выглядят блекло.

Кнопка с JavaScript

Вы можете запустить JavaScript при нажатии кнопки, используя атрибут onclick.

Пример

<button onclick="alert('Привет!')">Нажми меня</button>

Примечание: Вы узнаете больше о JavaScript в нашей главе HTML JavaScript.

Типы кнопок

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

type="button" — Обычная нажимаемая кнопка (по умолчанию ничего не делает)
type="submit" — Отправляет форму
type="reset" — Сбрасывает все поля формы

<button type="button">Обычная кнопка</button>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>

Кнопки часто используются внутри форм, о которых вы узнаете больше в главе HTML формы.

Пока просто знайте, что кнопка типа submit отправляет данные формы на сервер, а кнопка типа reset очищает форму.

Пример

<form action="/action_page.php">
  Имя: <input type="text" name="fname">
  <button type="submit">Отправить</button>
  <button type="reset">Очистить форму</button>
</form>

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