Разница между < input type='submit'/"> и <button type = 'submit'> text</button>

Ответ 1

Не уверен, откуда вы получаете свои легенды, но:

Кнопка отправки с <button>

Как и с:

<button type="submit">(html content)</button>

IE6 отправит весь текст для этой кнопки между тегами, другие браузеры будут отправлять только значение. Использование <button> дает вам больше свободы компоновки над дизайном кнопки. Во всех его намерениях и целях это казалось превосходным сначала, но различные причуды браузера затрудняют использование в разы.

В вашем примере IE6 отправит text на сервер, в то время как большинство других браузеров ничего не отправят. Чтобы сделать его совместимым с кросс-браузером, используйте <button type="submit" value="text">text</button>. Еще лучше: не используйте значение, потому что, если вы добавляете HTML, становится довольно сложным то, что получено на стороне сервера. Вместо этого, если вы должны отправить дополнительное значение, используйте скрытое поле.

Кнопка с <input>

Как и с:

<input type="button" />

По умолчанию это почти ничего не делает. Он даже не отправит вашу форму. Вы можете размещать только текст на кнопке и придать ему размер и границу с помощью CSS. Его первоначальным (и текущим) намерением было выполнение script без необходимости отправки формы на сервер.

Обычная кнопка отправки с <input>

Как и с:

<input type="submit" />

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

Кнопка отправки изображения с помощью <input>

Как и с:

<input type="image" />

Как и предыдущий (submit), он также отправит форму, но вы можете использовать любое изображение. Раньше это был предпочтительный способ использования изображений в качестве кнопок, когда форма должна была подаваться. Для большего контроля теперь используется <button>. Это также можно использовать для карт изображений на стороне сервера, но в наши дни это редкость. Когда вы используете атрибут usemap и (с или без этого атрибута), браузер отправляет координаты мыши/указателя X/Y на сервер (точнее, местоположение указателя мыши внутри кнопки момента нажатия Это). Если вы просто игнорируете эти дополнительные функции, это не что иное, как кнопка отправки, замаскированная под изображение.

Существуют некоторые тонкие различия между браузерами, но все будут отправлять атрибут value, за исключением тега <button>, как описано выше.

Ответ 2

С помощью <button> вы можете использовать теги img и т.д., где текст

<button type='submit'> text -- can be img etc.  </button>

с типом <input>, вы ограничены текстом

Ответ 3

В итоге:

<input type="submit">

<button type="submit"> Submit </button>

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

Однако рекомендуется использовать <button type="submit">, потому что он имеет лучшую семантику, лучшую поддержку ARIA и его легче стилизовать.