Penjelasan atribut action di formulir HTML

Atribut action adalah URL tujuan data formulir. Nilai relatif di-resolve terhadap alamat halaman, nilai kosong atau tidak ada berarti halaman itu sendiri, dan formaction di tombol submit menimpanya untuk tombol itu. Di situs statis, atur ke URL lengkap backend formulir seperti https://ikiform.com/f/<formId>, karena host Anda sendiri tidak bisa menerima POST.

Kebanyakan formulir yang rusak di situs statis rusak di atribut yang satu ini. Markup terlihat baik, tombol berfungsi, dan browser menampilkan 405 atau halaman kosong, karena data pergi ke tempat yang tidak bisa menerimanya. Halaman ini menunjukkan persis ke mana sebuah action mengirim data, lalu memakai formaction untuk mengarahkan satu formulir ke dua inbox.

Apa yang berbeda di sini

action adalah URL seperti href lainnya, dengan satu perbedaan: formulir tanpa action bukannya tidak melakukan apa-apa, melainkan mengirim ke halaman tempatnya berada. Di situs yang dirender server, halaman itu mungkin menangani post. Di host statis tidak bisa, jadi action yang tidak ada atau relatif baru gagal setelah Anda deploy.

Ke mana setiap nilai mengirim data

Ambil halaman di https://example.com/company/contact.html dan lima formulir di dalamnya:

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
<form action="/api/contact" method="post">
<form action="send" method="post">
<form action="" method="post">
<form method="post">

Periksa apa yang akan dipakai browser

Di console browser, atribut dan property berbeda. getAttribute mengembalikan apa yang Anda tulis; property action mengembalikan URL hasil resolve yang benar-benar akan dituju browser:

const form = document.querySelector("form");
form.getAttribute("action");
form.action;

Jika form.action menampilkan domain Anda sendiri, ke sanalah data pergi. Builder seperti Webflow dan Framer sering mengatur action dari panel pengaturannya sendiri, jadi periksa halaman yang dipublikasikan, bukan source Anda. Panduan site builder menyebutkan di mana setiap builder menyimpannya.

Satu formulir, dua inbox

formaction di tombol submit menggantikan action formulir hanya untuk tombol itu. Di sini, satu set field dikirim ke dua formulir Ikiform. Ask support mengirim ke formulir support, Talk to sales ke formulir sales, dan setiap formulir Ikiform mengirim email ke penerimanya sendiri:

<form action="https://ikiform.com/f/frm_supportxxxxxxxxx" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="message">How can we help?</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Ask support</button>
  <button formaction="https://ikiform.com/f/frm_salesxxxxxxxxxxx">Talk to sales</button>
</form>

• Setiap formulir Ikiform punya penerima notifikasi, pengaturan spam, dan webhook sendiri, jadi support dan sales tidak pernah melihat email satu sama lain.
• Kedua formulir butuh definisi field yang sama, atau tidak ada sama sekali. Dengan field terdefinisi, field yang tidak dikenal salah satu formulir ditolak dengan 422.
• Atribut form* lainnya bekerja dengan cara yang sama: formmethod, formenctype, formnovalidate, dan formtarget. Tombol Save draft dengan formnovalidate melewati pemeriksaan browser.
• formaction hanya bekerja di tombol submit: <button>, <input type="submit">, dan <input type="image">.

Alternatifnya adalah satu formulir Ikiform dengan field topic, dan pengarahan berdasarkan topik di webhook atau filter inbox Anda. Itu mempertahankan satu daftar dan satu ekspor. Dua formulir lebih sederhana jika kedua tim sama sekali tidak boleh berbagi penerima.

action dengan query string

Dengan method="get", browser mengganti query string action dengan field formulir. lang=de di formulir pertama di bawah dibuang diam-diam; formulir kedua mempertahankannya sebagai input tersembunyi:

<form action="/search?lang=de" method="get">
  <input name="q" />
</form>

<form action="/search" method="get">
  <input name="q" />
  <input type="hidden" name="lang" value="de" />
</form>

Dengan method="post" query string dipertahankan, karena field masuk ke body. Itu tidak mengubah apa pun bagi Ikiform: parameter query di URL endpoint tidak disimpan, jadi gunakan input tersembunyi untuk nilai yang ingin Anda simpan.

Input di luar formulir

Layout terkadang butuh input yang tidak berada di dalam elemen <form>, seperti pendaftaran di footer di samping konten lain. Atribut form di input atau tombol menggabungkannya ke formulir berdasarkan id, dan input itu dikirim ke action formulir tersebut:

<form id="newsletter" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post"></form>

<footer>
  <input form="newsletter" name="email" type="email" required />
  <button form="newsletter">Subscribe</button>
</footer>

Action mailto: dan javascript:

action="mailto:you@example.com" meminta aplikasi email pengunjung membuka pesan berisi field. Tidak ada yang terkirim kecuali mereka punya aplikasi email yang sudah disiapkan dan menekan kirim, dan Anda tidak pernah tahu bahwa mereka mencoba. action="javascript:..." menjalankan kode alih-alih mengirim dan diblokir oleh kebanyakan content security policy. Keduanya layak diganti dengan endpoint sungguhan.

Pastikan berfungsi

1. Di Allowed domains formulir, tambahkan domain situs Anda, ditambah localhost selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
2. Buka halaman yang dipublikasikan, bukan source Anda, dan jalankan document.querySelector("form").action di console. Hasilnya menampilkan URL Ikiform lengkap Anda.
3. Kirim formulir. Panel Network menampilkan POST ke ikiform.com yang dijawab 303, bukan POST ke domain Anda sendiri.
4. Di formulir dua inbox, kirim sekali dengan setiap tombol. Setiap kiriman muncul di bawah formulirnya sendiri di dashboard.
5. Cek inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field, dan Reply terkirim ke pengirim formulir jika formulir punya field email.

Hal yang sering menjebak

Untuk alur pengiriman lengkap, dari klik hingga redirect, lihat ringkasan. Semua yang diterima endpoint ada di formulir HTML.

Pertanyaan