Тег BUTTON

В отличие от этого элемента, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты.

autofocus¶

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

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

По умолчанию это значение выключено.

disabled¶

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

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

По умолчанию это значение выключено.

form¶

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента , например, при создании её программно.

Идентификатор формы (значение атрибута id элемента ).

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

formaction¶

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .

formenctype¶

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .

button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" > . button> 

application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.

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

formmethod¶

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

button formmethod="get | post">. button> 

Различают два метода — GET и POST.

GET Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. POST Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate¶

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей , , а также при наличии атрибута pattern или required у элемента .

button formnovalidate>. button> 

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

По умолчанию этот атрибут выключен.

formtarget¶

Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

button formtarget=" | _blank | _self | _parent | _top" > . button> 

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

name¶

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

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

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

type¶

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

button type="button | reset | submit">. button> 

button Обычная кнопка. reset Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние. submit Кнопка для отправки данных формы на сервер. menu Открывает меню, созданное с помощью элемента .

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

value¶

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

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

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

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

 html> head> meta charset="utf-8" /> title>BUTTONtitle> head> body> p style="text-align: center"> button>Кнопка с текстомbutton> button> img src="image/umbrella.gif" alt="Зонтик" style="vertical-align: middle" /> Кнопка с рисунком button> p> body> html> 

Источник

Button name html css

Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=»button | reset | submit» ). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

Синтаксис

Атрибуты

accesskey Доступ к элементам формы с помощью горячих клавиш. autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

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

      
Кнопка с текстом   Кнопка с рисунком
  

Результат данного примера показан на рис. 1.

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value .

Источник

HTML Tag

Inside a element you can put text (and tags like , , ,
, , etc.). That is not possible with a button created with the element!

Tip: Always specify the type attribute for a element, to tell browsers what type of button it is.

Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.

Browser Support

Attributes

Global Attributes

Event Attributes

More Examples

Example

.button border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
>

Example

Use CSS to style buttons (with hover effect):

.button border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
>

.button1 background-color: white;
color: black;
border: 2px solid #4CAF50;
>

.button1:hover background-color: #4CAF50;
color: white;
>

.button2 background-color: white;
color: black;
border: 2px solid #008CBA;
>

.button2:hover background-color: #008CBA;
color: white;
>

Related Pages

Источник

Атрибут name

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

Значения

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

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

       
Нажать нежно
 
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

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

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник