Тег <button>

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

Основное практическое применение тег <button> имеет в связке с Java Script или PHP и зачастую располагается внутри какой-нибудь формы, образованной тегом <form>, но так же тег <button> можно использовать как самостоятельный элемент. В этом случае браузеры корректно отображают кнопку, но стоит заметить, что если вы хотите после нажатия на кнопку отправлять результат на сервер, то тег <button> обязательно должен находиться внутри контейнера <form>.

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

accesskey - с помощью горячих клавиш дает доступ к элементам формы.

autofocus - устанавливает, что после загрузки страницы, кнопка получает фокус.

disabled - блокирует доступ к элементу и не дает его изменять.

form - связывает форму и активную кнопку между собой.

formaction - указывает адрес, на который будут пересылаться данные формы после того как нажали на кнопку.

formenctype – кодирует данные формы.

formmethod - устанавливает метод , с помощью которого пересылаются данные формы.

formnovalidate – делает отмену проверки формы на корректность.

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

name – задает кнопке уникальное имя.

type – задает для кнопки тип.

value – устанавливает значение кнопки, которое отправляется на сервер.

Для тега <button> также доступны универсальные атрибуты и события.

Пример

        
<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег BUTTON</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p style="text-align: center">
      <button>Активная кнопка</button>
    <p>
  </body>
</html>
			 
            
Смотреть пример