HTML тег <button>

HTML теги

Значение и применение

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = "button").

Всегда указывайте для тега <button> тип атрибута type = "button" если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<button>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
autofocushtml5autofocusЛогический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disableddisabledЯвляется логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
formhtml5form_idЗадает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formactionhtml5URLУказывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = "submit" >).
formenctypehtml5application/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = "submit" >).
formmethodhtml5get
post
Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = "submit" >).
formnovalidatehtml5formnovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = "submit" >).
formtargethtml5_blank
_self
_parent
_top
framename
Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Используется только для <button type = "submit" >.
namenameЗадает имя для кнопки, которое передается при отправке формы.
typebutton
reset
submit
Указывает тип кнопки. Значение по умолчанию submit.
valuetextОпределяет начальное значение для кнопки.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Тег <button></title>
	</head>
	<body>
		<button type = "button" name = "button1" style = "width: 80px; height:50px;">
			<b>Кнопка 1</b>
		</button><br><br>
		<button type = "button" name = "button2" style = "width: 80px; height:50px">
			<img src = "../../images/top2.png" alt = "up" width = "40" height = "40">
		</button><br><br>
		<button type = "button" name = "button3" style = "width: 80px; height:50px;">
			<i>Кнопка 3</i>
		</button><br><br>
	</body>
</html>

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

Результат нашего примера:

Пример использования тега <button> (кнопкa в HTML).
Пример использования тега <button> (кнопкa в HTML).

В следующем примере рассмотрено применение атрибутов, которые позволяют не производить проверку данных на корректность, введенных пользователем и задать браузеру, где показать ответ, полученный после отправки формы.

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title>
	</head>
	<body>
		<form id = "myForm">
			<input type = "text" name = "ulogin" placeholder = "Ваше имя"><br> <!-- определяем элемент управления для текстовой информации -->
			<textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос"></textarea><br>
			<button formtarget = _blank formnovalidate>Отправить</button> <!-- определяем кнопку для отправки формы -->
		</form>
	</body>
</html>

В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtargethtml5 со значением "_blank" указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidatehtml5 указали, что проверка данных на корректность, введенных пользователем в форму не производится.

Результат нашего примера:

Пример использования  атрибутов formnovalidate и formtarget HTML тега <button>.
Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 7 новых атрибутов.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".
HTML теги