Кнопка HTML, щоб НЕ надсилати форму

370

У мене форма. Поза формою у мене є кнопка. Проста кнопка, як це:

<button>My Button</button>

Тим не менше, коли я натискаю на нього, він подає форму. Ось код:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Все, що ця кнопка повинна зробити - це деякий JavaScript. Але навіть коли це виглядає так, як у наведеному вище коді, він подає форму. Коли я змінюю кнопку тегу на проміжок, вона працює чудово. Але, на жаль, це має бути кнопка. Чи є спосіб блокувати цю кнопку від подання форми? Як наприклад

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

javascript html

— арік
джерело

3

Ця проблема не підлягає відновленню в сучасних браузерах, і ця проблема спочатку може бути наслідком непорозуміння. Хоча за замовчуванням для buttonцього type=submitнемає, немає форми, яку слід подавати, коли buttonелемент знаходиться поза будь-якою формою. Якщо не можна навести фактичну демонстрацію (зразок документа, ідентифікація веб-переглядача та опис спостережень, які свідчать про те, що подано певну форму), це питання слід закрити як невідтворювальне. Використання type=buttonє хорошою практикою, але це не робить проблему реальною.

— Jukka K. Korpela

894

Я думаю, що це найприємніша маленька особливість HTML ... Ця кнопка повинна бути типу "кнопка", щоб не надсилатись.

<button type="button">My Button</button>

Оновлення 5 лютого 2019 року: Відповідно до життєвого стандарту HTML (а також специфікації HTML 5 ):

Пропущене значення по замовчуванням і неприпустиме значення по замовчуванням є Submit стану кнопки.

— Дейв Маркл
джерело

9

@Powerslave будь-яких причин неto use <button>

— Сандіп Пінгл

4

@SandipPingle Немає ніяких причин використовувати його, якщо тільки вам не потрібен якийсь дійсно складний вид укладання. Крім того, <button>в деяких випадках IE6 і IE7 (на щастя, припиняється) неправильно обробляють s. Крім того, <button>не є 100% сумісним переглядач у тому, що різні браузери можуть подавати різні значення для одного і того ж, <button>коли вони використовуються у формі.

— Powerslave

35

Це чудова відповідь, але це не особливість . Значенням typeатрибута в <button>тегу за замовчуванням є submit. Якщо зміниться на type=button, то <button>не задано поведінку за замовчуванням. Дивіться typeатрибут тут: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Майкл Бенджамін

1

Отже, що таке ідея <button type='submit'>Це занадто важко для мене ха-ха. У будь-якому випадку ваша відповідь чудово працює!

— divHelper11

2

Типова (і, таким чином, неявна) поведінка неспецифічного елемента полягає в запусканні потенційно руйнівної функції, що залежить від форми. Як це не специфічне дизайнерське рішення для специфікації HTML?

— ЗаслуженийМуль

36

return false;в кінці обробник onclick зробить роботу. Однак краще просто додати type="button"до цього <button>- таким чином він поводиться правильно, навіть без JavaScript.

— ThiefMaster
джерело

1

Кнопки, які не подають форми, корисні лише з увімкненим JavaScript ... Я згоден, що type = "button" є чистішим.

— ThiefMaster

2

return false;працює не у всіх сценаріях, тоді type="Button"як. Навіть із включеним JavaScript.

— brejoc

15

Дейв Маркл правильний. З веб-сайту W3School :

Завжди вказуйте атрибут типу для кнопки. Типовим типом для Internet Explorer є "кнопка", тоді як в інших браузерах (і в специфікації W3C) це "подати".

Іншими словами, браузер, який ви використовуєте, відповідає специфікації W3C.

— Герт Гренадер
джерело

15

За замовчуванням кнопки html подають форму.

Це пов’язано з тим, що навіть кнопки, розташовані поза формою, виступають в якості подаючих (див. Веб-сайт W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Іншими словами, тип кнопки за замовчуванням "подати"

<button type="submit">Button Text</button>

Тому простий спосіб обійти це використання типу кнопки .

<button type="button">Button Text</button>

Інші параметри включають повернення помилки в кінці onclick або будь-якого іншого обробника, коли натискається кнопка, або використання тегу <input> замість

Щоб дізнатися більше, ознайомтеся з інформацією про кнопки Мережі розробників Mozilla: https://developer.mozilla.org/uk/docs/Web/HTML/Element/button

— GJZ
джерело

3

<Button>Тег рекомендується не використовувати . Використовувати<Input type='Button' onclick='return false;'> замість тегу. (Використання "return false" дійсно не повинно надсилати форму.)

Деякі довідкові матеріали

— Тім
джерело

2

Її достатньо використовувати <input type="button" />, і достатньо return false;- не потрібно робити обох.

— Том

Я не згоден, що рекомендується не використовувати тег кнопок. Якщо ви не користуєтесь ним, ви втрачаєте деякі функції доступності, які ви автоматично отримаєте за допомогою тегу кнопок. Я б сказав, що тег кнопки насправді рекомендується для елементів, які виконують роль кнопок.

— CookieMonster

згідно з приміткою до довідкового матеріалу, з яким ви посилаєтеся: "Хоча <input> елементи кнопки типу все ще є абсолютно правильним HTML, новіший <button> елемент тепер є сприятливим способом створення кнопок". Тож саме навпаки ви заявили.

— jedzej

1

З причини доступності я не зміг її зняти за допомогою декількох type=submitкнопок. Єдиний спосіб працювати з власними formкнопками з кількома кнопками, але ТІЛЬКИ можна надіслати форму при натисканні Enterклавіші - переконатися, що лише одна з них є, type=submitа інші - в іншому типу type=button. Таким чином, ви можете скористатися кращим досвідом роботи в роботі з формою в браузері з точки зору підтримки клавіатури.

— мотс
джерело

0

Інший варіант, який працював для мене, - додати onsubmit = "return false;" до тегу форми.

<form onsubmit="return false;">

Семантично, ймовірно, не настільки вдале рішення, як описані вище методи зміни типу кнопки, але здається, що це варіант, якщо ви просто хочете, щоб елемент форми не надсилався.

— kk64738
джерело