Тип кнопки у формі: чому підказка надсилає запит

Кнопка «Показати підказку» відкриває текст на мить, а потім сторінка перезавантажується. Розробник шукає помилку в JavaScript, хоча причина може бути в HTML: допоміжна кнопка всередині форми поводиться як кнопка надсилання. Тип кнопки у формі визначає не її колір або напис, а стандартну дію браузера. На локальній навчальній сторінці відтворимо зайвий GET-запит і приберемо його, зберігши справжню кнопку пошуку.

Приклад не створює заявок, замовлень або платежів і не підключається до робочого сайту. Використовуйте лише вигаданий пошуковий рядок demo. Не повторюйте початкову помилку в продуктивній формі: її надсилання може мати реальні наслідки. Навчальні англійські підписи й ідентифікатори нижче залишені сталими, щоб їх легко зіставляти з кодом і результатами перевірки.

Побачте навігацію окремо від роботи підказки

Створіть окремий порожній тестовий каталог і новий файл form-demo.html із наведеною розміткою. Потрібні сучасний браузер, текстовий редактор і вже доступний Python 3 лише для локального статичного сервера; сторонні пакети та адміністративні права не потрібні. Не кладіть у цей каталог конфігурації, приватні документи або символічні посилання на інші дані. Не перезаписуйте наявний файл проєкту.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Button type demo</title>
<body>
  <form method="get">
    <label for="q">Query</label>
    <input id="q" name="q" value="demo">
    <button id="hint-toggle" aria-controls="hint"
            aria-expanded="false">Show hint</button>
    <button type="submit">Search</button>
    <p id="hint" hidden>Use a short search phrase.</p>
  </form>
  <script>
    const toggle = document.getElementById("hint-toggle");
    toggle.addEventListener("click", () => {
      document.getElementById("hint").hidden = false;
      toggle.setAttribute("aria-expanded", "true");
    });
  </script>
</body>
</html>

Це навмисно початковий, неправильний варіант: у Show hint немає type. Обробник click відкриває абзац і змінює aria-expanded, але не скасовує стандартну дію кнопки. У цій звичайній формі кнопка без type є кнопкою надсилання. Точні умови й значення атрибута визначає стандарт HTML для button. Не переносіть висновок механічно на спеціальні кнопки з іншими декларативними атрибутами.

У терміналі перейдіть саме до нового тестового каталогу й запустіть команду. Вона відкриває локальний сервер тільки на 127.0.0.1 та показує файли поточного каталогу. Це тимчасовий процес, не налаштування хостингу. Якщо порт зайнятий, оберіть інший вільний номер і замініть його також у браузерній адресі. Не розширюйте прив’язку на всі мережеві інтерфейси.

python3 -m http.server 8765 --bind 127.0.0.1

Відкрийте http://127.0.0.1:8765/form-demo.html і натисніть Show hint. Очікувана ознака початкової помилки — адреса з параметром q=demo та повторне завантаження документа; після нього підказка знову прихована. У Network або журналі локального сервера можна побачити GET із цим параметром. Статичний сервер лише повертає файл: він не реалізує пошук. Перевіряємо саме надсилання форми, а не результати запиту.

Задайте допоміжній кнопці явний тип

Замініть лише відкривальний елемент Show hint у своєму файлі таким фрагментом разом із його вмістом і закривальним тегом. Залиште input, підказку та script без змін. Ідентифікатори hint-toggle і hint умовні; у власному компоненті замінюйте їх узгоджено в HTML, aria-controls і JavaScript. Не змінюйте тип справжньої кнопки Search на button: вона повинна надсилати форму.

<button id="hint-toggle" type="button"
        aria-controls="hint" aria-expanded="false">Show hint</button>

Збережіть файл і відкрийте його знову без параметра запиту. Натисніть Show hint: текст має залишитися видимим, aria-expanded — стати true, а адреса — не змінитися. Потім натисніть Search: тепер саме ця дія повинна додати q=demo до адреси. Якщо обидві кнопки перестали надсилати форму, це не успіх: разом із помилкою ви прибрали потрібний сценарій.

Для допоміжної дії використовуйте type="button", для надсилання — type="submit". type="reset" має інше призначення: повертає поля до початкових значень, а не обов’язково робить їх порожніми. Він не є заміною виправленню випадкового надсилання й може знищити введений користувачем текст. У цій вправі кнопка скидання взагалі не потрібна; не додавайте її лише для симетрії інтерфейсу.

Не приховуйте проблему глобальним перехопленням

Не додавайте preventDefault до кожного click на сторінці як універсальний ремонт. Це ускладнює розуміння звичайних посилань і справжнього submit. Коли форма справді надсилається через JavaScript, окремо проєктують обробник submit, перевірку даних і помилок. Наша вправа не реалізує такий транспорт: вона виправляє семантику однієї допоміжної кнопки, не вимикаючи стандартний шлях надсилання.

Перевірте результат клавіатурою: перейдіть Tab до Show hint і активуйте її Space або Enter, а потім окремо перевірте Search. Натисніть Enter у текстовому полі й зіставте поведінку з вимогами вашої форми. Не вважайте єдине натискання мишею повним тестом. Після повторного завантаження підказка починається прихованою — це свідомий початковий стан прикладу, не механізм збереження вибору.

Якщо кнопка розташована поза видимими межами форми, перевірте її атрибут form: він може пов’язувати елемент із формою за ідентифікатором. Дивіться фактичний DOM після роботи шаблону або компонента, а не лише вихідний фрагмент у редакторі. Вкладати одну форму в іншу не слід; неправильна структура може змінити зв’язки елементів і зробити причину надсилання неочевидною.

Переносьте зміну лише після контрольних сценаріїв

Перед зміною робочого шаблону збережіть поточну версію та перевірте виправлення на тестовому середовищі. Потрібні окремі результати для допоміжної дії, навмисного надсилання та клавіатури. Для повернення відновлюють погоджену версію шаблону, а не вимикають захист форми. Правильний type не замінює серверну перевірку прав, даних або захист від повторних операцій.

Після вправи зупиніть сервер через Ctrl+C й приберіть лише створені навчальні файли. Документація Python попереджає, що http.server не призначений для продуктивного обслуговування. Висновок: явний тип кнопки розділяє допоміжну дію й надсилання; доводять це два різні контрольні сценарії. Для ширшої перевірки дивіться перевірку форми заявки перед запуском. AriZone може допомогти локалізувати небажане надсилання без експериментів із реальними заявками.