</> Praktum

Главная / HTML / button

Справочник HTML

Тег <button>: кнопка действия

Кнопка запускает действие: отправляет форму, открывает меню или меняет интерфейс. Для перехода на другую страницу используй ссылку.

Типы кнопок

<button type="submit">Отправить</button>
<button type="button">Открыть меню</button>
<button type="reset">Сбросить</button>

Внутри form значение по умолчанию обычно submit. Для обычного действия всегда указывай type="button".

Disabled

disabled отключает кнопку и исключает её из навигации клавиатурой. Если действие временно недоступно, объясни пользователю причину.

Доступность

Текст кнопки должен описывать действие. Иконке без текста добавь доступное имя через aria-label. Не удаляй видимый фокус.

Ошибки

  • Кнопка без type внутри формы.
  • Ссылка оформлена как button без необходимости.
  • Непонятный текст «ОК» или «Далее» без контекста.

Попробуй

Создай кнопку открытия меню и кнопку отправки формы с правильными type.

Как избежать случайной отправки формы

Внутри form кнопка без type по умолчанию работает как submit. Это удобно для основной отправки, но кнопка открытия подсказки или переключения вкладки может неожиданно отправить форму. Для таких действий явно указывай type="button". Сброс через type="reset" используют редко, потому что пользователь может потерять введённые данные.

Текст кнопки должен описывать действие: «Сохранить профиль» понятнее, чем «Готово». Одной иконке нужен доступный текст через aria-label, а декоративную иконку внутри текстовой кнопки лучше скрыть от программ чтения. disabled полностью исключает элемент из взаимодействия; если нужно объяснить причину недоступности, иногда лучше оставить кнопку доступной и показать сообщение.

Разберём рабочий пример

<form>
  <label>Имя <input name="name" required></label>
  <button type="button" id="preview">Предпросмотр</button>
  <button type="submit">Сохранить профиль</button>
</form>

Не копируй пример вслепую: измени данные, убери одну строку и посмотри, как меняется результат. Такой эксперимент быстрее показывает роль каждой части кода, чем простое чтение.

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

  • У каждой кнопки явно указан type.
  • Название описывает результат нажатия.
  • У кнопки-иконки есть доступное имя.
  • Состояния focus и disabled различимы.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.

Практикум по теме

Ещё в разделе HTML