Html input type button: — HTML: HyperText Markup Language

Leave a Comment / Html / By /

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+6.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type=»button | reset | submit»). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.

Синтаксис

<form>
  <button>...</button>
</form>

Атрибуты

accesskey
Доступ к элементам формы с помощью горячих клавиш.
autofocus
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает между собой форму и кнопку.
formaction
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
Способ кодирования данных формы.
formmethod
Указывает метод пересылки данных формы.
formnovalidate
Отменяет проверку формы на корректность.
formtarget
Открывает результат отправки формы в новом окне или фрейме.
name
Определяет уникальное имя кнопки.
type
Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>
  <p><button>Кнопка с текстом</button>
  <button><img src="images/umbrella.gif" alt="Зонтик" 
         > Кнопка с рисунком</button></p>
 </body>
</html>

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

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.

Универсальные элементыФормы

Статьи по теме

  • Кнопки

Статьи по теме

  • Кнопки

html — button или input

Вопрос задан

Изменён 5 лет 4 месяца назад

Просмотрен 7k раз

Можно ли использовать <button type="submit"/> , как <input type="submit/>. И какая между ними разница?

  • html
  • submit

1

button по умолчанию имеет type="submit", если находится в теге form, разница в том, что button можно лучше стилизировать (хочешь картинкой, хочешь фоном и т. д.), ну и у button, как нового элемента HTML5, поддержка чуть хуже, хотя сейчас уже не критично .

7

В дополнение к соседнему ответу:

  1. input элемент по умолчанию имеет display:inline, в то время, как button — display:block в FF input по умолчанию имеет
    display:inline    , в остальных браузерах, значение display совпадает с button: display:inline-block
  2. Кроме этого, button может быть контейнером для других элементов, в отличие от input.
span {
  font-weight: bold;
  color: red;
}

.green {
  color: green;
}
<form>
  <input type="submit" value="1" />
  <input type="submit" value="2" />
  <input type="submit" value="3" />
  <input type="submit" value="4" />
</form>

<form>
  <button type="submit"><span>1</span> <span>11</span></button>
  <button type="submit"><span>2</span> <span>22</span></button>
  <button type="submit"><span>3</span> <span>22</span></button>
  <button type="submit"><span>4</span> <span>33</span></button>
</form>

Если используется длинное слово или целое предложение на кнопке — лучше использовать button вместо input, т.к input по умолчанию white-space: nowrap.

Также button поддерживает работу с псевдоэлементами

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

[type="submit"] {
  /*display: block;*/
  padding: 15px 35px;
  width: 100%;
  font-size: 18px;
  position: relative;
}

[type="submit"]:before,
[type="submit"]:after {
  content: 'i';
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: tomato;
  color: #fff;
  margin-top: -15px;
}

[type="submit"]:after {
  left: auto;
  right: 0;
}
<h3>input type="submit"</h3>
<input type="submit" value="Submit text text tetx text text text tetx text text text tetx text text text tetx text text text tetx text text text tetx text">

<h3>button type="submit"</h3>
<button type="submit">Submit text text tetx text text text tetx text text text tetx text text text tetx text text text tetx text text text tetx text</button>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Тип кнопки HTML Атрибут

❮ Тег HTML
 

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

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

Атрибут type определяет тип кнопки.

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

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

Атрибут
тип Да Да
Да		 Да Да

Синтаксис