Pola Formulir Lanjutan: Atribut form, Token autocomplete, meter, dan progress

1. Mempercepat Pengisian Formulir 10x Lipat dengan Token autocomplete Spesifik

Sebagian besar pengembang hanya tahu autocomplete="on" atau autocomplete="off". Padahal, spesifikasi HTML menyediakan puluhan token autocomplete standar yang memberitahu peramban dan pengelola kata sandi (password manager) secara persis data apa yang diminta oleh sebuah kolom input!

Ketika Anda menuliskan token autocomplete yang tepat, pengguna ponsel cukup menyentuh satu kali untuk mengisi nama, alamat, kode pos, atau kata sandi baru secara akurat:

<!-- Contoh Formulir Ganti Kata Sandi yang Ramah Password Manager -->
<form action="/akun/ubah-sandi" method="post">
  <!-- Menyertakan username tersembunyi membantu Password Manager mengenali akun mana yang sedang diubah sandinya -->
  <input type="text" name="username" value="[email protected]" autocomplete="username" hidden>

  <div>
    <label for="sandi-lama">Kata Sandi Saat Ini</label>
    <input type="password" id="sandi-lama" name="old_password" autocomplete="current-password" required>
  </div>

  <div>
    <label for="sandi-baru">Kata Sandi Baru</label>
    <input type="password" id="sandi-baru" name="new_password" autocomplete="new-password" minlength="12" required>
  </div>

  <button type="submit">Perbarui Kata Sandi</button>
</form>

2. Mengaitkan Input atau Tombol di Luar <form> dengan Atribut form="..."

Terkadang tuntutan tata letak antarmuka (misalnya tombol "Simpan Perubahan" berada di pojok kanan atas bilah <header> atau di kaki modal <dialog>, sedangkan elemen <form> berada di tengah halaman) membuat Anda tidak bisa meletakkan <button type="submit"> sebagai anak langsung di dalam <form>.

Jangan menulis kode JavaScript rumit hanya untuk memanggil form.submit()! Gunakan atribut HTML form="id-formulir" pada <input>, <select>, <textarea>, atau <button>:

<header>
  <h1>Edit Artikel Modul</h1>
  <!-- Tombol ini berada di luar <form>, tetapi tetap mengirim #form-artikel dengan validasi penuh! -->
  <button type="submit" form="form-artikel">Simpan dan Terbitkan</button>
</header>

<main>
  <form id="form-artikel" action="/artikel/simpan" method="post">
    <label for="judul-artikel">Judul Artikel</label>
    <input type="text" id="judul-artikel" name="judul" required>
  </form>
</main>

3. Satu Formulir dengan Dua Tujuan Berbeda (formaction & formnovalidate)

Bagaimana jika sebuah formulir penulisan artikel memiliki dua tombol:

1. "Terbitkan Artikel": Mengirim ke /artikel/terbitkan dan wajib lulus seluruh validasi (required, minlength).
2. "Simpan sebagai Draf": Mengirim ke /artikel/simpan-draf dan boleh disimpan meskipun artikel belum selesai ditulis (melewati validasi required)!

Anda dapat menempelkan atribut formaction dan formnovalidate langsung pada tombol kedua:

<form action="/artikel/terbitkan" method="post">
  <label for="isi-artikel">Isi Materi (Minimal 500 karakter untuk diterbitkan)</label>
  <textarea id="isi-artikel" name="isi" minlength="500" required></textarea>

  <div class="aksi-form">
    <!-- Tombol 1: Melewati validasi required/minlength dan mengirim ke endpoint draf -->
    <button
      type="submit"
      formaction="/artikel/simpan-draf"
      formnovalidate
    >
      Simpan sebagai Draf Sementara
    </button>

    <!-- Tombol 2: Menjalankan validasi penuh dan mengirim ke /artikel/terbitkan -->
    <button type="submit">Terbitkan Sekarang</button>
  </div>
</form>

4. Membedakan <progress> vs <meter>

HTML memiliki dua elemen batang visual yang sering tertukar fungsinya:

1. <progress> (Batang Kemajuan Tugas): Digunakan untuk menunjukkan seberapa jauh suatu proses sedang berjalan menuju 100% selesai (misalnya progres mengunggah berkas atau progres menyelesaikan 8 dari 20 modul kelas). Jika atribut value tidak ditulis (<progress>Memuat...</progress>), ia tampil dalam mode indeterminate (bergerak bolak-balik menandakan proses sedang berlangsung namun persentasenya belum diketahui).
2. <meter> (Alat Ukur Skalar / Gauge): Digunakan untuk menampilkan ukuran nilai di dalam rentang yang diketahui dan memiliki ambang batas baik/waspada/kritis—seperti kapasitas pemakaian diska server, kekuatan kata sandi, atau suhu CPU! <meter> mendukung atribut min, max, low, high, dan optimum sehingga peramban otomatis mengubah warnanya menjadi hijau, kuning, atau merah!

<!-- 1. <progress>: Kemajuan menyelesaikan bab kelas -->
<div>
  <label for="progres-belajar">Kemajuan Kelas HTML:</label>
  <progress id="progres-belajar" value="18" max="20">90% (18 dari 20 modul)</progress>
</div>

<!-- 2. <meter>: Penggunaan diska server dengan ambang batas aman (optimum < low < high) -->
<div>
  <label for="pemakaian-diska">Ruang Penyimpanan Server (/dev/sda1):</label>
  <meter
    id="pemakaian-diska"
    min="0"
    max="100"
    low="70"
    high="90"
    optimum="20"
    value="92"
  >
    92% terpakai (Kritis)
  </meter>
</div>

Latihan Praktik: Antarmuka Editor Modul dengan Simpan Draf dan Indikator Kuota

Buatlah berkas form-lanjutan.html:

1. Buat <form id="editor-modul" action="/modul/terbitkan" method="post"> dengan input judul dan isi.
2. Letakkan tombol "Terbitkan" dan tombol "Simpan Draf" (formaction="/modul/draf" formnovalidate) di luar tag <form> (di dalam <header>) dengan mengaitkannya menggunakan atribut form="editor-modul".
3. Tampilkan indikator kelengkapan belajar dengan <progress> dan indikator pemakaian kuota penyimpanan dengan <meter>.