Кнопка html button: Атрибут type | htmlbook.ru

Leave a Comment / Html / By /

HTML/Элемент button

Синтаксис

(X)HTML

<button> ... </button>

Описание

Элемент button (от англ. «button» ‒ «кнопка») cоздаёт в документе интерактивные кнопки. По своему значению элемент button похож на элемент input, но в отличии от input элемент button может отображать на кнопке почти все элементы (кроме элемента карты) вкладываемые в данный элемент.

Примечание

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

Совет

Для корректности работы кнопки во всех браузерах, желательно в данном элементе указывать атрибут «

type» с соответствующим значением.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0—
3.2—
4.0117.5 The BUTTON element
DTD: Transitional Strict Frameset
5.04.10.6 The button element
5.1		4.10.6. The button element
XHTML
1. 0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

autofocus
Получение кнопкой фокуса после загрузки страницы.
disabled
Блокирует кнопку.
form
Присоединяет кнопку к форме (с помощью значения параметра «id» присоединяемой формы).
formaction
URL-адрес обработчика формы.
formenctype
Способ кодирования данных формы перед отправкой.
formmethod
Метод передачи данных формы.
formnovalidate
Запрещает проверку данных формы на корректность.
formtarget
Указывает место, в котором должен быть открыт результат отправки данных формы.
name
Имя кнопки.
type
Тип кнопки.
value
Значение кнопки (отправляется вместе с данными формы на сервер).
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент button</title>
<link type=»text/css» href=»ex-style.css» rel=»stylesheet»>
</head>
<body>
<h2>Пример с элементом «button»</h2>
<!— Создаём форму, поле ввода и две кнопки «очистить» и «отправить» —>
<form action=»/examples/php-scripts/FIE.php» method=»get»>
<p>Введите ваше имя: <input type=»text» name=»first_name»></p>
<p>
<button type=»reset»>Очистить</button>
<button type=»submit»><img src=»http://programmerbook. ru/favicon.ico» alt=»Эмблема сайта»>Отправить</button>
</p>
</form>
</body>
</html>

Элемент button

Тег — Учебник HTML

❮ Назад HTML Справочник Далее ❯


Пример

Кликабельная кнопка помечается следующим образом:

<button type=»button»>Нажми на меня!</button>

Попробуйте сами »

Определение и использование

Тег <button> определяет кликабельную кнопку.

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

Совет: Всегда указывайте атрибут type для элемента <button>, чтобы сообщить браузерам, что это за кнопка.

Совет: Вы можете легко стилизовать кнопки с помощью CSS! Посмотрите на приведенные ниже примеры или посетите CSS Кнопки.

Поддержка браузеров

Элементы
<button> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
autofocus autofocus Указывает, что кнопка должна автоматически получать Фокус при загрузке страницы
disabled disabled Указывает, что кнопка должна быть отключена
form form_id Указывает, к какой форме относится кнопка
formaction URL Указывает, куда отправлять данные формы при отправке формы. Только для type=»submit»
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Указывает, как данные формы должны быть закодированы перед отправкой на сервер. Только для type=»submit»
formmethod get
post		 Указывает, как отправить данные формы (какой метод HTTP использовать). Только для type=»submit»
formnovalidate formnovalidate Указывает, что данные формы не должны проверяться при отправке. Только для type=»submit»
formtarget _blank
_self
_parent
_top
framename		 Указывает, где будет отображаться ответ после отправки формы. Только для type=»submit»
name name Задает имя для кнопки
type button
reset
submit		 Указывает тип кнопки
value text Задает начальное значение для кнопки

Глобальные атрибуты

Тег <button> также поддерживает Глобальные атрибуты в HTML.

События атрибутов

Тег <button> также поддерживает События атрибутов в HTML.

Еще примеры

Пример

Используйте CSS для стилизации кнопок:

<!DOCTYPE html>
<html>
<head>
<style>
.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;
}

.button1 {background-color: #4CAF50;} /* Зеленый */
.button2 {background-color: #008CBA;} /* Синий */
</style>
</head>
<body>

<button>Зеленый</button>
<button>Синий</button>

</body>
</html>

Попробуйте сами »

Пример

Используйте CSS для стилизации кнопок (с эффектом наведения курсора мыши):

<!DOCTYPE html>
<html>
<head>
<style>
. 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;
}

</style>
</head>
<body>

<button>Зеленый</button>
<button>Синий</button>

</body>
</html>

Попробуйте сами »

Связные страницы

HTML DOM справочник: Объкт button

CSS Учебник: Стиль buttons

Настройки CSS по умолчанию

Нет.

❮ Назад HTML Справочник Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть

ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

HTML-тег — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 20 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Тег