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
Примеры
<!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
<!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