Тег button в HTML: что это такое?

Синтаксис тега button

Базовый синтаксис тега <button> выглядит следующим образом:

<button type="button">Текст кнопки</button>

Атрибуты тега button

• autofocus - автоматически устанавливает фокус на кнопку после загрузки страницы.
• disabled - говорит браузеру сделать кнопку неактивной. Такую кнопку нельзя нажать или перевести на неё фокус.
• form - позволяет указать id формы, которой принадлежит кнопка. Если такой атрибут не указан, то кнопка будет принадлежать ближайшей родительской форме, если она есть.
• formaction - позволяет указать URL-ссылку для отправки формы (только для type="submit"). Если в форме определён атрибут action, то formaction переопределит её.
• formenctype - позволяет указать тип отправляемого через форму контента, с помощью которого определяется способ кодирования данных формы. Возможные значения: application/x-www-form-urlencoded - утановлен по умолчанию, multipart/form-data - необходимо указать для форм с загрузкой файлов, text/plain - для форм с текстовыми полями.
• formmethod - позволяет указать HTTP-метод отправки формы. Возможные значения: get (по умолчанию) - передача данных формы на сервер в виде строки, post - для отправки данных формы с телом сообщения.
• formnovalidate - позволяет отключить валидацию формы.
• formtarget - позволяет указать где отображать результат отправки формы. Возможные значения: _self (по умолчанию) - в той же вкладке, _blank - в новой вкладке, _parent - в родительском окне, если документ помещен во фрейм, _top - в самом верхнем родительском фрейме.
• name - позволяет указать имя кнопки, которое передаётся вместе с отправляемыми данными формы.
• type - позволяет указать тип кнопки. Возможные значения: submit - отправка формы, reset - сброс формы, button - обычная кнопка.
• value - позволяет указать значение кнопки, которое передаётся на сервер.

Также поддерживает глобальные атрибуты.

Примеры использования тега button

Простая кнопка

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

Кнопка, которую нельзя нажать или перевести на неё фокус

<button disabled>Неактивная кнопка</button>

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

<form action="/submit">
  <button type="submit">Отправить форму</button>
</form>

Кнопка с изображением

<button type="button">
  <img src="icon.png" alt="иконка">
  Кнопка с иконкой
</button>

Кнопка с выполнением скрипта

<button onclick="alert('Вы нажали кнопку!')">Нажми меня</button>

Этот код создает кнопку, которая вызывает всплывающее окно при нажатии.

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

• Указывайте атрибут type для кнопки, чтобы избежать неожиданных действий.
• Добавляйте состояние hover и focus для лучшего UX - пользовательского опыта.
• Используйте disabled для неактивных кнопок.
• Не забывайте о стилях. Кнопки должны быть видимыми и понятными для пользователей.
• Делайте кнопки достаточно большими для удобного нажатия. Deque University рекомендует делать содержимое кнопки не менее 24 px в ширину или на расстоянии не менее 10 px от других элементов.
• Используйте осмысленный текст на кнопках для улучшения SEO. Deque University рекомендует заполнять атрибут title или aria-label, если кнопка не содержит текста. Так кнопка будет доступна программам чтения с экрана.
• Для навигации лучше использовать ссылки, чем кнопки. Они имеют семантическое значение и помогают поисковым системам и другим технологиям, таким как считывателям с экрана, правильно интерпретировать структуру сайта.

Часто задаваемые вопросы (FAQ)

1 Какие типы кнопок существуют?

Существует три основных типа кнопок: submit (отправка формы), reset (сброс формы) и button (обычная кнопка). Тип указывается через атрибут type.

2 Чем отличается button от input type='button'?

Тег button более гибкий в плане стилизации и может содержать другие HTML-элементы внутри себя, тогда как input type='button' может содержать только текст.

3 Как сделать кнопку неактивной?

Для этого используется атрибут disabled. Например: <button disabled>Кнопка</button>

Заключение

Тег button является важным элементом интерактивного взаимодействия на веб-странице. Правильное использование этого тега и его атрибутов поможет создать удобный и понятный пользовательский интерфейс.

Для получения дополнительной информации о теге button, рекомендуем ознакомиться с официальной документацией на MDN.