input type = "submit" против тега кнопки они взаимозаменяемы?

Question

Теги

input type="submit" и button они взаимозаменяемы?или если есть какая-то разница, то когда использовать input type="submit" и когда button?

И если нет никакой разницы, тогда почему у нас есть 2 тега для одной цели?

Answer 1

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Кнопки, созданные с помощью элемента BUTTON, функционируют так же, как кнопки, созданные с помощью элемента INPUT, но они предоставляют более широкие возможности рендеринга: элемент BUTTON может иметь содержимое.Например, элемент BUTTON, содержащий изображение, функционирует как и может напоминать элемент INPUT, тип которого установлен на «image», но тип элемента BUTTON допускает содержимое.

Так что для функциональности только они 're взаимозаменяемы!

(Не забывайте, type="submit" - это значение по умолчанию для button, поэтому оставьте его выключенным!)

Answer 2

<input type="button"> - просто кнопка, которая сама по себе ничего не делает. <input type="submit">, находящийся внутри элемента формы, отправит форму при нажатии.

Еще одна полезная «специальная» кнопка - <input type="reset">, которая очистит форму.

Answer 3

Используйте тег вместо.Это рекомендуемая практика при начальной загрузке 3.

http://getbootstrap.com/css/#buttons-tags

"Кросс-браузерный рендеринг

В качестве лучшей практики мы настоятельно рекомендуем использовать элемент, когда это возможно, для обеспечения соответствия между браузерами.

Среди прочего, есть ошибка в Firefox, которая не позволяет нам устанавливать высоту строки для кнопок на основе , в результате чего они не точно соответствуютвысота других кнопок в Firefox. "

Answer 4

<input type='submit' /> не поддерживает HTML внутри него, так как это один самозакрывающийся тег. <button>, с другой стороны, поддерживает HTML, изображения и т. Д. Внутри, потому что это пара тегов: <button><img src='myimage.gif' /></button>. <button> также более гибок, когда дело доходит до стиля CSS.

Недостатком <button> является то, что он не полностью поддерживается старыми браузерами. Например, IE6 / 7 неправильно отображает его.

Если у вас нет какой-либо конкретной причины, вероятно, лучше придерживаться <input type='submit' />.

Answer 5

Хотя оба элемента обеспечивают функционально одинаковый результат *, Я настоятельно рекомендую использовать <button>:

• Намного понятнее и понятнее. input предполагает, что элемент управления доступен для редактирования или может быть отредактирован пользователем; button гораздо более явный с точки зрения цели, которой он служит
• Легче стилизовать в CSS; как упоминалось выше, FIrefox и IE имеют причуды, в которых input[type="submit"] не отображаются правильно в некоторых случаях
• Предсказуемые запросы: IE имеет очень поведение при отправке значений в запросе POST / GET на сервер
• Markup людей; внутри кнопки можно вкладывать предметы, например значки.
• HTML5, дальновидный; как разработчики, мы обязаны принять новую спецификацию после ее официального оформления. HTML5, на данный момент, является официальным уже более года, и во многих случаях было показано, что повышает SEO .

* * & Тысяча двадцать восемь AST; _{За исключением <button <strong>type="button"</strong>>, который по умолчанию не имеет определенного поведения.}

Таким образом, Я настоятельно не рекомендую использовать <input type="submit" />.

Answer 6

Я понимаю, что это старый вопрос, но я нашел его на mozilla.org и думаю, что он применим.

Кнопка может быть трех типов: отправить, сброс или кнопку. Щелчок на Кнопка отправки отправляет данные формы на веб-страницу, определенную атрибут действия элемента.

Нажатие на кнопку сброса немедленно сбрасывает все виджеты форм к их значению по умолчанию. Из С точки зрения UX, это считается плохой практикой.

Нажмите на кнопку кнопка делает ... ничего! Это звучит глупо, но это удивительно полезно создавать пользовательские кнопки с помощью JavaScript.

_to_finish">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a__to_finish

Answer 7

<button> новее <input type="submit">, более семантически, прост в стилизации и поддерживает HTML внутри него.

Answer 8

Хотя другие ответы хороши и отвечают на вопрос, при использовании input type="submit" и button необходимо учитывать одну вещь.С input type="submit" вы не можете использовать псевдоэлемент CSS на входе, но вы можете для кнопки!

Это одна из причин использовать элемент button над входом, когда дело доходит до стиля.

Answer 9

Я не знаю, является ли это ошибкой или функцией, но я обнаружил очень важное (по крайней мере, в некоторых случаях) отличие: <input type="submit"> создает пару ключ-значение в вашем запросе, а <button type="submit"> - нет,Протестировано в Chrome и Safari.

Поэтому, если в вашей форме несколько кнопок отправки и вы хотите знать, на какую из них нажимали - не используйте button, используйте input type="submit" вместо.

Answer 10

Если вы говорите о <input type=button>, он не будет автоматически отправлять форму

, если вы говорите о теге <button>, он более новый и не отправляется автоматически во всех браузерах.

В итоге, если вы хотите, чтобы форма отправлялась по клику во всех браузерах, используйте <input type="submit">