Тег <button>: доступные кнопки
Как выбирать тип кнопки и почему действие лучше реализовывать настоящим button.
Зачем нужен этот элемент
button запускает действие: раскрытие панели, отправку формы или изменение состояния интерфейса. Он по умолчанию доступен с клавиатуры и получает фокус. Внутри можно разместить текст и декоративный значок, сохранив ясное доступное имя.
В форме обычная кнопка без явного типа может отправлять данные. Для вспомогательного действия всегда задавайте type=»button». Кнопка отправки получает type=»submit». Если цель — открыть другую страницу, нужен элемент a с href.
Синтаксис и пример
<style>button { padding: 12px 18px; border: 0; border-radius: 8px; background: #11694e; color: white; }</style>
<button type="button">Сохранить черновик</button>
<button type="button" disabled>Уже сохранено</button>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| type="button" | Действие, не отправляющее форму. |
| type="submit" | Отправка связанной формы. |
| disabled | Отключение взаимодействия; объясните причину рядом. |
Частая ошибка
Небольшая практика
Нажмите Tab и проверьте фокус на кнопке. Пример показывает разметку: поведение сохранения требует отдельного JavaScript или серверного обработчика.
Разберите также <form>, <a>: эти элементы пригодятся в том же интерфейсе.