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 — button или input

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

• html
• submit

1

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

button, как нового элемента HTML5, поддержка чуть хуже, хотя сейчас уже не критично .

7

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

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

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

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

4

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

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

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

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

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

Почта

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

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

Почта

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

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

input type=submit — кнопка отправки

ⓘ тип ввода=отправить – кнопка отправки # T

вход элемент с атрибутом типа, чей значение « submit » представляет собой кнопку для отправка формы.

Допустимое содержимое #

пустой (пустой элемент)

Разрешенные атрибуты #

глобальные атрибуты & имя & неполноценный & форма & тип★ & ценить и формирование и автофокус & тип формы & метод формы & цель формы и формировать

ⓘ глобальные атрибуты

Любые атрибуты, разрешенные глобально.

ⓘ имя = строка #

Часть имени пары имя/значение, связанная с этим элемент для отправки формы.

ⓘ отключен = «неполноценный» или «» (пустая строка) или пустая #

Указывает, что элемент представляет отключенный контроль.

ⓘ форма = Идентификационная ссылка НОВЫЙ #

Значение идентификатор атрибут на форма с которым связать элемент.

тип = «отправить» #

Указывает, что его вход элемент представляет собой кнопку для отправка формы.

значение = строка #

Задает значение для вход элемент.

ⓘ формация = непустой URL-адрес, потенциально окруженный пробелами НОВЫЙ #

Действие отправки формы для элемента.

ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #

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

ⓘ formenctype = «приложение/x-www-form-urlencoded» или «составные/данные формы» или «текст/обычный» NEW #

Тип MIME, с которым UA должен ассоциировать это элемент для отправки формы.

ⓘ метод формы = «получить» или «опубликовать» NEW #

Метод HTTP, с которым UA должен связываться этот элемент для отправки формы.

ⓘ цель формы = имя контекста просмотра или ключевое слово НОВЫЙ #

А контекст просмотра имя или ключевое слово, представляющее цель контроля.

Любой нить это одно из следующего:

• а имя контекста просмотра
• любой совпадение без учета регистра для одной из следующих литеральных строк: « _пусто «, « _себя «, » _родительский «, или « _верхний «.

ⓘ формировать валидировать = «формировать» или «» (пустая строка) или пустая НОВЫЙ #

Указывает, что элемент представляет собой элемент управления, значение не предназначено для проверки во время формы подчинение.

Дополнительные ограничения и предупреждения #

• Ввод интерактивного элемента не должен появляются как потомки элемента a.
• Ввод интерактивного элемента не должен отображаться как потомок элемента кнопки.
• Любой элемент ввода, потомок элемента метки с атрибутом for должен иметь Значение идентификатора, которое соответствует этому атрибуту.
• Атрибут списка элемента ввода должен ссылаться на элемент списка данных.
• Ввод элемента с типом атрибута чье значение «кнопка» должно иметь непустое значение атрибута.
• Атрибут usemap в элементе ввода устарел. Используйте элемент img вместо элемента ввода для карт изображений.
• Атрибут align элемента ввода устарел. Вместо этого используйте CSS.

Отсутствие тега #

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

Разрешенные родительские элементы #

любой элемент, который может содержать phrasing elements

Как тип ввода «Отправить» создает кнопки отправки формы в HTML »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Значение

Как определить тип ввода в HTML (все значения и атрибуты)

Что означает Как тип ввода Submit создает кнопки отправки формы в HTML делать?

Определяет кнопку, по нажатию которой отправляется форма.

Содержание

• 1 Пример кода
• 2 Поддержка браузером отправки
• 3 Все значения типа
• 4 Все атрибуты ввода

Пример кода 900 03

 <форма action="myform.cgi">

 Введите здесь поддельный пароль


 

Введите здесь поддельный пароль

Значение submit input отображает кнопку Submit в форме. При нажатии на эту кнопку данные формы будут отправлены.

Если вы хотите использовать изображение вместо кнопки «Отправить», используйте тип ввода image .

Клэр Бродли

Клэр — опытный технический писатель, редактор и энтузиаст HTML. Она пишет для HTML.com и руководит контент-агентством Red Robot Media.

Поддержка браузера для отправки

Все	Все	Все	Все	Все	Все

Все значения типа

Имя значения	Примечания
текст	Определяет поле ввода текста в форме.
флажок	Определяет флажок, который пользователь может включать и выключать.
радио	Определяет круглую кнопку выбора в форме.
пароль	Отображает скрытое поле ввода пароля.
hidden	Определяет поле в форме, которое не видно пользователю.
submit	Определяет кнопку, по нажатию которой отправляется форма.
сброс	Определяет кнопку в форме, которая вернет все поля к значениям по умолчанию.
кнопка	Определяет ввод в виде кнопки.
файл	Определяет окно загрузки файла с кнопкой обзора.
изображение	Определяет изображение, которое щелкают, чтобы отправить форму.

Все атрибуты ввода

Имя атрибута	Значения	Примечания
Шаг		Указывает интервал между допустимыми значениями в числовом вводе.
required		Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто.
только для чтения		Запрещает пользователю редактировать значение ввода.
заполнитель		Задает текст-заполнитель в текстовом вводе.
шаблон		Указывает регулярное выражение, по которому проверяется значение ввода.
несколько		Позволяет пользователю вводить несколько значений при загрузке файла или вводе по электронной почте.
мин.		Задает минимальное значение для полей ввода чисел и дат.
max		Задает максимальное значение для полей ввода чисел и дат.
список		Указывает идентификатор элемента
высота		Определяет высоту входного изображения.
formtarget		Указывает контекст просмотра, в котором следует открыть ответ сервера после отправки формы. Для использования только с типами ввода «отправить» или «изображение».
formmethod		Указывает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение».
formenctype		Указывает, как данные формы должны быть отправлены на сервер. Только для использования с типами ввода «отправить» и «изображение».
formaction		Указывает URL-адрес для отправки формы. Может использоваться только для type=»submit» и type=»image».
форма		Задает форму, которой принадлежит поле ввода.
автофокус		Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы.
тип	текст флажок радио пароль скрытый отправка сброс кнопка файл изображение	Определяет тип ввода.
имя		Указывает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы.
значение		Определяет начальное значение или выбор по умолчанию для поля ввода.
размер		Определяет ширину ввода в символах.
maxlength		Задает максимальное количество символов, которые можно ввести в текстовый ввод.
Checked		Указывает, должен ли ввод флажка или переключателя быть отмечен по умолчанию.
граница		Используется для указания границы ввода. Устарело. Вместо этого используйте CSS.
src		Определяет URL-адрес источника для входного изображения.
отключено		Отключает поле ввода.
ключ доступа		Определяет сочетание клавиш для элемента.
язык		Используется для указания языка сценариев, используемого для событий, запускаемых вводом.
autocomplete		Указывает, должен ли браузер пытаться автоматически завершать ввод на основе ввода данных пользователем в аналогичные поля. No related posts. Вперед Цвет для html: HTML CSS Палитра цветов Назад Как уменьшить пинг интернета: Технобрейк | Предложения и отзывы Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты