Html input button type: — HTML: HyperText Markup Language — Вебджем.рф | Создание и продвижение сайтов

Содержание

javascript — Теги form, input, button — непонятное поведение

Вопрос задан 1 год 4 месяца назад

Изменён 1 год 4 месяца назад

Просмотрен 54 раза

Суть проблемы: когда инпут и кнопка обернуты в форму, то при нажатии Enter на инпуте, срабатывает событие click на кнопке. Почему так происходит и как сделать так, чтобы клик на кнопке не срабатывал?

const btn = document.querySelector('button')
btn.addEventListener('click', (e) => {
  console.log(e.type, e.target.nodeName)
})
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
})

<form action="">
  <input type="text">
  <button>Кнопка</button>
</form>

javascript
html
form
события

Спасибо комментариям, подсказали правильное направление. Оказалось, что проблему можно решить, если разорвать связь между кнопкой и формой. Для этого кнопке надо установить атрибут form, который будет указывать на другую форму. В моем случае, я, вообще, оставил этот атрибут пустым

const btn = document.querySelector('button')
btn.addEventListener('click', (e) => {
  console.log(e.type, e.target.nodeName)
})
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
})

<form action="">
  <input type="text">
  <button form="">Кнопка</button>
</form>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — против . Что использовать?

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

Изменено 22 дня назад

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

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

вместо:

 <кнопка>

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

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

Вот страница с описанием различий (в основном вы можете поместить html в <кнопка> )
И еще одна страница с описанием того, почему люди избегают (Подсказка: IE6)

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

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

Цитата

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