Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Справочник


HTML Теги



HTML Тег <button>



Пример

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

<button type="button">Нажми на меня!</button>
Попробуйте сами »


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

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

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

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

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


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

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

Атрибуты <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>

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


События атрибутов <button>

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


Еще примеры <button>

Пример

Используйте 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 class="button button1">Зеленый</button>
<button class="button button2">Синий</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 class="button button1">Зеленый</button>
<button class="button button2">Синий</button>

</body>
</html>
Попробуйте сами »

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

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

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


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

Нет.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.