HTML-тег <button>

Характеристики

• Тип: строчный, интерактивный, семантический
• Назначение: Создание интерактивной кнопки.
• Родители: Любые HTML-теги, которые могут содержать строчные элементы.
• Потомки: Текст и любые строчные HTML-теги.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• type — Определяет тип кнопки (button, submit, reset).
• disabled — отключает кнопку.
• value — определяет значение кнопки.
• form — связывает кнопку с формой, если она находится вне её.
• formaction — указывает URL, куда отправляются данные формы при нажатии кнопки.
• formenctype — определяет тип кодировки данных формы при отправке.
• formmethod — задает метод отправки данных формы (GET или POST).
• formnovalidate — отключает проверку данных формы при отправке.
• formtarget — определяет, где будет отображаться ответ сервера (_self, _blank и т.д.).

Пример использования

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

Использование в JavaScript

// Получение элемента по ID
const buttonElement = document.getElementById('myButton');

// Изменение текста кнопки
buttonElement.innerHTML = 'Новая кнопка';

// Добавление класса
buttonElement.classList.add('new-class');

// Отключение кнопки
buttonElement.disabled = true;

Рекомендации по обеспечению доступности (a11y)

• Используйте <button> для создания интерактивных элементов, это обеспечивает лучшую поддержку доступности.
• Кнопки должны быть доступны для клавиатурной навигации.
• При необходимости используйте ARIA-атрибуты для улучшения доступности.

Полезные ссылки