BAB III FORMULIR Formulir dalam halaman html merupakan komponen input, yaitu bagian yang berfungsi sebagai tempat memasukkan data dari penggunanya. Dengan formulir, halaman web bisa menjadi lebih interaktif. Formulir, sebagaimana komponen web lainnya, dituliskan di dalam tag body. Jadi, jangan lupa untuk selalu mempersiapkan terlebih dahuli struktur dasar halaman web sebelum mengisinya. Langkahlangkah membuat formulir adalah sebagai berikut. 1. Definisikan blok formulir.
elemenelemen formulir
Keterangan: action diisi dengan nama halaman web yang akan memproses datadata dari formulir tersebut. method adalah cara yang digunakan untuk memproses datadata tersebut. Ada 2 method yang dapat digunakan yaitu: a. POST. Dengan method post, maka data dari formulir akan dikirmkan secara tersembunyi ke halaman pemroses. b. GET. Dengan method get, data dari formulir yang dikirimkan ke halaman pemroses dapat ditampilkan di address bar. 2. Mengisi dengan elemenelemen formulir. Adapun elemenelemen formulir adalah sebagai berikut: a. textbox. Textbox adalah elemen formulir untuk memasukkan data berupa satu baris teks. Sintaknya adalah sebagai berikut: Contoh: Keterangan type='text' menunjukkan bahwa elemen tersebut berjenis textbox. name='namaLengkap'
artinya nama untuk elemen tersebut adalah
namaLengkap. Jadi elemen textbox ini sedang digunakan untuk mengisikan nama lengkap penggunanya. Isi attribut name ini nantinya akan menjadi variable yang akan digunakan di pemrograman web. BAB III - 1
Size='40' artinya panjang textbox ini adalah 40 karakter. Maxlength='30' artinya dalam textbox tersebut hanya boleh berisi 30 karakter. b. Textarea Textarea adalah elemen formulir yang berfungsi sebagai tempat memasukkan data berupa lebih dari satu baris teks. Sintaknya adalah sebagai berikut: contoh: Keterangan textarea menunjukkan bahwa elemen tersebut berupa textearea. name='alamatRumah' berarti bahwa nama untuk elemen textarea ini adalah alamatRumah. Jadi, textarea ini digunakan untuk memasukkan data alamat rumah pengguna. cols=35 berarti lebar textarea tersebut adalah 35 kolom. rows=2 berarti tinggi textarea tersebut adalah 2 baris. c. selection selection merupakan elemen formulir untuk memasukkan sebuah data yang dapat dipilih oleh penggunanya. Sintaksnya sebagai berikut: <select name='...'> label ... contoh: <select name='jnKelamin'> Lakilaki Perempuan keterangan: select menunjukkan bahwa elemen formulir tersebut berupa selection. name='jnKelamin' berarti bahwa nama untuk elemen selection tersebut BAB III - 2
adalah 'jnKelamin'. Jadi elemen tersebut digunakan untuk memasukkan data jenis kelamin penggunanya. value='L' artinya isi salah satu pilihan / option adalah L. label Laki laki adalah teks yang dimunculkan pada kumpulan pilihan tersebut untuk mengarahkan pengguna bila akan memilih data jenis kelamin lakilaki. d. radio button Radio button hampir sama dengan selection, hanya saja radio button lebih banyak memakan tempat. Fungsi radio button sama dengan selection, yaitu memasukkan sebuah data yang dipilih penggunanya. Sintaksnya sebagai berikut: label contoh: Lakilaki Perempuan keterangan: type=radio menunjukkan bahwa elemen tersebut berjenis radio button. name='jnKelamin' berarti bahwa sekumpulan radio button tersebut memiliki nama jnKelamin. Jadi elemen radio button ini digunakan oleh pengguna untuk memilih data jenis kelamin. value='L' artinya bahwa isi radio button tersebut adalah L, dan label Lakilaki adalah teks yang dimunculkan di halaman web untuk mengarahkan pengguna bila akan memilih data jenis kelamin lakilaki. Keterangan ini berlaku pula untuk value=P dan label Perempuan. e. Checkbox fungsi dan sintaks checkbox hampir sama dengan radio button. Bedanya checkbox dapat digunakan untuk memilih lebih dari satu pilihan. Sintaksnya adalah sebagai berikut: label contoh: musik Olah raga Makanmakan Politik
BAB III - 3
keterangan: type='checkbox' menunjukkan bahwa elemen tersebut berjenis checkbox. name='minat' artinya nama untuk elemenelemen tersebut adalah minat. Dengan demikian elemenelemen tersebut digunakan oleh penggunanya untuk memasukkan datadata tentang minat pengguna. value=sport artinya bahwa isi dari checkbox tersebut adalah sport, sedangkan label olah raga adalah teks yang dimunculkan di halaman web untuk mengarahkan pengguna memilih minat sport. Latihan 1 Tuliskan kodekode html berikut ini lengkap dengan struktur dasar html. Simpanlah dengan nama formulir.html lalu lihatlah hasilnya di browser. <pre> BAB III - 4
Latihan 2 buatlah formulir dengan hasil seperti gambar di bawah ini:
Latihan 3 Coba buatlah formulir untuk mengisikan datadata berikut: 1.
Nomor Induk Siswa
2.
Nama Lengkap
3.
Kelas
4.
Komentar
BAB III - 5
