inputявляется пустым элементом. Не используйте <input />, просто используйте <input>.
CDT
@ HakanFıstık, не DUP этого, там, что это (более или менее тонко) отличаются один, например , type=submitдля buttonдаже не было проблемой там (вероятно , потому , что она даже не была частью станд. Тогда (AFAIK), когда этот другой вопрос был задан).
СЗ
Ответы:
121
Не уверен, откуда вы берете свои легенды, но:
Отправить кнопку с <button>
Как с:
<buttontype="submit">(html content)</button>
IE6 отправит весь текст для этой кнопки между тегами, другие браузеры передадут только значение. Использование <button>дает вам больше свободы макета по сравнению с дизайном кнопки. Во всех своих намерениях и целях он сначала казался превосходным, но иногда из-за различных особенностей браузера его было трудно использовать.
В вашем примере IE6 отправит textна сервер, в то время как большинство других браузеров ничего не отправит. Чтобы сделать его кросс-браузерным, используйте <button type="submit" value="text">text</button>. Еще лучше: не используйте значение, потому что если вы добавляете HTML, оно становится довольно сложным, что получается на стороне сервера. Вместо этого, если вам необходимо отправить дополнительное значение, используйте скрытое поле.
Кнопка с <input>
Как с:
<inputtype="button"/>
По умолчанию это почти ничего не делает. Он даже не отправит вашу форму. Вы можете только разместить текст на кнопке и задать ей размер и границу с помощью CSS. Его первоначальное (и текущее) намерение состояло в том, чтобы выполнить скрипт без необходимости отправки формы на сервер.
Обычная кнопка отправки с <input>
Как с:
<inputtype="submit"/>
Как и первый, но на самом деле подчиняется окружающей форме.
Кнопка отправки изображения с <input>
Как с:
<inputtype="image"/>
Как и первый (отправить), он также отправит форму, но вы можете использовать любое изображение. Раньше это был предпочтительный способ использовать изображения в качестве кнопок, когда форму необходимо отправить. Для большего контроля, <button>теперь используется. Это также может быть использовано для карт изображений на стороне сервера, но это редкость в наши дни. Когда вы используете usemap-attribute и (с этим атрибутом или без него), браузер отправляет X / Y-координаты указателя мыши на сервер (точнее, расположение указателя мыши внутри кнопки в тот момент, когда вы щелкаете по нему). Если вы просто игнорируете эти дополнения, это всего лишь кнопка отправки, замаскированная под изображение.
Между браузерами есть некоторые тонкие различия, но все они отправляют атрибут value, за исключением <button>тега, как описано выше.
Так как вы все равно редактировали, точка зрения о IE6 остается верной с IE11 в режиме причуд. (Еще одна причина не использовать режим причуд). Исправлено в Edge хотя. О, и между <input> и <button> больше различий: <input> white-space:preпо умолчанию имеет , <button> нет. Это становится очевидным при попытке сделать кнопку шире, чем область просмотра.
Мистер Листер,
19
С помощью <button>вы можете использовать теги IMG и т. Д., Где текст
<buttontype='submit'> text -- can be img etc. </button>
с <input type="image" />вами не ограничивается текст, и он также выполняет отправку.
Авель
2
@Abel: это больше , чтобы создать карту изображения , которая , в свою очередь , отправляет положение указателя мыши , как name.xи name.yпараметры (обратите внимание , что nameпараметр нет!). Я бы предпочел использовать <input type="submit">с фоном CSS, если единственной целью является кнопка с фоновым изображением.
BalusC
@BalusC: Да, но на момент написания стандарта HTML 2.0, когда не было CSS, целью было, как описано, использовать изображение в качестве кнопки или карты изображения на стороне сервера. Но действительно, вы можете (ab) использовать обычную кнопку с фоновым изображением, чтобы сделать то же самое с CSS и HTML.
Авель
@Abel: Это никогда не было целью input type="image". Для этого <button type="submit">намерен.
BalusC
1
@BalusC: возможно, мы понимаем стандарт по-разному, но это в исходном тексте Ли для стандарта HTML 2.0: обработка « TYPE=IMAGE' implies TYPE = SUBMIT»; то есть, когда выбирается пиксель, отправляется форма в целом ». , Сделайте из этого то, что вы считаете настоящим намерением :)
<input type="submit">и<button type="submit">?inputявляется пустым элементом. Не используйте<input />, просто используйте<input>.type=submitдляbuttonдаже не было проблемой там (вероятно , потому , что она даже не была частью станд. Тогда (AFAIK), когда этот другой вопрос был задан).Ответы:
Не уверен, откуда вы берете свои легенды, но:
Отправить кнопку с
<button>Как с:
IE6 отправит весь текст для этой кнопки между тегами, другие браузеры передадут только значение. Использование
<button>дает вам больше свободы макета по сравнению с дизайном кнопки. Во всех своих намерениях и целях он сначала казался превосходным, но иногда из-за различных особенностей браузера его было трудно использовать.В вашем примере IE6 отправит
textна сервер, в то время как большинство других браузеров ничего не отправит. Чтобы сделать его кросс-браузерным, используйте<button type="submit" value="text">text</button>. Еще лучше: не используйте значение, потому что если вы добавляете HTML, оно становится довольно сложным, что получается на стороне сервера. Вместо этого, если вам необходимо отправить дополнительное значение, используйте скрытое поле.Кнопка с
<input>Как с:
По умолчанию это почти ничего не делает. Он даже не отправит вашу форму. Вы можете только разместить текст на кнопке и задать ей размер и границу с помощью CSS. Его первоначальное (и текущее) намерение состояло в том, чтобы выполнить скрипт без необходимости отправки формы на сервер.
Обычная кнопка отправки с
<input>Как с:
Как и первый, но на самом деле подчиняется окружающей форме.
Кнопка отправки изображения с
<input>Как с:
Как и первый (отправить), он также отправит форму, но вы можете использовать любое изображение. Раньше это был предпочтительный способ использовать изображения в качестве кнопок, когда форму необходимо отправить. Для большего контроля,
<button>теперь используется. Это также может быть использовано для карт изображений на стороне сервера, но это редкость в наши дни. Когда вы используетеusemap-attribute и (с этим атрибутом или без него), браузер отправляет X / Y-координаты указателя мыши на сервер (точнее, расположение указателя мыши внутри кнопки в тот момент, когда вы щелкаете по нему). Если вы просто игнорируете эти дополнения, это всего лишь кнопка отправки, замаскированная под изображение.Между браузерами есть некоторые тонкие различия, но все они отправляют атрибут value, за исключением
<button>тега, как описано выше.источник
white-space:preпо умолчанию имеет , <button> нет. Это становится очевидным при попытке сделать кнопку шире, чем область просмотра.С помощью
<button>вы можете использовать теги IMG и т. Д., Где текстс
<input>типом, вы ограничены текстомисточник
<input type="image" />вами не ограничивается текст, и он также выполняет отправку.name.xиname.yпараметры (обратите внимание , чтоnameпараметр нет!). Я бы предпочел использовать<input type="submit">с фоном CSS, если единственной целью является кнопка с фоновым изображением.input type="image". Для этого<button type="submit">намерен.TYPE=IMAGE' impliesTYPE = SUBMIT»; то есть, когда выбирается пиксель, отправляется форма в целом ». , Сделайте из этого то, что вы считаете настоящим намерением :)В итоге :
Оба по умолчанию визуально нарисуют кнопку, выполняющую одно и то же действие (отправьте форму).
Однако его рекомендуется использовать,
<button type="submit">поскольку он имеет лучшую семантику, лучшую поддержку ARIA и его легче стилизовать.источник