Как сделать настоящую кнопку в HTML и чем button отличается от ссылки?
Мне нужна кнопка на странице. Видел, что кнопку делают и через <button>, и через <a> оформленную как кнопку, и даже через <input>. Какой способ правильный и в чём разница? Когда что брать?
2 ответа
Выбор зависит от того, что должна делать кнопка:
- Действие на странице (отправить форму, показать/скрыть блок) →
<button>:
<button>Отправить</button>
<button type="button">Показать ещё</button>
- Переход на другую страницу → это по смыслу ссылка, бери
<a>, даже если она выглядит как кнопка:
<a href="/contacts" class="btn">Контакты</a>
Правило: ведёт куда-то (есть адрес) — <a>; делает что-то прямо тут — <button>. Не делай ссылку кнопкой и наоборот: это важно для клавиатуры и скринридеров.
Про type: у <button> внутри <form> по умолчанию type="submit" (отправляет форму). Если кнопка не для отправки — ставь type="button", иначе она будет неожиданно перезагружать страницу.
<input type="button"> — это старый способ, по сути то же, но текст задаётся атрибутом value, и внутрь нельзя положить иконку. Для новых страниц проще и гибче <button> — рекомендую его.