Кнопка - <button>

Кнопку можно задать с помощью парного тега <button>...</button>. Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

Атрибуты тега <button>

autofocus

Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

<button autofocus>...</button>
<button autofocus="">...</button>
<button autofocus="autofocus">...</button>

Атрибут не работает в Internet Explorer версии 9 и ниже.

disabled

Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами:

<button disabled>...</button>
<button disabled="">...</button>
<button disabled="disabled">...</button>

form

Идентификатор формы, к которой относится кнопка.

Атрибут не работает в Internet Explorer.

formaction

Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега <form> указан атрибут action, то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formenctype

Способ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:

• application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain – пробелы преобразуются в символ "+", символы не кодируются.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formmethod

Метод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:

• get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
• post – данные формы передаются отдельно, как HTTP.

Если для тега <form> указан атрибут method, то атрибут formmethod переопределяет его значение.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formnovalidate

Отмена проверки формы на корректность. Используется только для кнопок типа submit. Значение можно задать тремя способами:

<button formnovalidate>...</button>
<button formnovalidate="">...</button>
<button formnovalidate="formnovalidate">...</button>

Атрибут не работает в Internet Explorer версии 9 и ниже.

formtarget

Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit. Возможные значения:

• _blank – В новом окне или вкладке,
• _self – В текущем окне (по умолчанию),
• _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
• _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
• имя_фрейма – В iframe с указанным именем.

Атрибут не работает в Internet Explorer версии 9 и ниже.

name

Имя кнопки.

type

Тип кнопки. Возможные значения:

• button – Просто кнопка (по умолчанию),
• submit – Кнопка завершения работы и передачи данных,
• reset – Кнопка сброса.

value

Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Для тега <button> также доступны общие атрибуты и атрибуты обработки событий.

Пример кнопки с рисунком

<button onclick="alert('Людвиг ван Бетховен (1770 – 1827)')">
    Кто это?<br>
    <img src="be.gif" alt="Людвиг ван Бетховен" height="115" width="100">
</button>

РЕЗУЛЬТАТ:

Кто это?

Можно вместо рисунка вставить что угодно, хоть таблицу, если вам это необходимо.

Пример кнопки с таблицей

<button>
    <br>
    <table style="border-collapse: collapse;">
        <tr>
            <td style="border:1px #666 solid;">нажми на кнопку</td>
            <td style="border:1px #666 solid;">получишь результат</td>
        </tr>
    </table>
    <br>
</button>