Разница между <input type = 'submit' /> и <button type = 'submit'> text </button> - PullRequest
130 голосов
/ 23 августа 2010

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

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

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

Ответы [ 2 ]

108 голосов
/ 23 августа 2010

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

Кнопка отправки с <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 и (с этим атрибутом или без него) браузер будет отправлять координаты X / Y указателя мыши на сервер (точнее, местоположение указателя мыши внутри кнопки в тот момент, когда вы щелкнете мышью).Это).Если вы просто проигнорируете эти дополнения, то это всего лишь кнопка отправки, замаскированная под изображение.

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

17 голосов
/ 23 августа 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...