Html input button: — HTML: HyperText Markup Language

Leave a Comment / Html / By /

html — button или input

Вопрос задан

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

Просмотрен 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

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

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

Почта

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

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

Почта

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

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

Как тип ввода Button создает кнопку формы в JavaScript »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Значение
Как определить тип ввода в HTML (все значения и атрибуты)
Что делает Как тип ввода кнопки создает кнопку формы в JavaScript ?
Определяет ввод в виде кнопки.

Содержание

  • 1 Пример кода
  • 2 В основном для JavaScript
  • 3 против
  • 4 Поддержка браузера для button
  • 5 Все значения типа
  • 6 Все атрибуты ввода

Пример кода

В основном для JavaScript

Кнопка 9Тип ввода 0013 создает кнопку формы, значение которой отображается в виде текста или метки на кнопке. Ввод кнопки выглядит идентично вводу submit , но они не взаимозаменяемы — ввод кнопки не отправляет форму. По большей части ввод кнопки используется в сочетании с JavaScript.

против