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

233

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

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

— Джитендра Вьяс
источник

4

См. Также Разница между <input type = 'button' /> и <input type = 'submit' />

— hippietrail

Избегайте забавного дня при использовании buttonи valueатрибут в какой-то версии IE, inputпросто отправит то, что вы ожидали, какая-то версия IE не очень хорошо работает с buttons.

— Рубенс Мариуццо

Ответы в основном такие же, как и для input type="button"vs button type=button: stackoverflow.com/questions/469059/…

— Ciro Santilli 法轮功冠状病六四事件法轮功

Отвечает ли это на ваш вопрос? <button> против <input type = "button" />. Какой использовать?

— leonheess

131

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

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

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

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

— MatTheCat
источник

7

Просто будьте осторожны, IE6 передает значения всех кнопок на странице, что затрудняет точное определение, какая кнопка была нажата. Объяснение: vancelucas.com/blog/ie6-and-multiple-button-submit-elements

— Сэм

6

Просто FYI Вы не должны использовать type="submit"с помощью кнопки, по умолчанию для typeэто submit.

— синхронизация

8

Это то, что говорит W3C, но я уверен, что видел случаи, когда по typeумолчанию было button. Я предпочитаю указывать каждый атрибут, чтобы избежать несоответствия браузера.

— MatTheCat

5

по ссылке да. но не все браузеры придерживаются справочных спецификаций, верно?

— EKanadily

2

@chharvey, нет, у первого могут быть дочерние узлы; т.е. нетекстовый контент. Я полагаю, вы могли бы сказать, что кроме краткости нет оснований для существования последнего.

— Пол Дрейпер

71

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

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

— theprogrammer
источник

5

Вопрос о теге кнопки, а не о <input type = "button">

— Caltor

7

Речь идет о <input>и <button>теги. Вы предоставили полезную информацию <input>в своем ответе, но это не хватает <button>стороны.

— PMPR

43

Используйте тег <button> вместо <input type = "button" ..> . Это рекомендуемая практика в начальной загрузке 3.

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

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

Рекомендуется по возможности использовать элемент <button> для обеспечения соответствия между браузерами.

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

— rolfk
источник

4

+1 за это. buttonгораздо более явный, поставляется с ariaфункциями специальных возможностей, и его гораздо проще стилизовать. Это также дальновидно, как это HTML5.

— user1429980

37

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

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

* _{За исключением того, что по умолчанию не имеет определенного поведения.<button type="button">}

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

— user1429980
источник

Спасибо. Я искал это, особенно для семантической точки HTML5. В 2020 году мы должны думать не только о функциональности.

— pierre_loic

27

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

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

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

— Джаред Нг
источник

1

Ответ был 2 года назад. Также очень возможно указать альтернативный текст кнопки:<input type="submit" value="Log In" />

— Джаред Нг

2

@nailer Вы имеете полное право на свое мнение, но любой ответ неизбежно будет ссылаться на текущее состояние технологии. Возможно, HTML 6 устареет <button>в пользу чего-то нового. Означает ли это, что мы не должны упоминать конкретный тег в ответах вообще, потому что он может измениться в какой-то момент в будущем? Я бы предпочел оставить читателю в качестве упражнения определение того, как ответы применимы к их ситуации. Пока информация полезна для читателя, я не вижу проблемы в ее включении.

— Джаред Нг

1

На момент написания ответа IE6 / 7 уже устарели. Новый веб-разработчик, читающий ваше сообщение, не проверяющий ваши аргументы поддержки и не понимающий, что они больше не применяются, подумал бы, что есть веская причина не использовать элементы «кнопки».

— mikemaccana

2

@nailer Нет универсального списка устаревших браузеров, который должен соблюдать каждый. Различные рабочие места предъявляют разные требования к поддерживаемым браузерам. То, что ваш стандарт «поддерживаемых браузеров» в 2011 году не включал IE6 / 7, не означает, что это имеет место везде.

— Джаред Нг

1

Я знаю, что не существует универсального списка устаревших браузеров - следовательно, не все упоминают такие вещи. Все, что я хочу сказать, это то, что это может быть лучше сформулировано, поскольку «IE6 / 7 не поддерживает кнопку дисплея правильно. Если это проблема, придерживайтесь ввода» Т.е., вы знаете, что браузеры изменятся, объясните это. Это останавливает StackOverflow, который навсегда останавливается на обходных решениях IE6.

— mikemaccana

14

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

— Jere.me
источник

Как это полезно, если ничего не делает?

— Дорогой

4

Потому что вы можете подключить обработчики к событию click через Javascript

— fonso

@Мед, например, вы можете написать код, <button type="button">чтобы переместить ползунок / карусель к следующему слайду.

— Чарви

11

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

— Аказ Соуза
источник

8

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

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

— L84
источник

3

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

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

— Иван Ярыч
источник

По моему опыту это совсем наоборот, кнопка проходит $ _POST ["submit_name"], а ввод - нет. проверено на хром. Firefox всегда отправляет $ _POST ["submit_name"].

— Галл Анноним

@GallAnnonim может быть, это зависит от типа документа. Потому что я определенно использую тип ввода = submit, и он работает на Chrome

— Иван Ярыч

Интересно ... Я использовал <! DOCTYPE html>, используя lang "pl" && encoding utf-8, если это делает разницу. chrome 58.0.3029.96

— Gall Annonim

-2

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

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

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

— DarylChymko
источник

14

Вы можете использовать <button type="submit">для автоматической отправки форм.

— jumpnett