Атрибут 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
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 | определяет направление символов:
|
| disabled | флаг. Делает кнопку неактивной |
| id | уникальный идентификатор |
| lang | определяет используемый язык |
| name | уникальное имя кнопки |
| onblur | потеря фокуса элементом |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onfocus | получение фокуса элементом |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| tabindex | порядок обхода элементов с помощью Tab |
| title | добавляет всплывающую подсказку |
| type | тип кнопки:
|
| 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>