<input> elemen tipe reset dirender sebagai tombol, dengan event handler click default yang menyetel ulang semua input dalam formulir ke nilai awalnya
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" /> 3, atau lebih baik lagi, elemen <input type="reset" /> 4
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" /> 9 ke <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> 1 atau <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> 2;