Атрибуты button: : The Button element — Web technology for developers – Тег button и его атрибуты — создание кнопок на сайте | Создание сайтов и заработок в сети

Содержание

Атрибут value тега | HTML справочник

HTML тег <button>

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

Атрибут value (HTML тега <button>) определяет начальное значение для кнопки.

Обращаю Ваше внимание, что необходимо определять различные значения для кнопок в пределах одной формы, а имена кнопок допускается использовать одинаковые (атрибут name). Значение кнопки может использоваться при работе клиентских скриптов на языке Javascript.

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

Синтаксис:

<button value = "value">

Значения атрибута

ЗначениеОписание
valueОпределяет начальное значение для кнопки.

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

Нет.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута value HTML тега <button></title>
	</head>
	<body>
		<form>
			Choose your destiny:<br>
			<button name = "destiny" type = "submit" value = "novice">Novice</button>
			<button name = "destiny" type = "submit" value = "warrior">Warrior</button>
			<button name = "destiny" type = "submit" value = "master">Master</button>
			<button name = "destiny" type = "submit" value = "grandmaster">Grandmaster</button>
		</form>
	</body>
</html>

В данном примере мы:

  • Создали четыре элемента <button> с типом, предназначенным для отправки данных формы на сервер (атрибут type).
  • Атрибутом name присвоили для каждой кнопки одинаковое имя.
  • Атрибутом value указали уникальные значения для каждой кнопки.

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

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

Тег


Кликабельная кнопка помечается следующим образом:


Определение и использование

Tег <button> определяет кликабельную кнопку.

Внутри элемента <button> можно поместить содержимое, например текст или изображения. Это разница между элементом и кнопками, созданными с помощью элемента <input>.

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

<button>.


Поддержка браузеров

Элемент
<button> Да Да Да Да Да

Советы и примечания

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

Совет: Посетить, Учебник CSS Кнопки чтобы узнать, как стилизовать кнопки с помощью CSS.


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

HTML5 имеет следующие новые атрибуты: autofocus, form, formaction, formenctype, formmethod, formnovalidate, и formtarget.


Атрибуты

= новым в HTML5.

Атрибут Значение Описание
autofocus autofocus Указывает, что кнопка должна автоматически получать фокус при загрузке страницы
disabled disabled Указывает, что кнопка должна быть отключена
form form_id Указывает одну или несколько форм, к которым принадлежит кнопка
formaction URL Указывает, куда отправлять данные формы при отправке формы. Только для type="submit"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Указывает, как данные форм должны быть закодированы перед отправкой на сервер. Только для type="submit"
formmethod get
post
Указывает способ отправки данных формы (какой метод HTTP использовать). Только для type="submit"
formnovalidate formnovalidate Указывает, что данные формы не должны проверяться при отправке. Только для type="submit"
formtarget _blank
_self
_parent
_top
framename
Указывает, где должен отображаться ответ после отправки формы. Только для type="submit"
name name Задает имя для кнопки
type button
reset
submit
Определяет тип кнопки
value text Задает начальное значение для кнопки

Глобальные атрибуты

Tег <button> также поддерживает Глобальные атрибуты в HTML.


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

Tег <button> также поддерживает Атрибуты событий в HTML.


Связанные страницы

Учебник CSS: Стиль кнопок

Справочник HTML DOM: Объект dutton


Настройки CSS по умолчанию

Нет.


Атрибут formtarget тега | HTML справочник

HTML тег <button>

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

Атрибут formtarget (HTML тега <button>) задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только для <button type = "submit".


Обращаю Ваше внимание, что если атрибут formtarget используется, то он переопределяет значение атрибута target элемента <form>.


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

Синтаксис:

<button formtarget = "_blank | _self | _parent | _top | framename">

Значения атрибута

ЗначениеОписание
_blankОтвет будет отображен в новом окне или вкладке
_selfОтвет отображается в том же окне. Это значение по умолчанию.
_parentОтображает ответ во фрейм родителе, если фреймов нет, то это значение работает как _self.
_topЗагружает ответ в полном исходном окне, и отменяет все остальные фреймы. Если нет родителей, то ведет себя точно так же, как _self.
framenameОтвет отображается в окне <iframe> с указаным именем.

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

Атрибут считается новым в HTML 5.

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

<!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 тег <button>

HTML тег button | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 23.01.2011

Тег <button> (с англ. кнопка) — тег-контейнер, создает на форме кнопку.

Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<form>
<button>...</button>
</form>

Атрибуты

Основные Вспомогательные События

acceskey указываем горячую кнопку, при нажатии которой (+Alt) срабатывает кнопка
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
disabled флаг. Делает кнопку неактивной
id уникальный идентификатор
lang определяет используемый язык
name уникальное имя кнопки
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
tabindex порядок обхода элементов с помощью Tab
title добавляет всплывающую подсказку
type тип кнопки:
  • button — обычная кнопка
  • reset — сброс данных, введенных пользователем
  • submit — отправляет данные на сервер (по умолчанию, кроме IE)
value значение кнопки (текстовая строка, которая будет отправлена на сервер)

Пример

<form action="#">

<div>
<label for="inpSearch">Я ищу:</label>
<input name="inpSearch" value="свои очки"/>
<button type="submit">найти</button>
</div>
</form>

Рекомендации по использованию

  • закрывающий тег обязателен (</button>)
  • обязательных атрибутов нет
  • может содержать CDATA, строчные и блочные элементы кроме ссылок, форм, элементов форм и фреймов
  • IE добавляет внутренние отступы слева и справа
  • по умолчанию в IE (как минимум 6) тип кнопки tupe="button", в других браузерах — type="submit"
  • при использовании тега <button> внутри формы, при отправке данных на сервер (событие submit) разные браузеры отправляют разные значение кнопки: большинство браузеров отправляет в качестве значения параметр value, другие (в частности IE) отправялет текст, содержащийся между <button></button>

Тег <button> создает кнопки такие же, как и кнопки, созданные тегом <input>, но дают больше возможностей представления, так как элемент button может иметь содержимое

Твой код:
<html> <head> <title></title> </head> <body> <form action="#"> <div> <label for="inpSearch">Я ищу:</label> <input name="inpSearch" value="свои очки"/> <button type="button">найти</button> </div> </form> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Атрибут autofocus тега | HTML справочник

HTML тег <button>

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

Логический атрибут autofocus (HTML тега <button>) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.

Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).

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

Синтаксис:

<button autofocus>

Значения атрибута

ЗначениеОписание
autofocusЗначение атрибута требуется только в XHTML (<button autofocus = "autofocus">).

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

Атрибут считается новым в HTML 5.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута autofocus HTML тега <button></title>
	</head>
	<body>
		<form>
			<button name = "button" type = "button">Кнопка</button>
			<button name = "focusButton" type = "button"><b>Жми!!!</b></button>
		</form>
	</body>
</html>

В данном примере мы создали две кнопки (HTML тег <button>), атрибутом name укаали им уникальные имена. Для второй кнопки атрибутом autofocus задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).

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

Пример использования атрибута autofocus HTML тега <button> (фокус для элемента).HTML тег <button>

Атрибут form тега | HTML справочник

HTML тег <button>

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

Атрибут form (HTML тега <button>) задает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

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

Синтаксис:

<button form = form_id>

Значения атрибута

ЗначениеОписание
form_idИдентификатор формы (id) к которой элемент <button> принадлежит.

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

Атрибут считается новым в HTML 5.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута form HTML тега <button></title>
	</head>
	<body>
		<form id = "myForm">
			Логин:<input type = "text" name = "ulogin"><br> <!-- определяем элемент управления для текстовой информации -->
			Пароль:<input type = "password" name = "upassword"><br> <!-- определяем элемент управления для ввода пароля -->
		</form>
		<button form = "myForm" type = "submit">Отправить</button> <!-- определяем кнопку для отправки формы -->
	</body>
</html>

В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля. Кнопку (HTML тег <button>) мы разместили за пределами формы и атрибутом form указали, что кнопка предназначена для отправки именно этой формы (значением атрибута служит id формы).

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

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

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

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