HTML теги
  • Валидация тегов
  • <!-- -->
  • <!DOCTYPE>
  • <a>
    • download
    • href
    • rel
    • target
    • type
  • <abbr>
  • <acronym>
  • <address>
  • <applet>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
    • href
    • target
  • <basefont>
  • <bdi>
  • <bdo>
  • <bgsound>
  • <bdi>
  • <bdo>
  • <bgsound>
  • <big>
  • <blink>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <center>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <comment>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dir>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <form>
  • <footer>
  • <form>
  • <frame>
  • <frameset>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <isindex>
  • <kbd>
  • <keygen>
  • <label>
    • for
  • <legend>
  • <li>
  • <link>
  • <listing>
  • <main>
  • <map>
  • <mark>
  • <marquee>
  • <menu>
  • <meta>
  • <meter>
  • <multicol>
  • <nav>
  • <nobr>
  • <noembed>
  • <noframes>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <plaintext>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <spacer>
  • <span>
  • <strike>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>
  • <xmp>

Тег <button>

  • IE
    8.0+
  • Chrome
    1.0+
  • Opera
    6.0+
  • Safari
    1.0+
  • Firefox
    1.0+
  • Android
    1.0+
  • iOS
    1.0+

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

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <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>
	<style>
		form {text-align:center; margin-bottom:20px;}
		button img {vertical-align: middle;}
	</style>
 </head>
 <body>
	<form>
	<button>Кнопка с текстом</button>
	</form>

	<form>
	<button><img src="/assets/images/coffee.png" alt="">Заказать</button>
	</form>
 </body>
</html>

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

Вид кнопок в браузере

Браузеры

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

Категория: Универсальные элементы, Формы

Статьи по теме
  • Кнопки
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru