Содержание

Тег button

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

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

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

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

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

Внутри элемента <button> можно поместить содержимое, например текст или изображения. Это различие между этим элементом и кнопками, созданными с помощью элемента <input>.

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

Совет: Кнопки часто стилизованы под CSS:

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

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

Советы и примечания

Примечание: При использовании элемента <button> в HTML-форме различные обозреватели могут отправлять различные значения.

Использовать <input> для создания кнопок в форме HTML.

Совет: Посетите наш CSS кнопки учебник чтобы узнать, как стиль кнопок с CSS.

Различия между HTML 4,01 и HTML5

HTML5 имеет следующие новые атрибуты: автофокусировка, форма, формактион, форменктипе, форммесод, formnovalidate и формтаржет.

Атрибуты

= Новые в HTML5.

АтрибутЗначениеОписание
autofocusautofocusУказывает, что кнопка должна автоматически получать фокус при загрузке страницы
disableddisabledУказывает, что кнопка должна быть отключена
formform_idУказывает одну или несколько форм, к которым принадлежит кнопка
formactionURLУказывает, куда отправлять данные формы при отправке формы. Только для type=»submit»
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		Задает способ кодирования данных формы перед отправкой на сервер. Только для type=»submit»
formmethodget
post		Указывает способ отправки данных формы (используемый метод HTTP). Только для type=»submit»
formnovalidateformnovalidateУказывает, что данные формы не должны проверяться при отправке. Только для type=»submit»
formtarget_blank
_self
_parent
_top
framename		Указывает, где отображать ответ после отправки формы. Только для type=»submit»
namenameЗадает имя кнопки
typebutton
reset
submit		Указывает тип кнопки
valuetextЗадает начальное значение для кнопки

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

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

Атрибуты события

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

Похожие страницы

HTML DOM Ссылки: Кнопку Object

CSS Учебник: Styling Кнопки

Параметры CSS по умолчанию

Нет.

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html

цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Тег | HTML справочник

HTML теги

Значение и применение

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).

Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы.

Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

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

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<button>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
autofocusautofocusЛогический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disableddisabledЯвляется логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
formform_idЗадает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formactionURLУказывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = «submit» >).
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = «submit» >).
formmethodget
post		Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = «submit» >).
formnovalidateformnovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = «submit» >).
formtarget_blank
_self
_parent
_top
framename		Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне. Используется только для <button type = «submit» >.
namenameЗадает имя для кнопки, которое передается при отправке формы.
typebutton
reset
submit		Указывает тип кнопки. Значение по умолчанию
submit.
valuetextОпределяет начальное значение для кнопки.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Тег <button></title>
	</head>
	<body>
		<button type = "button" name = "button1" style = "width: 80px; height:50px;">
			<b>Кнопка 1</b>
		</button><br><br>
		<button type = "button" name = "button2" style = "width: 80px; height:50px">
			<img src = "../../images/top2.png" alt = "up" width = "40" height = "40">
		</button><br><br>
		<button type = "button" name = "button3" style = "width: 80px; height:50px;">
			<i>Кнопка 3</i>
		</button><br><br>
	</body>
</html>

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

  • Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
  • Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей.
    Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
  • Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

Результат нашего примера:

Пример использования тега <button> (кнопкa в HTML).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title>
	</head>
	<body>
		<form id = "myForm">
			<input type = "text" name = "ulogin" placeholder = "Ваше имя"><br> <!-- определяем элемент управления для текстовой информации -->
			<textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос"></textarea><br>
			<button formtarget = _blank formnovalidate>Отправить</button> <!-- определяем кнопку для отправки формы -->
		</form>
	</body>
</html>

В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtarget со значением «_blank» указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.

Результат нашего примера:

Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 7 новых атрибутов.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».
HTML теги

Тег кнопки HTML | Узнать атрибуты HTML-тега кнопки

HTML-тег кнопки позволяет создать активную кнопку на веб-странице с использованием HTML-документа. Этот элемент

Атрибуты тега кнопки HTML

Специальные атрибуты не использовались, так как у них нет обязательных атрибутов; вместо этого они используются как обычная кнопка с атрибутом type=». Даже этот элемент стилизован с использованием CSS со свойствами, позволяющими изменять изменения в теге кнопки. Этими свойствами являются CSS font-family, Font-weight, Text-decoration, font-Style. Цветовые свойства, такие как Background-color и, наконец, свойства макета, такие как text-overflow, text-indent.

Серийный номер Имя атрибута Описание Пример
1 автофокус  Рассматривается как логический атрибут. <кнопка> автофокус <кнопка>
2 отключен Сделать кнопку ненажимаемой. <тип кнопки = «кнопка» отключена…>/кнопка>
3 Форма Создает форму <форма>…
4 формация Указывает текущее местоположение для отправки данных формы. <действие формы =: https://…” >
5 формановациядата  Отображается серым цветом и дает непроверочные функции. <тип кнопки = «отправить» formnovalidate>
6 Формметод Указывает методы при обращении к следующей веб-странице (get, post методов HTTP)
7 цель формы  Указывает целевой путь для ответа сервера при выполнении действия формы.
8 формаcтип Используется, когда форма отправляется на веб-сервер для ответа, который активирует используемый тип содержимого. …..
8 имя  Указывает имя кнопки, используемой в элементе формы, который используется для ввода формы.
9 тип  Определяет тип использованной кнопки. Он имеет три значения по умолчанию: submit, reset, text. < тип кнопки «……» >
10 значение Дает начальное значение при использовании кнопки вместе с данными формы
11 tabindex Указывает клавишу табуляции, а порядок определяет предпочтение.
12 по клику При нажатии кнопки выполняется небольшой код JavaScript. <кнопка onclick=" ">

Примеры реализации в HTML-теге кнопки

Ниже приведены примеры реализации в HTML-теге кнопки:

Пример №1

Код: 


<голова>
 Пример HTML-тега кнопки

<тело>
 
Пример HTML-тега кнопки 
 




Имя сотрудника:

Вывод:

Пример #2

Код: 

 

<голова>
 
 
 
 Пример использования CSS 



<тело>
Нормальный класс

<ч />
Экономический класс

<ч />
Бизнес-класс

<ч />
Отправление

Вывод:

Пример #3

С помощью CSS: Здесь мы использовали свойство padding, margin. Вот несколько способов улучшить внешний вид страницы. Для закругления угла кнопки используется border-radius.

Код: 

 
<стиль>
тело {
цвет: #000;
высота: 90вх;
фон: линейный градиент (-90deg, #a1c3d1 0%, #c48b9e 100%) без повторов;
выравнивание текста: по центру;
}
вход {
ширина: 280 пикселей;
дисплей: блок;
запас: 2рем авто;
граница: 3 пикселя сплошная #fbc7ff;
отступ: 7px;
фон: прозрачный;
радиус границы: 25px;
контур: нет;
}
::заполнитель {
цвет: #00ced1;
}
.btn {
фон:#96ф905;
граница: нет;
высота: 3рем;
радиус границы: 20px;
ширина: 220 пикселей;
дисплей: блок;
цвет: #96f905;
контур: нет;
запас: 2рем авто;
}

<тело>
 
Действие HTML-формы с помощью кнопки
 







  Вывод: 
  Примечание:  Вы также можете увеличить размер кнопки, указав

Вывод:

Пример #5

демонстрация атрибута onclick. В приведенном ниже примере я использовал JavaScript для выполнения действия с кнопкой; тем временем он вызывает диалоговое окно с текстовым сообщением. Функция JavaScript используется здесь для принятия решения. onclick() — сделать кнопку в действии.

Код: 

 

<голова>
Демонстрация HTML при нажатии кнопки

<тело>
 
 Демонстрация HTML при нажатии кнопки

Вывод:  Перед нажатием кнопки

Предупреждающее сообщение – после нажатия кнопки

Пример #6

Код: 9 0010

 

<голова>  

<тело>

Кнопка открывает следующую веб-страницу!

Вывод:

Заключение

 

Таким образом, мы видели HTML-тег Button, который используется для запуска любого действия и используется для представления содержимого текста в HTML-документе. Будучи важными аспектами веб-сайта, простая кнопка вместе с CSS и JavaScript выглядит красочно. Вы также можете узнать множество опций, связанных с кнопками.

Рекомендуемые статьи

Это руководство по тегам кнопок HTML. Здесь мы обсуждаем атрибуты в теге кнопки и примеры для реализации с правильными кодами и выводами. Вы также можете ознакомиться с другими нашими статьями по теме, чтобы узнать больше –

  1. Тег адреса HTML
  2. Тег адреса в HTML
  3. HTML обязательный атрибут
  4. HTML-тег изображения

Тег HTML

Тег HTML с его содержимым между начальным и конечным тегами. Содержимое действует как метка кнопки (т. е. все, что написано между начальным и конечным тегами, отображается на кнопке). Элемент

Примеры

Базовое использование тега

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

Кнопка, вложенная в форму

Здесь мы вкладываем кнопку в элемент , который делает кнопку частью формы.

Имя:
Фамилия:

Кнопка, связанная с формой

Здесь мы связываем кнопку с элементом , используя атрибут формы (т.е. мы вставляем форму id в качестве значения). Делая это, нам не нужно вкладывать элемент

Об элементах, связанных с формой

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

Следующие элементы HTML являются «элементами, связанными с формой»:

  • Кнопка
  • набор полей
  • вход
  • кейген
  • этикетка
  • объект
  • выход
  • выбрать
  • текстовая область
  • изображение

Возможность связать элемент управления формы с формой может решить проблему отсутствия поддержки вложенных элементов . Хотя вложенные элементы не поддерживаются в спецификации HTML, вполне возможно, что скрипт может манипулировать DOM таким образом, что это приводит к вложенным <форма> элементов. Спецификация HTML5 признает эту ситуацию и, по-видимому, учитывает ее, предупреждая о несоответствии вложенных элементов .

Кнопка с изображением

Вы можете включить элемент внутрь элемента