Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Тег button

Дата:26.09.15 в 11:30
Справочник: 

Характеристики тега

В каких браузерах работает?

8.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

В каких спецификациях используется?

HTML - 4.01 5.0
XHTML 1.0 1.1

Для чего используется?

Тег <button> отвечает за создание кнопки. В сравнении с распространенным input, который тоже часто используется и в качестве кнопки тоже, имеет более широкие возможности. К примеру, на кнопке, которая задана тегом <button>, можно поместить изображение или какой-либо другой элемент верстки HTML.

Чаще всего данный тег используют при создании формы в качестве кнопки ее отправки, однако допускается использование <button> и без формы, как самостоятельный элемент. Однако при формировании кнопки, которая совершает отправку на сервер, использование <button> внутри form обязательно.

Как правильно задавать?

<form>
  <button>Название кнопки</button>
</form>

Какие атрибуты поддерживаются?

  • accesskey - назначение гарячих клавиш для активации действия объекта.
  • autofocus - объект получает фокус сразу после загрузки веб-страницы.
  • disabled - запрещает доступ к редактированию объекта.
  • form - привязывает кнопку к определенной форме.
  • formaction - определяет местоположение хранилища, куда отправляется заполненная форма с информацией.
  • formenctype - метод перекодировки информации с формы.
  • formmethod - объясняет, каким способом данные пересылаются на сервер.
  • formnovalidate - отключает проверку правильности заполнения формы.
  • formtarget - результат итога заполнения формы выводится в соседнем окне.
  • name - системное название кнопки.
  • type - определяет типологию кнопки.
  • value - информация о кнопке, которая применяется при использовании скрипта или отправки формы на сервер.

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

Закрытый тег

Нет.

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

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег button</title>
 </head>
 <body>
  <p style="text-align: center"><button>Просто кнопка</button>
  <button><img src="ok.png" alt="ok" 
          style="vertical-align: middle">Кнопка с картинкой</button></p>
 </body>
</html>

По итогу получаем

button

Оценка: 
Оценок: 1 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям: