Bagaimana Anda mencegah formulir membersihkan bidang saat mengirimkan html?

Catatan. Anda biasanya harus menghindari menyertakan tombol setel ulang dalam formulir Anda. Mereka jarang berguna, dan sebaliknya lebih cenderung membuat frustrasi pengguna yang mengkliknya secara tidak sengaja (sering kali saat mencoba mengklik tombol kirim)

Atribut elemen <input type="reset">_ berisi string yang digunakan sebagai label tombol. Tombol seperti reset_ sebaliknya tidak memiliki nilai

<input type="reset" value="Reset the form" />

Jika Anda tidak menentukan value, Anda akan mendapatkan tombol dengan label default (biasanya "Reset", tetapi ini akan bervariasi tergantung pada agen pengguna)

<input type="reset" />

<input type="reset"> tombol digunakan untuk mengatur ulang formulir. Jika Anda ingin membuat tombol kustom dan kemudian menyesuaikan perilaku menggunakan JavaScript, Anda perlu menggunakan

<input type="reset" />

<input type="reset" />

Kami akan mulai dengan membuat tombol reset sederhana

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Ini membuat seperti itu

Coba masukkan beberapa teks ke dalam bidang teks, lalu tekan tombol reset

Untuk menambahkan pintasan keyboard ke tombol setel ulang — sama seperti yang Anda lakukan dengan <input> mana pun yang masuk akal — Anda menggunakan atribut global

Dalam contoh ini, r ditentukan sebagai kunci akses (Anda harus menekan r ditambah tombol pengubah khusus untuk kombinasi browser/OS Anda; lihat daftar yang bermanfaat)

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

Masalah dengan contoh di atas adalah tidak ada cara bagi pengguna untuk mengetahui apa kunci aksesnya. Ini terutama benar karena pengubah biasanya tidak standar untuk menghindari konflik. Saat membuat situs, pastikan untuk memberikan informasi ini dengan cara yang tidak mengganggu desain situs (misalnya dengan menyediakan tautan yang mudah diakses yang mengarah ke informasi tentang apa kunci akses situs itu). Menambahkan keterangan alat ke tombol (menggunakan atribut) juga dapat membantu, meskipun ini bukan solusi lengkap untuk tujuan aksesibilitas

Untuk menonaktifkan tombol reset, tentukan atribut global di atasnya, seperti itu

<input type="reset" value="Disabled" disabled />

Anda dapat mengaktifkan dan menonaktifkan tombol saat dijalankan dengan menyetel

<input type="reset" />

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

Bagaimana cara menghentikan formulir agar tidak mengatur ulang saat mengirimkan javascript?

Bagaimana cara mengirimkan formulir tanpa memuat ulang halaman?

Bagaimana Anda mencegah pemuatan ulang halaman pada form submit HTML?

Bagaimana Anda menyimpan data dalam input setelah formulir dikirimkan?