HTML :: Тег <button>

В HTML тег <button> (от англ. button – кнопка) используется для создания кликабельных кнопок, тип которых определяется атрибутом type. Разрешается использовать внутри элемента <button> не только текст, но и другие элементы, например, изображения, которые в результате такой манипуляции становятся одной активной кнопкой.

Кнопки <button> могут использоваться не только в формах, но и в любом другом месте документа, где может потребоваться стандартная кликабельная кнопка. Внешний вид такой кнопки отличается от браузера к браузеру, однако его всегда можно изменить при помощи CSS.

Если для формы, связанной с данной кнопкой, указаны атрибуты novalidate, action, enctype, method, target, то соответствующие атрибуты кнопки в случае применения переопределяют их.

Синтаксис

	<button>...</button>		
	
	Закрывающий тег: обязателен.

Атрибуты

autofocus – данный логический атрибут устанавливает фокус кнопке после загрузки страницы. В результате такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры. Если атрибут задан сразу для нескольких элементов на странице (необязательно кнопке), то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает.
disabaled – данный логический атрибут делает кнопку неактивной. Это может понадобиться в случаях, когда нужно, например, чтобы кнопка стала доступной только после заполнения предварительных полей формы. До этого момента пользователь не сможет взять ее в фокус и отправить данные на сервер. Атрибут по умолчанию выключен и значений не принимает.
form – связывает кнопку с формой, в качестве значения принимая соответствующее значение атрибута id формы. Это может потребоваться в случае, когда кнопка расположена за пределами формы.
formaction – указывает полный или относительный путь к серверной программе-обработчику, которой будут передаваться данные формы после нажатия на кнопку и отправки их на сервер.
formnovalidate – данный логический атрибут отменяет встроенную проверку данных вводимых пользователем в поля формы на ошибки. Значений не принимает и по умолчанию выключен.
formenctype – устанавливает способ кодирования отправляемых данных. Может принимать значения:
- "application/x-www-form-urlencoded" – применяется по умолчанию и подходит для большинства случаев,
- "multipart/form-data" – следует использовать при отправке файлов,
- "text/plain" – кодирует данные в виде простого текста, только заменяя пробелы знаком + (требуется редко, например, может быть полезен при отправке данных формы по электронной почте).
formmethod – определяет метод отправки данных формы на сервер. Принимает значения formmethod="GET" (по умолчанию) или formmethod="POST".
formtarget – сообщает имя целевого окна или фрейма, в котором будет открыт результат отправки данных формы. В качестве значений может принимать:
- _self – документ будет открываться в текущем окне или фрейме (используется по умолчанию);
- _blank – документ будет открываться в новом окне или фрейме;
- _parent – документ будет открываться в родительском фрейме, а в случае отсутствия такового, в текущем окне;
- _top – документ будет открываться в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как _self;
- name – имя фрейма, в котором будет открываться документ; если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне.
name – задает уникальное имя кнопки. Как правило, это имя используется при отправке данных формы на сервер или для доступа к ней через скрипты. Если нескольким кнопкам задать одинаковое имя, то на сервер можно будет отправлять разные значения формы в зависимости от нажатой кнопки.
type – устанавливает тип кнопки:
- type="button" – создает обычную кнопку,
- type="reset" – создает кнопку сброса формы в первоначальное состояние,
- type="submit" – создает кнопку отправки данных формы на сервер.
value – устанавливает текстовую надпись для кнопки (например, value="Отправить").
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/button

Примеры

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
  <form action="php/reg.php" method="POST">
          
    <!-- Какие-то поля формы --> 
   
   <!-- Создаем неактивную кнопку отправки данных на сервер -->
    <button type="submit" name="sub_button" disabled>
      Отправить
    </button>
   
  </form>	
</body>
</html>

Пример №1

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
  
  <form action="php/reg.php" method="POST" id="reg_form">
          
    <!-- Какие-то поля формы --> 

  </form>

   
   <!-- Создаем кнопки с одинаковым именем вне формы -->
   <!-- Связываем кнопки с одной и той же формой -->
   <button type="submit" form="reg_form" name="user">
     Новичок
   </button>
	
   <button type="submit" form="reg_form" name="user">
     Продвинутый
   </button>	
	
</body>
</html>

Пример №2