Тег <button>

Кнопка
  • Категории: Потоковое содержимое, Фразовое содержимое, Интерактивное содержимое
  • Контекст:

    Где ожидается фразовое содержимое.

  • Модель:

    Фразовое содержимое, но без интерактивных элементов.

Тег <button> (от англ. "button" - кнопка) предназначен для создания кнопок с произвольным содержимым. Такие кнопки могут использоваться в пределах формы и имеют для этого три соответствующих типа:

  • submit - отправка формы
  • reset - сброс формы
  • button - кнопка без действия

Если атрибут type опущен и кнопка находится в пределах формы, то она автоматически ведет себя как кнопка с типом submit, а за пределами формы, как кнопка без действий. Однако хорошей практикой является явное указание типа кнопки во всех случаях.

Тег <button> также используется и для создания некоторых элементов интерфейса:

  • кнопки пагинации и перелистывания слайдера
  • кнопка закрытия модального окна
  • и т.д.

Управляются такие кнопки при помощи JavaScript.

Атрибуты

  • Глобальные атрибуты
  • autofocus - автоматический фокус при загрузке страницы
  • disabled - отключен ли контроль формы
  • form - связь с формой
  • formaction - URL-адрес для отправки формы
  • formenctype - тип кодирования данных при отправке формы
  • formmethod - метод HTTP при отправке формы
  • formnovalidate - обход проверки контроля формы
  • formtarget - контекст для отправки формы
  • name - имя элемента формы
  • type - тип кнопки
  • value - значение элемента

  • Отправка формы

    Элемент <button> может быть использован для отправки формы. Для этого ему достаточно задать тип submit. Несмотря на то, что все кнопки внутри формы автоматически ведут себя как кнопки с типом submit, лучше указать это явный образом.

    Для сброса формы мы также используем элемент <button>, но уже с типом reset:

  • Элемент интерфейса

    Элемент <button> можно использовать и вне формы, как элемент интерфейса. Например, это могут быть кнопки пагинации слайдера, кнопка закрытия модального окна и т.д. В таком случае кнопкам задается тип button, а их дальнейшее поведение определяется через JavaScript:

Поделитесь данной записью с друзьями