Чи можна відправити форму без JavaScript?Так. Ба більше, форми зʼявилися
до JavaScript. І призначалися якраз для
відправки даних на
сервер.
Але чому ми настільки звикли до обробки форм за допомогою JS, що це питання взагалі виникає? Не будемо вдаватися в глибокий історичний аналіз і зійдемося на тому, що потреби інтерфейсів змінювалися набагато швидше, ніж стандарти HTML.
Та сама валідація
(точніш, її історична відсутність), певні особливості перетворення форми на структуровані дані
(чекбокси як масив, ага), не надто зручний UX для відправки файлів і так далі.
Все це виправлялося усе новими й новими JS-бібліотеками, і врешті витіснило з колективної свідомості той факт, що форми, взагалі-то, і самі непогано вміють відправлятися. Щоправда, так само з перезавантаженням сторінки, але шо ж.
Найпростіша поведінка за замовчуванням — це відправка
GET-запиту на сервер.
<form>
<input name="username" />
<input name="password" />
…
</form>
перетворюється на
?username=шпігун&password=нескажу.
Якщо ж вказати
<form method="POST">, то дані підуть не в URL, а в тіло запиту як
application/x-www-form-urlencoded.
Пункт призначення задається через атрибут
action, в якому можна вказати потрібний ендпоїнт.
Файли. Форми вміють відправляти файли. Десь так року з 1995-го.
Для цього достатньо вказати
enctype="multipart/form-data", і бравзер відправлятиме вашу форму у вигляді так званого multipart message, тобто кожне поле — окрема частина, файл — теж окрема частина, зі своїми header, filename, content type і binary body.
Тєлєк, духовка, два крісла Що ще нам для щастя треба?
Наприклад, декларативно задавати різні сценарії відправки форми.
<form action="/article" method="post">
…
<button formaction="/article/publish">Publish</button>
<button formmethod="get" formaction="/article/preview">Preview</button>
</form>
Як бачите, сама кнопка може перевизначати як метод відправки, так і призначення.
Про валідацію перед відправкою всі вже, певно знаю, але згадаю побіжно: так, форми вміють у валідацію. Не таку супернаворочену, як із бібліотеками, але більшість випадків покриває. З цікавого — CSS нині має купу селекторів за валідністю значень в полі введення, як то
:valid,
:invalid,
:required,
:optional,
:in-range,
:out-of-range, що разом з іншими можливостями на кшталт
:has відкриває майже безкрайнє поле можливостей зіпсувати ваш UX через стилі.
disabled поля у валідації участі не беруть (та й не відправляються взагалі), а readonly не блокує відправку, навіть якщо воно required і при цьому пусте. Ну бо користувач не може змінити його значення.
І так, перезавантаження сторінки неминуче. Відправки форми завжди ініціює навігацію. Це вже інше питання, як її обробляє сервер, але для користувача сторінка оновиться в будь-якому випадку.
Чи ні? Існує певний, кхм, хак, який дозволяє уникнути цього сценарію за допомогою старого доброго
iframe. Усі ж люблять хаки з
iframe, правда?
<iframe name="result" hidden></iframe>
<form action="/upload" method="post" target="result">
<input name="title">
<button>Send</button>
</form>
Тут нюанс в тому, що якщо щось піде не так з обробкою форми, то про це знатиме тільки iframe, а не ми. Ніхто не казав, що буде легко, це ж хак, а не best practice.
А, ще форму можна сабмітити в межах сторінки тепер за допомогою
dialog:
<dialog id="confirmDialog">
<form method="dialog">
…
<button value="cancel">Cancel</button>
<button value="confirm">Delete</button>
</form>
</dialog>
dialog.addEventListener('close', () => {
console.log(dialog.returnValue);
});Насправді, базових можливостей форми без JS вистачає аби покрити переважну більшість випадків, просто ми вже звикли якось все переускладнювати. Якщо у вас не монструозна форма на десять екранів зі складними залежностями, швидше за все, вам цілком вистачить простого
method="POST". Спробуйте.
@babichdev 
