Кнопка html button: Тег | HTML справочник – : The Button element — Web technology for developers

Содержание

Тег | HTML справочник

HTML теги

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
autofocusautofocusЛогический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disableddisabledЯвляется логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
formform_idЗадает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formactionURLУказывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = "submit" >).
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = "submit" >).
formmethodget
post
Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = "submit" >).
formnovalidateformnovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = "submit" >).
formtarget_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 пикселей:

  • Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
  • Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
  • Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

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

Пример использования тега <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 по умолчанию). Кроме того, атрибутом formtarget со значением "_blank" указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.

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

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

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

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

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

Нет.

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

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

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

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

| Справочник HTML



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

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

Совет: Используйте тег <input> для создания кнопок внутри HTML форм.

Синтаксис

<button>...</button>

Закрывающий тег

Обязателен.

Атрибуты

autofocusHTML5
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
formHTML5
Связывает между собой форму и кнопку.
formactionHTML5
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку (только для <button type = "submit">).
formenctypeHTML5
Способ кодирования данных формы (только для <button type = "submit">).
formmethodHTML5
Указывает метод пересылки данных формы (только для <button type = "submit">).
formnovalidateHTML5
Отменяет проверку формы на корректность (только для <button type = "submit">).
formtargetHTML5
Открывает результат отправки формы в новом окне или фрейме (только для <button type = "submit">).
name
Определяет уникальное имя кнопки.
type
Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

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

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

Элемент <button>

Пример HTML:

Попробуй сам
<p><button>Кнопка с текстом</button></p>
<p><button><img src="images/Star.png" alt="Звезда" 
style="vertical-align: middle"> Кнопка с рисунком</button></p>

Спецификации

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

Элемент
<button> 4+ 1+ 6+ 1+ 1+ 1+
Элемент
<button> 1+ 1+ 6+ 1+


Кнопка

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Кнопку можно задать с помощью парного тега <button>...</button>. Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

Атрибуты тега <button>
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
<button autofocus>...</button> <button autofocus="">...</button> <button autofocus="autofocus">...</button>

Атрибут не работает в Internet Explorer версии 9 и ниже.

disabled
Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами:
<button disabled>...</button>
<button disabled="">...</button>
<button disabled="disabled">...</button>
form
Идентификатор формы, к которой относится кнопка.

Атрибут не работает в Internet Explorer.

formaction
Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега <form> указан атрибут action, то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formenctype
Способ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:
  • application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain – пробелы преобразуются в символ "+", символы не кодируются.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formmethod
Метод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:
  • get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
  • post – данные формы передаются отдельно, как HTTP.
Если для тега <form> указан атрибут method, то атрибут formmethod переопределяет его значение.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formnovalidate
Отмена проверки формы на корректность. Используется только для кнопок типа
submit
. Значение можно задать тремя способами:
<button formnovalidate>...</button>
<button formnovalidate="">...</button>
<button formnovalidate="formnovalidate">...</button>

Атрибут не работает в Internet Explorer версии 9 и ниже.

formtarget
Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit. Возможные значения:
  • _blank – В новом окне или вкладке,
  • _self – В текущем окне (по умолчанию),
  • _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
  • _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
  • имя_фрейма – В iframe с указанным именем.

Атрибут не работает в Internet Explorer версии 9 и ниже.

name
Имя кнопки.
type
Тип кнопки. Возможные значения:
  • button – Просто кнопка (по умолчанию),
  • submit – Кнопка завершения работы и передачи данных,
  • reset – Кнопка сброса.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Пример кнопки с рисунком
<button>
    Кто это?<br>
    <img src="be.gif" alt="Людвиг ван Бетховен">
</button>

РЕЗУЛЬТАТ:

Кто это?
Людвиг ван Бетховен

Можно вместо рисунка вставить что угодно, хоть таблицу, если вам это необходимо.

Пример кнопки с таблицей
<button>
    <br>
    <table>
        <tr>
            <td>нажми на кнопку</td>
            <td>получишь результат</td>
        </tr>
    </table>
    <br>
</button>

РЕЗУЛЬТАТ:


нажми на кнопку получишь результат


Создание кнопок при помощи тега

Элемент 'button', формирующийся парным тегом <button> (от англ. buttonкнопка), используется для создания кнопок, тип которых определяется атрибутом type. В качестве значений атрибут может принимать следующие три:

  • "button" – создает обычную кнопку;
  • "reset" – создает кнопку сброса формы в первоначальное состояние;
  • "submit" – создает кнопку отправки данных формы на сервер.

По своему действию элемент 'button' очень похож на элемент 'input' с аналогичными значениями атрибута type, но при этом он не является пустым элементом и позволяет размещать внутри себя другие элементы, например, изображения, которые потом становятся одной активной кнопкой. А далее, используя стили CSS, можно изменять внешний вид кнопки по своему усмотрению.

Помимо атрибута type элемент 'button' имеет еще ряд уже известных нам атрибутов: autofocus, disabled, form, formnovalidate, formaction, formenctype, formmethod, formtarget, name, value. Их можно посмотреть в нашем справочнике здесь.

Опять же, не стоит забывать, что собственные атрибуты кнопок переопределяют значения соответствующих атрибутов, если они указаны в элементе 'form'.

Использование элемента 'button' показано в примере №1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Элемент 'button'</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<!-- Связываем текст с текстовым полем -->
		<label for="comment"> Оставить сообщение: </label> <br><br>
		
		<textarea cols="40" rows="10" wrap="hard">
Запрещается употреблять нецензурные выражения.
		</textarea> <br><br> 
		
		<!-- Создаем кнопку отправки комментария на сервер -->
		<button type="submit" name="submit_button" disabled>
			Отправить на форум
		</button>
	
	</form>
</body>
</html>

Пример №1. Использование элемента 'button'

Обратите внимание, что кнопка отправки неактивирована. Обычно это делается для того, чтобы кнопка не использовалась до тех пор, пока в поле не будет введен текст. После ввода минимального количества символов, которое устанавливается скриптами, кнопка активируется (опять же скриптами) и становится доступной для использования.

HTML тег button

Тег <button> определяет кнопку формы.

Внутри элемента <button> можно помещать контент — текст или изображения. Это основное отличие кнопок созданных при помощи этого элемента и элемента <input>.

При определении элемента <button> следует всегда задавать атрибут type, так как разные браузеры по умолчанию определяют разные типы для элемента <button>.

При использовании элемента <button> в HTML форме разные браузеры могут передавать разные значения. Поэтому в HTML формах для создания кнопок лучше использовать элемент <input>.

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

Атрибут Описание
autofocus Автоматически передает фокус элементу
disabled Отключает кнопку
form Определяет к какой форме относится элемент
formaction Определяет, куда будут отправлены данные формы
formenctype Определяет способ кодировки отправляемых на сервер данных формы
formmethod Определяет метод отправки на сервер данных формы
formnovalidate Отключает встроенную проверку корректности введенных данных формы
formtarget Определяет, куда загружать ответ сервера после отправки данных формы
name Определяет имя элемента кнопки
type Определяет тип кнопки
value Определяет значение для кнопки

Общие атрибуты

Тег <button> поддерживает общие атрибуты и атрибуты-события.

HTML пример

HTML кнопка:


<button type="button">Нажми меня!</button>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *