Input tombol kirim juga merupakan salah satu varian dari input tombol. Kita telah mempelajari input tombol dan sebuah variannya, yaitu input tombol reset. Sekarang kita akan mempelajari sebuah varian baru yaitu Input tombol kirim. Input tombol ini digunakan sebagai perintah untuk mengirimkan form. Ketika tombol kirim di klik maka form akan mengirimkan data di dalam form terkait. Mari kita mulai tutorial HTML – input tombol kirim.

Tutorial HTML – Input Tombol Kirim – Bagian 15 – 11 (Bahasa Indonesia)

Tombol kirim merupakan salah satu varian input tombol yang paling sering digunakan. Tombol kirim hampir selalu digunakan pada setiap form. Tombol kirim sendiri digunakan untuk mengeksekusi pengiriman form.

Tombol kirim merupakan varian dari input tombol yang sama-sama menggunakan tag input. Atribut yang digunakan untuk input tombol kirim adalah submit.

Pada tutorial ini saya akan menambahkan tombol kirim pada kedua form, yakni form login dan form registrasi. Silahkan perhatikan contoh dokumen HTML berikut ini:

 

Kode HTML di atas akan menghasilkan tampilan seperti berikut ini:

Tutorial HTML - Input Tombol Kirim - Submit - 1

Pada contoh di atas, saya tidak menetapkan cara pengiriman data pada form sehingga metode yang digunakan adalah get. Data pada form akan disisipkan pada alamat untuk mengakses halaman HTML. Bila kita klik tombol log in maupun tombol daftar, data pada form akan dikirimkan. Silahkan perhatikan alamat url, setiap kita klik tombol log in maupun Daftar, kita akan mendapatkan alamat url yang disisipkan data. Saya sertakan hasil tampilan yang menunjukkan perbedaan antara url awal dan url yang disisipkan data.

Tutorial HTML - Input Tombol Kirim - Submit - 2

 

Tombol kirim sebenarnya bisa digantikan menggunakan tombol biasa seperti yang pernah saya ajarkan sebelumnya. Namun, penggunaan tombol biasa sebagai tombol kirim mengharuskan kita memasukkan perintah kirim menggunakan javascript. Penggunaan tombol kirim membuat kode HTML kita menjadi lebih sederhana karena kita tidak perlu memasukkan kode javascript ke dalamnya.

Tombol kirim tidak banyak yang perlu dibahas dan kita akhiri sesi ini. Kita akan melanjutkan tutorial variasi tombol kirim yang lebih cantik menggunakan gambar.

Tutorial HTML – Input Gambar – Bagian 15 – 12 (Bahasa Indonesia)