Можно ли использовать <button type="submit"/>
, как <input type="submit/>
. И какая между ними разница?
3 ответа
button
по умолчанию имеет type="submit"
, если находится в теге form
, разница в том, что button
можно лучше стилизировать (хочешь картинкой, хочешь фоном и т. д.), ну и у button
, как нового элемента HTML5, поддержка чуть хуже, хотя сейчас уже не критично .
-
-
3@FeelsBadMan, Wow, а в чём между ними разница?– user2076187 окт 2017 в 17:34
-
2@FeelsBadMan синтаксис у них не различаается. Ещё что-нибудь?– user1811009 окт 2017 в 10:27
-
1@FeelsBadMan на заметку: JQuery это библиотека на языке JavaScript. Когда вы думаете, что пишете «на JQuery», вы на самом деле пишете на JS.– Nick Volynkin ♦9 окт 2017 в 10:28
-
1
В дополнение к соседнему ответу:
input элемент по умолчанию имеетв FF input по умолчанию имеетdisplay:inline
, в то время, какbutton
-display:block
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>
Если используется длинное слово или целое предложение на кнопке - лучше использовать 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>