Button type: Атрибут type | htmlbook.ru

Семантика обычно становится важной в какой-то момент жизненного цикла вашего приложения, поэтому неплохо было бы завести привычку указывать тип

Единственная другая причина, которая может иметь значение, это наличие правила стиля, определяющего [type=button] или что-то в этом роде. Однако это не рекомендуется.

Тип кнопки по умолчанию — «Отправить». MDN не говорит об этом, насколько я понимаю, но это доступно в спецификации html5.

Отсутствующее значение по умолчанию — это состояние кнопки отправки.

Таким образом, установка типа «кнопка» отключает поведение по умолчанию при отправке формы, поэтому вам не нужно использовать preventDefault для обработки этого в javascript.

<кнопка> по умолчанию тип = "отправить" это означает, что если он находится внутри элемента формы, он попытается отправить форму. Вы можете привязать к нему событие клика и выполнить какое-то действие.

<тип кнопки="кнопка"> означает, что это обычная кнопка, а вы должны привязать к ней событие click , чтобы выполнить какое-либо действие.

Также есть , где он отправляет форму при нажатии.

Итак, если вы хотите выполнить POST с помощью ajax, лучше всего использовать

, чтобы форма не отправлялась при нажатии кнопки.

Тип кнопки по умолчанию фактически отправить . Это поясняет, что не должно быть опции публикации, а должен быть просто кликабельный объект.

Мой личный опыт с

s, у которых не указан тип, заключается в том, что всякий раз, когда они нажимались, кнопка сохранения для сохранения изменений в форме автоматически отключалась, хотя фактического отправки/отправки запроса не было. делалось.

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

Кнопка сохранения будет правильно отключена, так как определение было ng-disabled="form.$submitted" , чтобы после сохранения нельзя было нажать еще раз.

Я понял, что происходит, увидев в отладчике, что флаг формы AngularJS $submitted является истинным, а также недавно был изменен.

Я исправил проблему, установив тип кнопки на «кнопка» , чтобы она не вызывала изменение состояния отправки формы, что она делала из-за того, что ее тип по умолчанию был «отправить» , как указано в другие ответы.

Насколько я могу судить, элемент

был представлен в HTML4, и с тех пор submit был типом по умолчанию.

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — против .

Что использовать?

спросил 14 лет, 3 месяца назад

Изменено 12 дней назад

Просмотрено 679 тысяч раз

При просмотре большинства сайтов (включая SO), большинство из них используют:

вместо:

 <кнопка>
 

• Каковы основные различия между ними, если они есть?
• Есть ли веские причины использовать один вместо другого?
• Есть ли веские причины для их объединения?
• Приводит ли использование

к проблемам совместимости, учитывая, что оно не очень широко используется?

• html
• кнопка
• совместимость

3

• Вот страница с описанием различий (в основном вы можете поместить html в

)

Другая проблема IE при использовании :

И пока мы говорим об IE, это есть пара ошибок, связанных с ширина пуговиц. Это будет таинственно добавить дополнительное дополнение, когда вы пытаетесь чтобы добавить стили, то есть вы должны добавить крошечный хак, чтобы получить вещи под контроль.

3

В качестве примечания,

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

Редактировать — подробнее

Без типа, кнопка неявно получает тип отправить . Неважно, сколько кнопок отправки или входов в форме, любая из них, которая явно или неявно указана как submit, при нажатии отправит форму.

Есть 3 поддерживаемых типа кнопки

 отправить || "отправляет форму при нажатии (по умолчанию)"
сбросить || "сбрасывает поля в форме при клике"
кнопка || «кликабельно, но без какого-либо обработчика событий, пока он не будет назначен»
 

0

Эта статья предлагает довольно хороший обзор различий.

Со страницы:

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки созданный с помощью элемента INPUT, но они предлагают более богатую визуализацию возможности: элемент BUTTON может иметь содержание. Например, КНОПКА элемент, содержащий изображение функции похожи и могут напоминать Элемент INPUT, тип которого установлен на «изображение», но тип элемента BUTTON позволяет содержание.

Элемент кнопки — W3C

0

Внутри элемента

вы можете поместить содержимое, например текст или изображения.

Нажми на меня!

Это разница между этим элементом и кнопками, созданными с помощью элемента .

0

Цитата

Важно! Если вы используете элемент кнопки в HTML-форме, разные браузеры будут отправлять разные значения. Internet Explorer отправит текст между тегами и , в то время как другие браузеры отправят содержимое атрибута value. Используйте элемент ввода для создания кнопок в HTML-форме.

Откуда: http://www.w3schools.com/tags/tag_button.asp

Если я правильно понимаю, ответ — совместимость и согласованность ввода из браузера в браузер

0

Я процитирую статью The Difference Between Anchors, Inputs and Buttons:

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

Ввод ( ) представляет поле данных: так что некоторые пользовательские данные вы хотите отправить на сервер. Существует несколько типов ввода, связанных с кнопками:

• <тип ввода = "файл">
• <тип ввода = "сброс">
• <тип ввода="кнопка">

Каждый из них имеет значение, например « file » используется для загрузки файла, « reset » очищает форму, а « submit » отправляет данные на сервер. Проверьте ссылку W3 на MDN или на W3Schools.

Элемент кнопки ( ) весьма универсален:

• вы можете вкладывать элементы в кнопку, такие как изображения, абзацы или заголовки;
Кнопки
• также могут содержать псевдоэлементы ::before и ::after ;
Кнопки
• поддерживают атрибут disabled . Это позволяет легко поворачивать их включать и выключать.

Опять же, проверьте ссылку W3 для тега

на MDN или на W3Schools.

0

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

, больше не существуют, и поэтому настоятельно рекомендуется его использовать.

Если вы не можете этого сделать по разным причинам, просто не забудьте добавить атрибут role=»button» в свой тег по мере доступности. Эта статья достаточно информативна: https://www.deque.com/blog/accessible-aria-buttons/

Цитирование страницы форм в руководстве HTML:

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности визуализации: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, который содержит изображение, действует подобно элементу INPUT, тип которого установлен на «изображение», и может напоминать его, но тип элемента BUTTON допускает содержимое.

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

1

 <кнопка>
 

• по умолчанию ведет себя так, как если бы у него был атрибут «type=»submit»
• можно использовать как без формы, так и в формах.
• разрешено текстовое или html-содержимое
• разрешены псевдоэлементы css (например: раньше)
Имя тега
• обычно уникально для одной формы

против

• тип должен быть установлен на «отправить», чтобы вести себя как отправляющий элемент
• можно использовать только в формах.
• разрешено только текстовое содержимое
• нет псевдоэлементов css
• то же имя тега, что и у большинства элементов форм (входов)

—
в современных браузерах оба элемента легко стилизуются с помощью css, но в большинстве случаев элемент button предпочтительнее, так как вы можете стилизовать больше с помощью внутренних html и псевдоэлементов

Что касается стилей CSS, то < button type="submit">Пример

лучше, поскольку он дает вам возможность использовать псевдоклассы CSS :before и :after , которые могут помочь.

Из-за того, что визуально отличается от или при стилизации с классами в определенных ситуациях, я избегаю их.

Стоит отметить, что текущий лучший ответ был написан в 2009 году. IE6 сейчас не вызывает беспокойства, поэтому Wins 9Последовательность укладки 0012 в моих глазах выходит на первое место.

Я просто хочу добавить кое-что к остальным ответам здесь. Элементы input считаются пустыми или недействительными элементами (другими пустыми элементами являются area, base, br, col, hr, img, input, link, meta и param. Вы также можете проверить здесь), что означает, что они не могут иметь никакого содержимого. Помимо отсутствия содержимого, пустые элементы не могут иметь никаких псевдоэлементов, таких как ::after и ::before , что я считаю большим недостатком.

Существует большая разница, если вы используете jQuery. jQuery знает о большем количестве событий для ввода, чем для кнопок. На кнопках jQuery знает только о событиях «щелчок». При вводе jQuery знает о событиях «щелчок», «фокус» и «размытие».

Вы всегда можете привязать события к своим кнопкам по мере необходимости, но просто помните, что события, о которых jQuery автоматически знает, отличаются. Например, если вы создали функцию, которая выполнялась всякий раз, когда на вашей странице происходило событие «фокусировка», вход запускал функцию, а кнопку — нет.

2

может содержать HTML. Более того, стилизовать с помощью CSS намного проще, и стиль фактически применяется во всех браузерах. Однако у Internet Explorer (Eww! IE!) есть некоторые недостатки. Internet Explorer неправильно определяет атрибут value, используя в качестве значения содержимое тега. Все значения в форме отправляются на сервер, независимо от того, нажата кнопка или нет. Это делает использование его в качестве сложно и больно.

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

. Его также сложнее стилизовать, и стиль не всегда хорошо работает во всех браузерах. Надеюсь, это помогло.

Кроме того, одно из отличий может исходить от поставщика библиотеки и того, что они кодируют. например, здесь я использую платформу Cordova в сочетании с мобильным угловым пользовательским интерфейсом, и хотя теги input/div/etc хорошо работают с ng-click, кнопка может вызвать сбой отладчика Visual Studio, конечно, из-за различий, которые вызвал программист; обратите внимание, что ответ MattC указывает на ту же проблему, jQuery - это просто библиотека, и провайдер не подумал о некоторых функциях для одного элемента, которые он/она предоставляет для другого. поэтому, когда вы используете библиотеку, вы можете столкнуться с проблемой с одним элементом, с которой вы не столкнетесь с другим.

No related posts.