Pada tutorial HTML ini saya akan memperkenalkan cara membuat form pada sebuah halaman website. Tutorial ini juga lumayan panjang karena kita akan mempelajari berbagai cara untuk merancang sebuah form hingga lengkap. Tutorial ini akan saya pecah menjadi 14 bagian dan ini adalah bagian pertama. Pada tutorial ini kita akan memulai dengan mengenal form. Mari kita mulai tutorial HTML – Form.

Tutorial HTML – Form – Bagian 15 – 1 (Bahasa Indonesia)

Form biasanya digunakan untuk membuat sebuah tempat untuk mengisikan data oleh pengguna atau pengunjung website. Form sendiri dapat berinteraksi melalui bahasa pemrograman server side maupun pemrograman client side. HTML sendiri menyediakan tag untuk digunakan menampilkan form pada dokumen HTML. Saya akan membahas cara penggunaan tag form beserta cara mengisi dan merancang form menggunakan input di dalamnya.

Saya tidak akan membahas tentang permrograman server side maupun client side pada halaman tutorial ini. Buat Anda yang ingin mengetahui perbedaan antara pemrograman client side dan pemrograman server side, silahkan kunjungi tautan berikut ini.

 

Perbedaan Pemrograman Client Side Dan Server Side Pada Website

Form merupakan salah satu cara berinteraksi dengan pengguna. Sebenarnya di dalam HTML sebuah tag form merupakan suatu pembatasan ruang lingkup keikutsertaan data. Sebuah form hanya akan mengirimkan data dari tag input yang berada di dalam batasannya. Form tidak akan mengirimkan data yang berada di luar kecuali form tersebut dikendalikan oleh sebuah program atau script client side. Untuk lebih jelasnya mari kita lihat ke dalam sebuah kode HTML berikut ini:

 

Mari kita perhatikan hasil tampilan dari kode di atas

tutorial HTML - form 1

Dari hasil tampilan kita dapat melihat bahwa tag form tidak memberikan perubahan tampilan apa pun. Namun, perlu diperhatikan bahwa tag form sendiri memberikan sebuah pengelompokan. Tag form walaupun tidak memberikan perubahan tampilan tapi dia akan membatasi kalimat 1 dan kalimat 2. Bila diteliti, antara kalimat 1 dan kalimat 2 tidak terdapat tag pemisah baris. Namun, tag form memisahkannya dengan sendiri.

Dan satu hal lagi yang perlu diingat pada sebuah halaman website dapat mengandung lebih dari 1 buah form. Hal ini saya tegaskan karena banyak orang menanyakan kepada saya bagaimana cara membuat lebih dari 1 form di dalam sebuah kode HTML. Saya menjawab mereka dengan mudah, tuliskan saja form tambahan yang dibutuhkan dan HTML sendiri tidak membatasi bahwa sebuah halaman hanya boleh memiliki 1 buah form. Saya akan menambahkan tag form untuk membatasi kalimat 2 ke dalam sebuah form baru. Berikut ini adalah kodenya

perubahan kode di atas tidak akan menghasilkan perbedaan tampilan karena form tidak merubah hasil tampilan.

tutorial HTML - form 2

Tujuan Pengiriman Data

Setiap form akan mengirimkan data ke sebuah alamat website. Suatu form yang dikirimkan untuk berinteraksi dengan program di sisi server. Biasanya tujuan pengiriman data ditujukan pada suatu file, contohnya login.php, register.php, cari.php, masukkan-barang.asp dan lain sebagainya. Nama file yang dimasukkan tergantung pada cara perancangan program. Tujuan pengiriman data form tidak selalu ditujukan pada suatu nama file tergantung dari cara pemrograman di sisi server.

Tujuan pengiriman data pada form disertakan di dalam atribut action di dalam tag form. Sebagai contoh, silahkan perhatikan kode berikut ini:

 

Bila atribut action tidak disertakan di dalam form, maka form akan mengirimkan data ke alamat yang sama dengan alamat halaman yang menampilkan form tersebut.

Metode pengiriman Data

Pengiriman form pada HTML terdapat 2 cara, yakni get dan post. Kedua cara pengiriman data tersebut tentunya berbeda. Pengiriman data menggunakan metode get akan menyisipkan data pada alamat untuk mengakses tujuan pengiriman form. Sedangkan, pengiriman data post akan mengirimkan langsung tanpa menyisipkan data pada alamat untuk mengakses tujuan pengiriman form.

Pengiriman data melalui metode get lebih baik digunakan untuk menentukan jenis tampilan yang akan dimunculkan pada halaman yang dibuka. Pengiriman data melalui metode post lebih baik digunakan untuk digunakan pada form yang mengandung data penting dan rahasia, seperti: password, PIN, kunci enkripsi dan lain sebagainya. Anda harus menyesuaikan kegunaan dan kebutuhan form.

Metode pengiriman data dapat ditentukan melalui atribut method. Silahkan perhatikan contoh berikut ini:

 

Bila atribut method tidak disertakan pada form maka form akan mengirimkan data menggunakan metode get.

Cara merancang form

Pada saat merancang sebuah form kita harus memasukkan semua kolom pengisian untuk berinteraksi di dalam tag form. HTML memiliki beberapa jenis tag untuk digunakan sebagai kolom isian, seperti: text, password, radio button, drop down menu, checkbox dan lain sebagainya. Selanjutnya kita akan mulai dengan salah satu input yang paling sering digunakan, yaitu: tulisan/text

Tutorial HTML – Input Tulisan – Bagian 15 – 2 (Bahasa Indonesia)