Кнопки HTML
Кнопки позволяют пользователям взаимодействовать со страницей. Они могут отправлять формы, запускать JavaScript или вызывать другие действия при нажатии.
Кнопка HTML
Элемент <button> создаёт кликабельную кнопку. Сама по себе она ничего не делает, пока вы не зададите ей действие.
Пример
Обычная кнопка.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовая кнопка</title>
</head>
<body>
<button>Нажми меня</button>
</body>
</html>
Оформление кнопок HTML
Кнопки часто оформляются с помощью CSS.
Пример
Зелёная кнопка, оформленная с помощью CSS.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mytestbtn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="mytestbtn">Зелёная кнопка</button>
</body>
</html>
Отключённые кнопки
Используйте атрибут disabled, чтобы сделать кнопку недоступной для нажатия.
Совет: Отключённые кнопки нельзя нажать, и обычно они выглядят блёклыми.
Пример
Отключённая кнопка.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отключённая кнопка</title>
</head>
<body>
<button disabled>Отключённая кнопка</button>
</body>
</html>
Кнопка с JavaScript
Можно запускать JavaScript при нажатии кнопки с помощью атрибута onclick.
Примечание: Подробнее о JavaScript вы узнаете в главе HTML JavaScript.
Пример
Кнопка, показывающая оповещение при нажатии.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка Js</title>
</head>
<body>
<button onclick="alert('Привет!')">Нажми меня</button>
</body>
</html>
Типы кнопок
Атрибут type задаёт, что делает кнопка. Есть три типа: type="button" — обычная кнопка, ничего не делающая по умолчанию, type="submit" отправляет форму, а type="reset" очищает все поля формы.
Кнопки часто используются внутри форм: кнопка отправки отправляет данные формы на сервер, а кнопка сброса очищает форму.
Примечание: Всегда указывайте атрибут type. Внутри формы тип по умолчанию — submit, и браузеры могут вести себя по-разному, если он не указан.
Пример
Кнопки отправки и сброса внутри формы.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка формы</title>
</head>
<body>
<form action="/action_page.php">
Имя: <input type="text" name="fname">
<button type="submit">Отправить</button>
<button type="reset">Сбросить форму</button>
</form>
</body>
</html>
Три типа кнопок
Обычная кнопка, кнопка отправки и кнопка сброса.
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>