Html input type submit: HTML/Кнопка отправки (Элемент input)

html — Вёрстка: в чём разница между кнопками button и submit

Вопрос задан 10 лет 7 месяцев назад

Изменён 4 года 1 месяц назад

Просмотрен 25k раз

Вёрстка у меня всегда была слабой стороной.
Вот и сейчас не могу понять разницу.
Здесь нашёл описание:
button — кнопка
submit — кнопка для отправки данных.
Судя по всему button тоже можно использовать для передачи данных.
Так в чём же разница?

• вёрстка
• html

1

<input type="submit" value="Отправить"> - просто кнопка
<button type="submit"><b>Отправить</b></button> - контейнер кнопки.

По функционалу это одно и тоже. Разница в том, что в контейнер можно запихать любую разметку (в примере теги <b>).

UPD: прошу прощения, не до конца вник в вопрос 🙂

5

Кнопка типа Submit сама отправляет данные формы на сервер, а для Button это нужно делать вручную.
link text

button рулит! В неё можно вставить иконку FontAwesome а ещё у неё три типа: type=button — обычная кнопка, type=submit — сабмит для формы и type=reset — обнулить поля в форме. Так что если надо вставить картинку или иконку в кнопку, то лучше <button></button>.

сложно сказать на сколько этот вопрос актуальный, но одно верно — в «бутон» можно запихнуть что угодно, ведь это контейнер, а вот с серверной стороной проблемы — нельзя ни повесить обработчики, а если повесишь, то отследить невозможно! пользовался, отдаю предпочтения «инпутам» если это возможно, нет тогда любой контейнер, но не — «бутон»

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

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

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

Почта

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

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

Почта

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

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

html — input type=»submit» По сравнению с тегом кнопки они взаимозаменяемы?

спросил

11 лет, 9 месяцев назад

Изменено 6 месяцев назад

Просмотрено 195 тысяч раз

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

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

• html
• доступность
• w3c
• веб-стандарты
• семантическая разметка

3

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

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

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

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

8

— это просто кнопка, которая сама по себе ничего не делает. , находясь внутри элемента формы, отправит форму при нажатии.

Еще одна полезная «специальная» кнопка — 9.0011 , что очистит форму.

2

Хотя оба элемента дают

функционально одинаковый результат *, Я настоятельно рекомендую вам использовать :

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

* _{За исключением}

type="button" > , поведение которого по умолчанию не указано.

Итак, Я крайне не рекомендую использовать .

1

Использовать тег

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

http://getbootstrap.com/css/#buttons-теги

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

Мы настоятельно рекомендуем использовать элемент

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

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

, чтобы они не точно соответствует высоте других кнопок в Firefox. »

1

не поддерживает HTML внутри себя, так как это одиночный самозакрывающийся тег.

, с другой стороны, поддерживает HTML, изображения и т. д. внутри, потому что это пара тегов: . также является более гибким, когда дело доходит до стилей CSS.

Недостаток

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

Если у вас нет особой причины, вероятно, лучше придерживаться .

7

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

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

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

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

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

_to_finish

3

новее, чем , более семантичен, прост в стилизации и поддерживает HTML внутри него.

0

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

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

Я не знаю, ошибка это или фича, но есть очень важное (по крайней мере, для некоторых случаев) отличие, которое я нашел: создает пару ключ-значение в вашем запросе и

нет. Проверено в Chrome и Safari.

Поэтому, если у вас есть несколько кнопок отправки в форме и вы хотите знать, какая из них была нажата, не используйте 9Кнопка 0011 , вместо этого используйте

input type="submit" .

3

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

если вы говорите о теге

, это новее и не автоматически отправляется во всех браузерах .

В итоге, если вы хотите, чтобы форма отправлялась по клику во всех браузерах, используйте

1

Кнопка HTML type=»submit» Атрибут

html

6 месяцев назад

от Sharqa Hameed

HTML используется для создания структуры веб-страницы, а языки сценариев, такие как JavaScript, используются для того, чтобы сделать веб-страницу более интерактивной и динамичной. Кроме того, HTML предлагает своим элементам различные атрибуты, которые помогают кодировать JavaScript. Например, нам нужны формы почти в каждом приложении для ввода информации. Для отправки данных формы на сервер требуется кнопка, которая будет извлекать введенную информацию и отправлять ее в JavaScript для дальнейшей обработки.

В этом руководстве рассказывается о HTML «

», имеющем значение атрибута « submit ». Итак, давайте погрузимся!

Как добавить атрибут HTML button type = «submit»?

В HTML сначала добавьте

с именем класса « myform ». Затем выполните следующие шаги:

• Внутри div добавьте тег

  для заголовка.

• Затем добавьте два текстовых поля для имени и фамилии с метками. Атрибут « вместо » поля «9Тег 0065 label ” и атрибут “ id ” тега “ input ” должны совпадать. Это свяжет заголовок с элементом управления вводом.
• Добавьте кнопку со значением « type », установленным как « submit », « value » как « submit », и « id » как « submit ».
• После этого свяжите функцию « addData() » с кнопкой отправки, которая будет срабатывать при нажатии кнопки. Эта форма будет получать данные от пользователя и отображать их на той же странице.
• Наконец, укажите теги

  , в которых должны отображаться отправленные данные. Этим тегам

  назначены идентификаторы « displayfname » и « displaylname », которые будут использоваться в файле JavaScript для доступа к ним и выполнения дальнейшей операции.

HTML

   

Атрибут типа кнопки «Отправить»

   Имя:
   <тип ввода="текст"    имя ="fname">


   Фамилия:
   


   

Отправить
   

Вы отправили Имя : __________.

    Вы отправили Фамилия : ___________.

< /div>

Применим некоторые стили CSS к вышеупомянутому div. Здесь « .myform » относится к имени div, указанному в файле HTML:

• Присвойте свойству « background-color » значение « # 81b29a ».
• « text-align » as « center » выравнивает содержимое div по центру.
• Значение свойства « высота » установлено как « 300px ».
• « размер шрифта » устанавливается как « большой ».

CSS

 .myform {
  фоновый цвет: #81b29a;

  выравнивание текста: по центру;
  высота: 300 пикселей;
  размер шрифта: большой;
}

Примечание: Мы не добавили код JavaScript. В результате кнопка отправки не будет реагировать:

Теперь давайте перейдем к коду функции JavaScript, которая будет запускаться при нажатии кнопки. Для этого сначала создайте новый файл с расширением « .js ». Затем определите функцию с именем « addData() ». Эта функция сначала извлечет значение обоих полей ввода, обратившись к ним, используя их идентификаторы в методе document.getElementById(). Затем отобразите полученное значение как внутренний текст добавленных меток.

JavaScript

function addData() {
  var fname = document.getElementById(«fname»).value;
  var lname = document.getElementById(«lname»).value;
  document.getElementById(«displayfname»).innerText = fname;
  document.getElementById(«displayname»).innerText = lname;
}

Можно заметить, что после ввода имени и фамилии при нажатии кнопки « Submit » имена отображаются в метках:

Мы узнали, как работает кнопка отправки HTML, на практической демонстрации.

Заключение

В HTML есть сотни элементов, таких как абзацы, поля ввода, кнопки и многое другое.