Mengenal Komponen Form dalam HTML.
Form dalam HTML merupakan bagian yang paling penting dalam pemrograman HTML khususnya yang berhubungan dengan aplikasi berbasis website. Form ini sering digunakan untuk pendaftaran user, login user maupun yang lainnya seperti komentar untuk website dll
Untuk membuat sebuah form dalam HTML, dibutuhkan beberapa baris inputan atau yang biasa disebut komponen form. Komponen-komponen form ini berfungsi sebagai tempat input data yang akan dilakukan oleh user dan akan diproses selanjutnya. Adapun aturan penulisan script untuk membuat form dalam HTML adalah sebagai berikut:
<form method = “method_php” action =”link action”>
Komponen form
</form>
*Keterangan :
method : Metode yang akan diambil untuk memproses inputan
Action : Action disini berisi link proses selanjutnya setelah user memasukkan data.
Dalam Form HTML ada 2 metode yang dapat digunakan oleh user yakni POST dan GET. Metode POST mengambil data untuk diproses berdasarkan inputan yang dimasukkan oleh user, sementara metode GET mengambil data yang ada di address bar atau URL. Secara teknis GET diproses lebih sederhana karena permintaan dikirimkan melalui alamat halaman (URL) dengan sistem penulisan secara berpasangan yaitu nama varibel dan nilainya, dan pemisahan variabel menggunakan karakter.
Contoh sederhana penulisan script Form dalam HTML :
<form method = “POST” action =”form.php”>
Komponen form
</form>
Nah, Form dalam HTML sendiri memiliki beberapa komponen form yang mana masing-masing tipe ini memiliki fungsi dan kegunaannya sendiri. Berikut adalah sedikit penjelasan mengenai Komponen Form pada HTML
- Text
Komponen Form yang pertama adalah Text. Komponen text ini biasanya dipakai ketika kita melakukan pendaftaran account di kolom nama,dll. Adapun Komponen text ini hanya dapat digunakan untuk menuliskan kata dalam satu baris saja.
Contoh Script untuk form tipe Text :
<form method=”POST” action=”form.php”>
NAMA : <input name=”nama” type =”text” value=””>
</form>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
type : jenis komponen form
value : variabel tambahan yang digunakan untuk editing yang lebih spesifik
Hasilnya adalah :
- Textbox
Komponen Form yang kedua adalah Textbox. Komponen Textbox ini biasanya dipakai ketika kita diminta memasukkan inputan dalam jumlah karakter yang panjang seperti ketika menginputkan alamat atau memasukkan komentar di suatu website. Dalam textbox jumlah karakter yang dapat dimasukkan bisa lebih dari satu baris.
Contoh script untuk form tipe Textbox :
<form method=”POST” action=”form.php”>
ALAMAT : <textarea name=”alamat” rows=”10” cols=”40” value=””><textarea>
</form>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
row : panjang / tinggi textbox
cols : lebar textbox
value : variabel tambahan yang digunakan untuk editing yang lebih spesifik
Hasilnya adalah :
- Radio Button
Komponen form yang selanjutnya adalah Radio Button. Radio Button ini merupakan komponen form yang mana membuat user harus memilih salah satu pilihan yang tersedia. Contoh penggunaanya adalah untuk inputan jenis kelamin, dll.
Contoh Script untuk form tipe Radio Button :
<form method=”POST” action=”form.php”>
JENIS KELAMIN : <input name=”gender” type =”radio” value=”1”>Laki-Laki</input>
<input name=”gender” type =”radio” value=”2”>Perempuan</input>
</form>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
type : jenis komponen form
value : variabel tambahan yang digunakan untuk editing yang lebih spesifik
NB : untuk membuat komponen form dapat diproses pastikan pada variabel name isinya sama namun berbeda di variabel value nya
Hasilnya adalah :
- Select
Komponen form berikutnya adalah Select. Dalam Select ini user akan diminta memilih satu pilihan dari beberapa pilihan yang ditampilkan secara dropdown. Biasanya digunakan untuk memasukkan tanggal lahir, dll.
Contoh Script untuk form tipe Radio Button :
Tanggal Lahir : <select name=”tLahir”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option></select>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
value : variabel tambahan yang digunakan untuk editing yang lebih spesifik
NB : untuk membuat komponen form dapat diproses pastikan variabel value nya berbeda
Hasilnya adalah :
- Check box
Komponen form yang selanjutnya adalah Check Box. Check box ini memiliki tampilan yang hampir mirip dengan Radio Button, namun di Check Box ini kita dapat memilih lebih dari satu pilihan yang tersedia. Penggunaanya dapat ditemui di isian Hobby,dll dalam sebuah form pendaftaran
Contoh Script untuk form tipe Check Box :
<form method=”POST” action=”form.php”>
HOBBY : <input name=”hobby” type =”checkbox” value=”1”>Sepakbola</input>
<input name=”hobby” type =”checkbox” value=”2”>Badminton</input>
<input name=”hobby” type =”checkbox” value=”3”>Tenis</input>
<input name=”hobby” type =”checkbox” value=”4”>Tenis Meja</input>
</form>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
type : jenis komponen form
value : variabel tambahan yang digunakan untuk editing yang lebih spesifik
NB : sama seperti Radio Button, untuk membuat komponen form dapat diproses pastikan pada variabel name isinya sama namun berbeda di variabel value nya
Hasilnya adalah :
- Button
Komponen form yang terakhir adalah Button yang terdiri dari Submit dan Reset. Submit merupakan komponen form yang digunakan untuk mengirim data inputan menuju proses selanjutnya sementara Reset adalah komponen form yang digunakan untuk menghapus semua data yang telah dimasukkan oleh user.
Contoh Script untuk form tipe Submit dan Reset :
<form method=”POST” action=”form.php”>
<input name=”submit” type =”submit” value=”Kirim”>
<input name=”reset” type =”reset” value=”Hapus”>
</form>
*Keterangan :
name : identitas yang digunakan untuk diproses selanjutnya
type : jenis komponen form
value : teks yang akan tertampil di button submit dan reset
Hasilnya adalah :
Sekian Terimakasih Semoga Bermanfaat.
Komentar
Posting Komentar