Что такое кнопка в HTML

Дата последнего обновления статьи: 2025-03-01

Кнопка в HTML — это элемент, который позволяет пользователям взаимодействовать с веб-страницей, выполняя определенные действия, такие как навигация по страницам, вызов JavaScript-функций или отправка формы. Кнопки могут быть созданы с помощью тега button или с помощью тега input с атрибутом type="button".

Основные способы создания кнопок

С использованием тега button

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

Этот элемент может содержать текст, изображения или другие HTML-элементы, такие как иконки.

С использованием тега input

<input type="button" value="Нажми меня">

В этом случае текст кнопки задается с помощью атрибута value.

Кнопка отправки формы

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

Кнопка с типом submit отправляет данные формы на сервер.

Кнопка сброса формы

<button type="reset">Сбросить</button>

Эта кнопка сбрасывает все поля формы к их первоначальным значениям.

Пример кнопки с обработчиком события

Вы можете добавить обработчик событий с помощью JavaScript для выполнения действий при нажатии на кнопку:

<button onclick="alert('Кнопка нажата!')">Нажми меня</button>

Стилизация кнопок

Кнопки можно стилизовать с помощью CSS для изменения их внешнего вида:

<style>
  .my-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

<button class="my-button">Стилизованная кнопка</button>

Заключение

Кнопки — это важные элементы взаимодействия на веб-страницах, которые позволяют пользователям выполнять действия. Они могут быть легко созданы и стилизованы с помощью HTML и CSS, а также могут быть связаны с JavaScript для добавления интерактивности.

О том как создать кнопку в HTML, можно узнать на странице описания тега button.

Предыдущая страница

Следующая страница