В html button: Атрибут type | htmlbook.ru

: элемент Button HTML-элемент — это интерактивный элемент, активируемый пользователем с помощью мыши, клавиатуры, пальца, голосовой команды или другой вспомогательной технологии.

HTML-элемент <button> — это интерактивный элемент, активируемый пользователем с помощью мыши, клавиатуры, пальца, голосовой команды или другой вспомогательной технологии. После активации он выполняет запрограммированное действие, такое как отправка формы или открытие диалогового окна.

html.twig div имеет родительский элемент button,что недопустимо.Проблема в том,что кнопка может содержать только инлайн-элементы,а div является блочным элементом.

Тег <button> определяет кнопку, на которую можно нажать. Внутри элемента <button> вы можете поместить текст (и такие теги, как <i>, <b>, <strong>, <br>, <img> и т. д.). Это невозможно с помощью кнопки, созданной с помощью элемента <input>!

HTML — элемент <button> — это интерактивный элемент, активируемый пользователем с помощью мыши, клавиатуры, пальца, голосовой команды или другой вспомогательной технологии.

После активации он выполняет запрограммированное действие, такое как отправка формы или открытие диалогового окна.

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

Try it

Content categories	Поток контента , фразировка содержания , интерактивное содержания , перечисленные , labelable и submittable форм-ассоциированный элемент, ощутимое содержание.
Permitted content	Фразовое содержание, но не должно быть интерактивного содержания
Tag omission	Нет,и начальная и конечная метки обязательны.
Permitted parents	Любой элемент, допускающий фразовое содержание .
Неявная роль ARIA	button
Разрешенные роли АРИА	checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab
DOM interface	HTMLButtonElement

Attributes

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

autofocus

Этот логический атрибут указывает, что кнопка должна иметь фокус ввода при загрузке страницы. Только один элемент в документе может иметь этот атрибут.

autocomplete Non-standard

Этот атрибут в <button> нестандартен и специфичен для Firefox. В отличие от других браузеров, Firefox сохраняется динамическое отключенное состояние в виде

<button> по загрузке страницы. Установка autocomplete="off" на кнопку отключает эту функцию; см. ошибку 654072 .

disabled

Этот булевский атрибут не позволяет пользователю взаимодействовать с кнопкой:ее нельзя нажать или сфокусировать.

Firefox, в отличие от других браузеров, сохраняется динамическое отключенное состояние в виде <button> по загрузке страницы. Используйте атрибут autocomplete для управления этой функцией.

form

Элемент <form> , с которым связывается кнопка (ее владелец формы ). Значение этого атрибута должно быть id из <form> в том же документе. (Если этот атрибут не установлен,

<button> связан со своим родительским элементом <form> , если таковой имеется.)

Этот атрибут позволяет вам связывать элементы <button> с <form> в любом месте документа, а не только внутри <form> . Он также может переопределить элемент- предок <form> .

formaction

URL-адрес, обрабатывающий информацию, отправляемую кнопкой. Переопределяет атрибут action владельца формы кнопки. Ничего не делает, если нет владельца формы.

formenctype

Если кнопка является кнопкой отправки (она внутри / связана с <form> и не имеет type="button" ), указывает, как кодировать данные формы, которые отправляются. Возможные значения:

• application/x-www-form-urlencoded : значение по умолчанию, если атрибут не используется.
• multipart/form-data : используется для отправки элементов <input> с их атрибутами type установленными в file .
• text/plain : указан как средство отладки; не следует использовать для отправки реальной формы.

Если этот атрибут указан, он переопределяет атрибут enctype владельца формы кнопки.

formmethod

Если кнопка является кнопкой отправки (она внутри / связана с <form> и не имеет type="button" ), этот атрибут определяет HTTP-метод, используемый для отправки формы. Возможные значения:

• post : данные из формы включаются в тело HTTP-запроса при отправке на сервер. Используйте, когда форма содержит информацию, которая не должна быть общедоступной, например учетные данные для входа.
• get : данные формы добавляются к URL-адресу action формы с помощью ? в качестве разделителя, и полученный URL-адрес отправляется на сервер. Используйте этот метод, если форма не имеет побочных эффектов , например формы поиска.

Если указан, этот атрибут переопределяет атрибут method владельца формы кнопки.

formnovalidate

Если кнопка является кнопкой отправки, этот логический атрибут указывает, что форма не должна проверяться при отправке. Если этот атрибут указан, он переопределяет атрибут novalidate владельца формы кнопки.

Этот атрибут также доступен для элементов <input type="image"> и <input type="submit"> .

formtarget

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

Это name или ключевое слово для контекста просмотра (вкладка, окно или <iframe> ). Если этот атрибут указан, он переопределяет target атрибут владельца формы кнопки. Следующие ключевые слова имеют особое значение:

• _self : загрузить ответ в тот же контекст просмотра, что и текущий. Это значение по умолчанию, если атрибут не указан.
• _blank : загрузить ответ в новый безымянный контекст просмотра — обычно это новая вкладка или окно, в зависимости от настроек браузера пользователя.
• _parent : загрузить ответ в родительский контекст просмотра текущего. Если родителя нет, этот параметр действует так же, как
  _self .
• _top : загрузить ответ в контекст просмотра верхнего уровня (то есть контекст просмотра, который является предком текущего и не имеет родителя). Если родителя нет, этот параметр действует так же, как _self .

name

Имя кнопки, представленное как пара со значением кнопки value часть данных формы, когда эта кнопка используется для отправки формы.

type

Поведение кнопки по умолчанию.Возможные значения:

• submit : кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан для кнопок, связанных с <form> , или если атрибут является пустым или недопустимым значением.
• reset : кнопка сбрасывает все элементы управления в их исходные значения, например <input type = «reset»> . (Такое поведение имеет тенденцию раздражать пользователей.)
• button : кнопка не имеет поведения по умолчанию и ничего не делает при нажатии по умолчанию. Он может заставить клиентские скрипты прослушивать события элемента, которые запускаются при возникновении событий.

value

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

Notes

Кнопка отправки с установленным атрибутом formaction , но без связанной формы ничего не делает. Вы должны установить владельца формы, либо заключив его в <form> , либо установив для атрибута form идентификатор формы.

<button> Элементы <button> намного проще стилизовать, чем элементы <input> . Вы можете добавить внутренний HTML-контент (например, <i> , <br> или даже <img> ) и использовать ::after и ::before для сложного рендеринга.

Если ваши кнопки не предназначены для отправки данных формы на сервер, обязательно установите для их атрибута type значение button . В противном случае они попытаются отправить данные формы и загрузить (несуществующий) ответ, возможно, разрушив текущее состояние документа.

Example

<button name="button">Press me</button>

Accessibility concerns

Icon buttons

Кнопки, на которых отображается только значок, не имеют доступного имени . Доступные имена предоставляют информацию для вспомогательных технологий, таких как программы чтения с экрана, для доступа при анализе документа и создании дерева доступности . Затем вспомогательные технологии используют дерево специальных возможностей для навигации и управления содержимым страницы.

Чтобы дать кнопке-значку доступное имя, поместите текст в элемент <button> , который кратко описывает функциональность кнопки.

Example

<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h4l1-3 1 3h4L7 6z"/></svg>
  Add to favorites
</button>

Если вы хотите визуально скрыть текст кнопки, доступный способ сделать это — использовать комбинацию свойств CSS, чтобы визуально удалить его с экрана, но сохранить возможность его анализа с помощью вспомогательных технологий.

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

• Что такое доступное имя? | The Paciello Group
• MDN Понимание ВСАГ,Руководящий принцип 4.1 пояснения
• Понимание Критерий успеха 4.1.2 | W3C Понимание WCAG 2.0

Размер и близость

Size

Интерактивные элементы, такие как кнопки, должны иметь достаточно большую площадь, чтобы их было легко активировать. Это помогает разным людям, в том числе людям с проблемами управления моторикой и людям, использующим неточные формы ввода, такие как стилус или пальцы. Минимальный интерактивный размер 44×44 пикселей CSS рекомендуется.

• Понимание критерия успеха 2.5.5:целевой размер | W3C Понимание WCAG 2.1
• Размер цели и 2. 5.5 | Адриан Розелли
• Быстрый тест:Большие сенсорные мишени-Проект A11Y

Proximity

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

Интервал можно создать с помощью свойств CSS, например margin .

• Дрожание рук и гигантская проблема с кнопками-Лаборатория Эксесс.

Информация о состоянии ARIA

Для описания состояния кнопки правильным атрибутом ARIA является aria-pressed , а не aria-checked или aria-selected . Чтобы узнать больше, прочтите информацию о роли кнопки ARIA .

Firefox

Firefox добавит небольшую пунктирную рамку на кнопку с фокусом. Эта граница объявляется с помощью CSS в таблице стилей браузера, но вы можете переопределить ее, добавив собственный сфокусированный стиль, используя

button::-moz-focus-inner { } .

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

Коэффициент цветовой контрастности определяется путем сравнения яркости текста кнопки и значений цвета фона по сравнению с фоном, на котором расположена кнопка. Чтобы соответствовать текущим рекомендациям по доступности веб-контента (WCAG) , для текстового контента требуется соотношение 4,5:1, а для крупного текста — 3:1. (Большой текст определяется как 18,66 пикселей и bold или больше, или 24 пикселя или больше.)

• WebAIM:Проверка цветового контраста
• MDN Понимание СППН,Руководящий принцип 1.4 пояснения
• Понимание Критерий успеха 1.4.3 | W3C Понимание ВКПГ 2.0

---

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

---

HTML

• <body>: элемент тела документа

  HTML-элемент <body> представляет содержимое документа.

• <br>: элемент «Разрыв строки»

  HTML-элемент <br> создает текст разрыва строки (возврат каретки).

• Щелчок и фокус

  При нажатии на <кнопку> она (по умолчанию) становится сфокусированной, зависит от браузера и ОС.

• <canvas>: элемент Graphics Canvas.

  Используйте <canvas> либо с API сценариев, либо с WebGL, чтобы рисовать графику и анимацию.

• 1
• …
• 47
• 48
• 49
• 50
• 51
• …
• 258
• Next

button / desktop / 5.

0.0 / bem-components / Классические БЭМ-библиотеки / Библиотеки / БЭМ

Используется для создания различных типов кнопок.

Обзор блока

Модификаторы блока

Модификатор	Допустимые значения	Способы использования	Описание
type	'link', 'submit'	BEMJSON	Тип кнопки.
togglable	'check', 'radio'	BEMJSON	Тип переключателя.
disabled	true	BEMJSON, JS	Неактивное состояние.
focused	true	BEMJSON, JS	Фокус на блоке.
pressed	true	–	Действие «нажатие на кнопку».
hovered	true	–	Наведение курсором.
theme	'islands'	BEMJSON	Стилевое оформление.
size	's', 'm', 'l', 'xl'	BEMJSON	Размер кнопки. Используется для кнопок с модификатором theme в значении islands.
view	'action', 'pseudo', 'plain'	BEMJSON	Тип визуального выделения кнопки.

Специализированные поля блока

Поле	Тип	Описание
name	String	Уникальное имя блока. Не используется, если модификатор type выставлен в значение link.
val	String, Number	Значение, отправляемое на сервер. Не используется, если модификатор type выставлен в значение link.
text	String	Текст кнопки.
url	String	Адрес. Используется только для кнопки с модификатором type в значении link.
icon	BEMJSON	Иконка на кнопке. Формируется блоком icon.
title	String	Текст всплывающей подсказки.
id	String	Уникальный идентификатор кнопки.
tabIndex	Number	Последовательность перехода между контролами при нажатии на Tab.

Описание блока

Блок button предоставляет возможность изменять размер, состояние, содержимое и внешний вид кнопок.

Модификаторы блока

Модификатор

type

Допустимые значения: 'link', 'submit'.

Способ использования: BEMJSON.

Кнопка-ссылка (модификатор

type в значении link)

Используется для создания кнопки, обеспечивающей переход по адресу, указанному в поле url.

Кнопка отправки формы (модификатор

type в значении submit)

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

Модификатор

togglable

Допустимые значения: 'check', 'radio'.

Способ использования: BEMJSON.

Используется для реализации «залипания» кнопки. Определяет поведение нажатой кнопки.

Кнопка-переключатель (модификатор

togglable в значении check)

Первое нажатие на кнопку вдавливает ее, второе – приводит в первоначальное состояние.

Радиокнопка (модификатор

togglable в значении radio)

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

Пример использования в радиогруппе:

Модификатор

disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

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

Модификатор

focused

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за наличие фокуса на блоке.

Выставляется автоматически при получении кнопки фокуса.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', focused : true },
    text : 'В фокусе'
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор

pressed

Допустимое значение: true.

Способ использования: – .

Определяет действие «нажатие на кнопку».

Выставляется автоматически при нажатии на кнопку.

Модификатор

hovered

Допустимое значение: true.

Способы использования: – .

Выставляется блоку автоматически, когда курсор мыши находится в пределах контрола, но щелчка по нему не происходит.

Модификатор

theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

Необходимо использовать с модификатором size.

Модификатор

size

Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер всем типам кнопок.

Необходимо использовать с модификатором theme в значении islands.

s

m

l

xl

Модификатор

view

Допустимые значения: 'action', 'pseudo', 'plain'.

Способ использования: BEMJSON.

Кнопка действия (модификатор

view в значении action)

Используется для визуального выделения кнопки на странице.

Псевдокнопка (модификатор

view в значении pseudo)

Используется для изменения внешнего вида блока при необходимости сделать кнопку менее заметной на странице.

Кнопка без границ (модификатор

view в значении plain)

Используется при необходимости представить кнопкой другой блок, например, иконку (icon).

Специализированные поля блока

Поле

name

Тип: String.

Определяет уникальное имя блока.

Не используется, если модификатор type выставлен в значение link.

Поле

val

Тип данных: String, Number.

Определяет значение кнопки, которое будет отправлено на сервер.

Не используется, если модификатор type выставлен в значение link.

Поле

text

Тип: String.

Определяет текст, который отображается на кнопке.

Примечание Поле text позволяет определить текст кнопки и подходит для решения большинства задач, однако через него нельзя задать произвольный BEMJSON. В случае если необходимо внутри блока button определить некую HTML-разметку, нужно использовать поле content.

Поле

url

Тип: String.

Определяет адрес, по которому осуществляется переход при нажатии на кнопку с модификатором type в значении link.

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

Поле

icon

Тип: BEMJSON.

Определяет иконку, которая отображается на кнопке. Иконка задается с помощью блока icon.

Поле

title

Тип: String.

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

Поле

id

Тип: String.

Определяет уникальный идентификатор кнопки.

Поле

tabIndex

Тип: Number.

Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.

Пример переключения

с помощью HTML-кнопки | ПНГ | Пример переключения WAI

с помощью HTML-кнопки

Код в этом примере не предназначен для производственных сред. Прежде чем использовать его для каких-либо целей, прочитайте это, чтобы понять, почему.

Это наглядный пример одного из способов использования ARIA, соответствующего спецификации ARIA.

• В некоторых случаях могут быть пробелы в поддержке. комбинации браузера и вспомогательных технологий, особенно для мобильные/сенсорные устройства. Тестирование кода, основанного на этом примере, со вспомогательными технологиями необходимо, прежде чем рассматривать возможность использования в производственных системах.
• Проект ARIA и Assistive Technologies разрабатывает измерения поддержки вспомогательных технологий для примеров APG.
• Надежная доступность может быть дополнительно оптимизирована путем выбора шаблонов реализации, максимально использующих семантический HTML, и принимая во внимание предупреждение о том, что Нет ARIA лучше, чем Bad ARIA.

Об этом примере

Этот пример иллюстрирует реализацию шаблона переключения с HTML 9.0017, кнопка в качестве элемента переключателя и использование элемента SVG для обеспечения графического отображения состояний переключателя. Также показано использование роли group для представления нескольких коммутаторов в помеченной группе.

Аналогичные примеры включают:

• Пример переключателя: Переключатель на основе элемента div , который включает и выключает параметр уведомлений.
• Пример переключателя с использованием ввода флажка HTML: группа из 2 переключателей на основе HTML input[type="checkbox"] элементов, которые включают и выключают настройки специальных возможностей.

Экологический контроль

Специальные возможности

• Чтобы помочь пользователям вспомогательных технологий понять, что Средства контроля окружающей среды представляют собой группу из двух переключателей, переключатели заключены в группу , помеченную заголовком, обозначающим набор переключателей.
• Чтобы облегчить понимание состояния коммутатора пользователями с нарушениями зрения или когнитивными способностями, рядом с графическим индикатором состояния отображается текстовый эквивалент состояния ( на или на ). Селекторы атрибутов CSS обеспечивают синхронизацию отображаемой метки со значением атрибута aria-checked .
  ПРИМЕЧАНИЕ. Во избежание избыточного объявления состояния программами чтения с экрана текстовые индикаторы состояния скрыты от вспомогательных технологий с помощью ария-скрытая .
• Интервалы, ширина обводки и заливка важны для того, чтобы графические состояния были видны и различимы для людей с нарушениями зрения, в том числе при включенных настройках высокой контрастности браузера или операционной системы:
  • Чтобы сделать графическое представление состояния переключателя легко воспринимаемым, для контейнера состояния переключателя используется ширина штриха в два пикселя, а для заливки прямоугольников, указывающих включенное и выключенное состояния, используется сплошной цвет.
  • Чтобы пользователи могли видеть разницу между контейнером и прямоугольниками, используемыми для обозначения состояния переключателя, между границей контейнера и прямоугольниками есть расстояние в два пикселя.
• Чтобы улучшить восприятие при работе с переключателями, фокус визуальной клавиатуры и наведение стилизованы с использованием псевдоклассов CSS :hover и :focus :
  • Чтобы облегчить восприятие фокуса и связи между меткой и связанным с ней переключателем, фокус создает рамку вокруг переключателя и метки, а также изменяет цвет фона.
  • Чтобы было легче понять, что щелчок по метке или переключателю активирует переключатель, индикатор наведения совпадает с индикатором фокусировки.
  • Чтобы помочь людям с нарушениями зрения идентифицировать переключатель как интерактивный элемент, курсор при наведении на переключатель изменяется на указатель.
• Чтобы обеспечить достаточную контрастность графики SVG с фоном, когда настройки высокой контрастности инвертируют цвета, CSS currentcolor значение для свойств штриха и заливки используется для синхронизации цветов с текстовым содержимым. Если бы для задания свойств штрих и заливка использовались определенные цвета, цвет этих элементов оставался бы тем же самым в режиме высокой контрастности, что могло бы привести к недостаточному контрасту между ними и их фоном или даже сделать их невидимыми, если их цвет должны были соответствовать фону режима высокой контрастности. fill-opacity контейнера rect устанавливается равным нулю для цвета фона страницы, чтобы обеспечить цвет, контрастирующий с цветами штриха и заливки .
  ПРИМЕЧАНИЕ. Элементы SVG должны установить для свойства CSS принудительная настройка цвета значение auto , чтобы некоторые браузеры поддерживали значение currentcolor .

Подставка для клавиатуры

Ключ	Функция
Вкладка	Перемещает фокус клавиатуры на переключатель .
Пробел , Введите	Тумблер между включением и выключением.

Роль, свойство, состояние и атрибуты Tabindex

Роль	Атрибут	Элемент	Применение
переключатель		кнопка	Идентифицирует элемент кнопки как переключатель .
	ария-проверено="ложь"	кнопка	Указывает, что переключатель выключен. Селекторы атрибутов CSS (например, [aria-checked="false"] ) используются для синхронизации визуальных состояний со значением атрибута aria-checked .
	ария-проверено="истина"	кнопка	Указывает, что переключатель включен. Селекторы атрибутов CSS (например, [aria-checked="true"] ) используются для синхронизации визуальных состояний со значением атрибута aria-checked .
	ария-скрытый = "истина"	диапазон включен и диапазон отключен	Удаляет строки на и на , которые отображаются справа от переключателя из доступного имени переключателя. Эти строки включены только для улучшения визуального понимания состояния; состояния элементов не разрешены в доступных именах.
		h4	Обеспечивает групповую метку для группы переключателей.
группа		раздел	Идентифицирует элемент div как контейнер group для коммутаторов.
	ария с маркировкой	раздел	Ссылается на элемент h4 для определения доступного имени для группы переключателей.

Исходный код Javascript и CSS

• CSS: переключатель-кнопка. css
• Javascript: переключатель-кнопка.js

Исходный код HTML

        
        
 Кнопка  
 в HTML | Что такое тег кнопки в HTML 
 Кнопка в HTML | Что такое тег кнопки в HTML | Edureka 
  Глобальная инфраструктура AWS 
  
  
 Front End Web Development 
  
  
  Topics Covered 
  
  
 AngularJS (36 Blogs) 
  
  
 The Complete WebDeveloper (43 Blogs) 
  
  
 ReactJS (10 Blogs) 
  
  
 JavaScript and JQuery Essentials Training (30 Blogs) 
 
 
 
 ПОСМОТРЕТЬ БОЛЬШЕ  
 
 Последнее обновление 14 апреля 2022 г. 629 просмотров 
 
 
  
 Стать сертифицированным специалистом  
 
 HTML упрощает создание кнопок. В этой статье мы подробно рассмотрим Button In HTML. Следующие указатели будут рассмотрены в этой статье 
 
 
 Кнопка в HTML 
 
 Форма с тремя типами кнопок 
 
 Программа для тега кнопки 
 
 
 Итак, давайте начнем с этой статьи, 
 
 
 Кнопка в HTML   
 кнопки.  Здесь вы даже можете создавать кнопки с помощью тега , установив для его атрибута type значение button. Список атрибута типа, который может принимать значения: 
 
 
 
 
 
 Тип 
 
 
 
 Описание 
 
 
 
 
 
 Отправить 
 
 
 
 Создает кнопку, которая автоматически отправляет форму или документ. 
 
 
 
 
 
 Сброс 
 
 
 
 Создает кнопку, которая автоматически сбрасывает элементы управления формы к их начальным значениям. 
 
 
 
 
 
 Кнопка 
 
 
 
 Создает кнопку, которая используется для запуска сценария на стороне клиента, когда пользователь нажимает эту кнопку. 
 
 
 
 
 
 Изображение 
 
 
 
 Создает кликабельную кнопку, изображение которой мы можем использовать в качестве фона кнопки. 
 
 
 
 
 
 В HTML тег  в основном используется для создания кнопки в HTML-форме. Тем не менее, вы можете использовать тег  для создания таких же кнопок.  
 
 
 Программа для тега кнопки    
 Демонстрация использования тега  
 


<голова>


<тело>
<форма>
Нажмите здесь>



 

Вывод

 

Форма с тремя типами кнопок

Здесь показан код формы с тремя типами кнопок:

<голова>


<тело>
<форма>






 

Вывод

На этом мы подошли к концу этой статьи о кнопке в HTML.

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