Apa yang Baru Dengan Formulir di 2022?

Browser terus menambahkan fitur HTML, JavaScript, dan CSS baru. Berikut adalah beberapa tambahan yang berguna untuk bekerja dengan formulir yang mungkin Anda lewatkan…

requestSubmit()

Safari 16 akan menjadi browser terakhir untuk menambahkan dukungan untuk requestSubmit.

Sebelum kita melihat caranya .requestSubmit() berfungsi, mari kita ingatkan diri kita sendiri bagaimana mengirimkan formulir secara terprogram dengan JavaScript bekerja saat menggunakan .submit() metode. Mengirimkan formulir dengan submit() tidak memicu acara kirim. Jadi dalam kode berikut, formulir dikirimkan, preventDefault() tidak berpengaruh, dan tidak ada yang dicatat ke konsol:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() juga akan mengabaikan validasi formulir HTML apa pun. Dengan markup berikut, formulir akan dikirimkan ketika input kosong meskipun input memiliki required atribut:

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() adalah cara alternatif untuk mengirimkan formulir menggunakan JavaScript, tetapi berbeda dengan .submit(), validasi formulir HTML akan mencegah formulir dikirimkan. Jika semua data yang dimasukkan dalam formulir lolos validasi, submit acara akan dipecat, yang berarti "formulir dikirimkan!" akan masuk ke konsol dalam contoh berikut:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

Anda sudah dapat mencapai ini dengan mengklik tombol kirim formulir secara terprogram, tetapi requestSubmit mungkin merupakan solusi yang lebih elegan.

submitter properti dari acara pengiriman

Grafik SubmitEvent.submitter properti diperoleh dukungan lintas-browser penuh dengan rilis Safari 15.4. Properti read-only ini menentukan <button> or <input type="submit"> elemen yang menyebabkan formulir dikirimkan.

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

Bila Anda memiliki beberapa tombol atau input kirim, masing-masing dengan nilai yang berbeda, hanya nilai tombol atau input yang diklik untuk mengirimkan formulir yang akan dikirim ke server, bukan kedua nilai tersebut. Itu bukan hal baru. Apa yang baru adalah bahwa pendengar acara untuk acara yang dikirimkan sekarang memiliki akses ke event.submitter Properti. Anda dapat menggunakan ini untuk menambahkan kelas ke tombol atau input yang memicu pengiriman formulir, misalnya, atau untuk mendapatkan value atau atribut HTML lainnya.

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
})

formdata peristiwa

Ini tidak terlalu baru, tetapi hanya mencapai dukungan lintas-browser dengan rilis Safari 15. Kasus penggunaan utama untuk formdata acara memungkinkan elemen khusus untuk mengambil bagian dalam pengiriman formulir. Di luar komponen web, itu masih bisa berguna.

Anda menambahkan formdata pendengar acara ke formulir yang ingin Anda ajak berinteraksi:

document.querySelector('form').addEventListener('formdata', handleFormdata);

Acara ini dipicu baik oleh pengiriman formulir HTML biasa dan juga oleh terjadinya new FormData(). event.formData menampung semua data yang dikirimkan.

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

Fungsi panggilan balik untuk formdata pendengar acara berjalan sebelum data dikirim ke server, memberi Anda kesempatan untuk menambah atau mengubah data yang dikirim.

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

Anda dapat memodifikasi atau menambahkan FormData di dalam event handler kirim tapi formdata memungkinkan Anda untuk memisahkan logika. Ini juga merupakan alternatif untuk menggunakan input tersembunyi di markup formulir Anda jika Anda mengirimkan formulir "cara kuno" — yaitu mengandalkan fungsionalitas bawaan HTML untuk mengirimkan formulir daripada melakukannya dengan fetch.

showPicker() untuk elemen masukan

showPicker() telah didukung sejak Chrome 99, Firefox 101, dan di Safari 16 yang akan datang. Untuk elemen input yang atribut tipenya adalah Tanggal, Bulan, Minggu, Waktu, datetime-local, warna, atau file, showPicker() menyediakan cara terprogram untuk menampilkan UI pilihan. Untuk input warna dan file, selalu mungkin untuk menampilkan pemilih secara terprogram dengan menelepon .click pada masukan:

document.querySelector('input[type="color"]').click();

Pendekatan itu tidak berfungsi pada input tanggal, itulah sebabnya API baru ini ditambahkan. .showPicker() juga akan bekerja dengan input warna dan file tetapi tidak ada keuntungan nyata untuk menggunakannya secara berlebihan .click().

Atribut lembam

Itu selalu mungkin untuk menonaktifkan beberapa input sekaligus dengan membungkusnya dalam HTML fieldset dan menonaktifkan fieldset:

Inert adalah atribut HTML baru. Ini bukan hanya untuk formulir, tetapi formulir tentu saja merupakan kasus penggunaan utama. tidak seperti disabled atribut, inert dapat diterapkan pada form elemen itu sendiri. Segala sesuatu di dalam formulir tidak akan dapat difokuskan dan tidak dapat diklik. Dalam hal teknologi bantu, inert mirip dengan pengaturan aria-hidden="true". tidak seperti disabled atribut, inert tidak menerapkan gaya apa pun secara default, tetapi mudah untuk menambahkan gaya Anda sendiri:

form[inert] {
  opacity: .2;
}

Masih ada lagi yang akan datang…

Yang besar adalah styling <select> elemen, sesuatu yang diinginkan pengembang selama beberapa dekade. Tampaknya akan menjadi kenyataan dalam waktu dekat dengan diperkenalkannya selectmenu.

Tapi itu saja untuk saat ini! Pembaruan terbaru menghadirkan dukungan browser penuh untuk membentuk fitur yang telah kami tunggu-tunggu, menjadikannya prima untuk penggunaan produksi.