BAB III FORMULIR. <input type='text' name='...' size='40' maxlength='..'>

Transkripsi

1 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. Langkah langkah membuat formulir adalah sebagai berikut. 1. Definisikan blok formulir. <form action=... method=...> elemen elemen formulir </form> Keterangan: action diisi dengan nama halaman web yang akan memproses data data dari formulir tersebut. method adalah cara yang digunakan untuk memproses data data 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 elemen elemen formulir. Adapun elemen elemen formulir adalah sebagai berikut: a. textbox. Textbox adalah elemen formulir untuk memasukkan data berupa satu baris teks. Sintaknya adalah sebagai berikut: <input type='text' name='...' size='40' maxlength='..'> Contoh: <input type='text' name='namalengkap' size='40' maxlength='30'> 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

2 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: <textarea name='...' cols='...' rows='...'></textarea> <textarea name='alamatrumah' cols='35' rows='2'></textarea> 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='...'> <option value='...'>label</option>... <select name='jnkelamin'> <option value='l'>laki laki</option> <option value='p'>perempuan</option> keterangan: select menunjukkan bahwa elemen formulir tersebut berupa selection. name='jnkelamin' berarti bahwa nama untuk elemen selection tersebut BAB III - 2

3 adalah 'jnkelamin'. Jadi elemen tersebut digunakan untuk memasukkan data jenis kelamin penggunanya. value='l' artinya isi salah satu pilihan / option adalah L. label Lakilaki adalah teks yang dimunculkan pada kumpulan pilihan tersebut untuk mengarahkan pengguna bila akan memilih data jenis kelamin laki laki. 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: <input type='radio' name='...' value='...' >label <input type='radio' name='jnkelamin' value='l'>laki laki <input type='radio' name='jnkelamin' value='p'>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 Laki laki adalah teks yang dimunculkan di halaman web untuk mengarahkan pengguna bila akan memilih data jenis kelamin laki laki. 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: <input type='checkbox' name='...' value='...'>label <input type='checkbox' name='minat' value='musik'> musik <input type='checkbox' name='minat' value='sport'> Olah raga <input type='checkbox' name='minat' value='kuliner'> Makan makan <input type='checkbox' name='minat' value='politik'> Politik BAB III - 3

4 keterangan: type='checkbox' menunjukkan bahwa elemen tersebut berjenis checkbox. name='minat' artinya nama untuk elemen elemen tersebut adalah minat. Dengan demikian elemen elemen tersebut digunakan oleh penggunanya untuk memasukkan data data 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 kode kode html berikut ini lengkap dengan struktur dasar html. Simpanlah dengan nama formulir.html lalu lihatlah hasilnya di browser. <pre> <form> Nama lengkap: <input type='text' name='fullname' size='40' maxlength='30> Alamat Rumah: <textarea name='address' cols='30' rows='3'></textarea> Jenis Kelamin: <input type='radio' name='jnskel' value='male'>laki laki. <input type='radio' name='jnskel' value='female'>perempuan. Kelas: <select name='kelas'> <option value='tkj 1'> XI TKJ 1 </option> <option value='tkj 2'> XI TKJ 2 </option> <option value='tkj 3'> XI TKJ 3 </option> Minat: <input type='checkbox' name='minat' value='network'> jaringan <input type='checkbox' name='minat' value='web'> desain web <input type='checkbox' name='minat' value='graphic'> desain grafis <input type='checkbox' name='minat' value='server'> server </form> </pre> BAB III - 4

5 Latihan 2 buatlah formulir dengan hasil seperti gambar di bawah ini: Latihan 3 Coba buatlah formulir untuk mengisikan data data berikut: 1. Nomor Induk Siswa 2. Nama Lengkap 3. Kelas 4. Komentar BAB III - 5