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

О них много легенд. Я хочу знать правду. Каковы различия между двумя следующими примерами?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

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

Отправить кнопку с <button>

Как с:

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

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

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

Кнопка с <input>

Как с:

<input type="button" />

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

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

Как с:

<input type="submit" />

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

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

Как с:

<input type="image" />

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

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

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

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

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

В итоге :

<input type="submit">

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

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

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