Кнопки — один из самых простых и в то же время важных элементов интерфейса.
С их помощью пользователи отправляют формы, запускают скрипты, переключают режимы и делают десятки других действий. В HTML5 появилось больше гибкости в работе с кнопками, а также новые способы их стилизации и управления поведением.
Какие бывают кнопки в HTML5
В HTML можно создавать кнопки двумя основными способами: через <button> и через <input> с типом button, submit или reset. Каждый из них имеет своё поведение и область применения.
Тег <button>
Это универсальный тег, в который можно вложить любой контент — текст, иконку, даже изображение. Он принимает атрибут type, который определяет его поведение:
type="submit"— отправляет формуtype="reset"— сбрасывает значения формыtype="button"— обычная кнопка, не влияет на форму
Пример:
htmlКопироватьРедактировать<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
<button type="button">Нажми меня</button>
Тег <input> с типом кнопки
Это более старый способ, но он всё ещё работает. Такие кнопки не могут содержать HTML-контент — только текст в атрибуте value.
Пример:
htmlКопироватьРедактировать<input type="submit" value="Отправить форму">
<input type="reset" value="Очистить форму">
<input type="button" value="Просто кнопка">
Различие между <button> и <input>
Главное различие — в гибкости.<button> позволяет вставлять любой HTML-внутрь (например, иконки и стилизованные элементы), а <input> ограничен только текстом. Также <button> чаще используют в современных проектах, особенно при применении JavaScript и фреймворков.
Как работает кнопка Submit
Кнопка submit по умолчанию отправляет форму.
Если она находится внутри тега <form>, браузер при клике попытается отправить данные. Это поведение можно переопределить с помощью JavaScript, например, чтобы отправить форму через fetch.
Если на странице несколько кнопок submit, можно указать одну из них как основную или задать каждой свою функцию через formaction.
HTML5-нововведения для кнопок
HTML5 расширил возможности кнопок за счёт новых атрибутов:
autofocus— устанавливает фокус на кнопку при загрузке страницыdisabled— делает кнопку неактивнойform— позволяет привязать кнопку к форме вне неёformaction,formenctype,formmethod,formtarget— переопределяют параметры отправки
Эти атрибуты делают кнопки более гибкими и независимыми от расположения в DOM.
Кнопки в HTML5 — это мощный инструмент интерфейса, который теперь можно использовать гораздо гибче, чем раньше. Выбирая между <button> и <input>, стоит ориентироваться на задачи проекта: если нужна простота — подойдет <input>, если контроль и стилизация — лучше использовать <button>.