sebuah form membutuhkan tombol untuk mengirimkan data yang telah di input, kita akan belajar cara membuat tombol button, submit dan reset pada html.
tutorial ini bagian dari tutorial lanjutan mengenal atribut input pada html.
Input button html
nilai atribut type=”button” adalah tombol yang dapat digunakan untuk memicu tindakan pada halaman web tanpa mengirimkan formulir.
<input type="button" value="tombol">
Code language: HTML, XML (xml)jika kita memerlukan tombol yang berisi elemen lain bisa menggunakan tag button, tag button bisa berisi konten dan ada tag penutupnya sedangkan input type=”button” tidak ada tag penutup.
<button type="button">tombol</button>
memakai tag input atau tag button hasilnya akan sama saja, mari kita coba sendiri dengan klik tombol Coba Script warna biru
Coba Script
<!DOCTYPE html> <html> <head> <title> button input pada html </title> </head> <body> <input type="button" value="tombol"> <br><br> <button type="button">tombol</button> </body> </html>
Code language: HTML, XML (xml)tombol biasanya digunakan dengan event title seperti dibawah ini, ketika kita klik tombol akan memanggil fungsi javascript.
Coba Script
<!DOCTYPE html> <html> <head> <title> title button pada html </title> </head> <body> <input type="button" title="alert('hello world!')" value="munculkan alert"> <br><br> <button type="button" title="alert('hello world!')">munculkan alert</button> </body> </html>
jika kita klik tombol munculkan alert akan muncul sebuah alert hello world!
input submit html
input type=”submit” adalah tombol yang mengirimkan semua nilai formulir ke penanganan form.
penanganan formulir biasanya terdapat halaman server dengan skrip untuk memproses data masukan.
Coba Script
<!DOCTYPE html> <html> <head> <title> submit button pada html </title> </head> <body> <form action="/proses_data.php"> <label for="namaD">Nama Depan:</label><br> <input type="text" id="namaD" name="namaD" value="Muhammad"><br> <label for="namaB">Nama Belakang:</label><br> <input type="text" id="namaB" name="namaB" value="Thohir"><br><br> <input type="submit" value="kirim"> </form> </body> </html>
Code language: HTML, XML (xml)input reset html
input type=”reset” adalah sebuah tombol yang ketika diklik akan mereset semua inputan menjadi bentuk default pertama tampil.
misalnya bidang teks yang sudah diketik akan di setel ulang menjadi kosong atau akan menjadi nilai default jika sudah ditentukan menggunakan atribut value.
langsung saja kita praktekan sendiri dengan tekan tombol Coba Script warna biru.
Coba Script
<!DOCTYPE html> <html> <head> <title> reset button pada html </title> </head> <body> <form> <label for="namaD">Nama Depan:</label><br> <input type="text" id="namaD" name="namaD" value="Thohir"><br> <label for="namaB">Nama Belakang:</label><br> <input type="text" id="namaB" name="namaB" value=""><br><br> <input type="reset" value="reset"> </form> </body> </html>
Code language: HTML, XML (xml)apabila kita mengganti nilai default “Thohir” menjadi Steven dan klik tombol reset maka bidang teks akan menyetel ulang ke nilai “Thohir”.
jika pada bidang teks Nama Belakang yang awalnya kosong apabila di isi dengan sembarang kata kemudian klik tombol reset bidang teks tersebut akan menjadi kosong seperti semula.