button или input

205

10 октября 2017, 03:20

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

Answer 1

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

Answer 2

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

input элемент по умолчанию имеет display:inline, в то время, как button - display:block в FF input по умолчанию имеет display:inline, в остальных браузерах, значение display совпадает с button: display:inline-block
Кроме этого, 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 class="green">11</span></button> 
  <button type="submit"><span>2</span> <span class="green">22</span></button> 
  <button type="submit"><span>3</span> <span class="green">22</span></button> 
  <button type="submit"><span>4</span> <span class="green">33</span></button> 
</form>

Answer 3

Если используется длинное слово или целое предложение на кнопке - лучше использовать 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; 
}

<h2>input type="submit"</h2> 
<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"> 
 
<h2>button type="submit"</h2> 
<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>