Bab 4. Form Overview Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk melakukan interaksi lebih terhadap halaman dokumen tersebut. Semisal, kemampuan dokumen HTML mampu menyediakan fasilitas yang dapat menerima masukkan atau isian data dari user. Data isian user ini nantinya akan dapat diproses lebih lanjut menjadi informasi yang dibutuhkan oleh user maupun oleh pemilik situs tersebut. Teknik pengisian ini dilakukan menggunakan elemen Form. Tujuan 1. Mahasiswa mampu membuat form pada dokumen HTML 2. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML 3. Mahasiswa mampu menginputkan field sesuai dengan kegunaan 3.1 Menu Form Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form dalam html adalah. Pada penulisan form "nama form" adalah nama form yang sedang digunakan, method adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form kedalam server.
3.2 Jenis-jenis media input dalam Form Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari : 3.2.1 Kontrol Berupa Text Kontrol text atau biasa disebut textbox digunakan untuk menampilkan kotak masukan/input text, jenis inputan ini sering digunakan untuk menerima masukkan dari penggguna berupa data yang berupa huruf, angka dan simbol untuk dikirim ke server. Gambar 3.1. Contoh skrip untuk penggunaan input text dalam sebuah form Apabila skrip diatas di running kedalam sebuah browser maka akan muncul tampilan seperti dibawah ini. Gambar 3.2. Hasil eksekusi skrip untuk penggunaan input text dalam sebuah form
3.2.2 Kontrol Berupa Password Saat kita meangkses sebuah website, apabila kita akan melakukan aktivitas login sering kita diminta memasukkan username dan password. Jika kita perhatikan, di textbox password, kata sandi kita akan diubah kedalam bentuk sebuah titik ( ). Hal ini ditujukan akan orang yang lain yang tidak berkepentingan tidak mampu membaca sandi kita. Fasilitas ini dapat kita gunakan dalam skrip HTML. Contoh yang dapat kita lakukan adalah seperti dibawah ini. Gambar 3.3. Contoh skrip untuk penggunaan input text dalam sebuah password menu Jika skrip diatas dijalankan pada sebuah browser. Maka akan kita dapatkan tampilan textbox untuk menginputkan password seperti ini. Gambar 3.4. Hasil running skrip untuk penggunaan input text dalam sebuah password menu 3.2.3 Kontrol Berupa Radio Button Radiobuttuon di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran online,
biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin, agama, ataupun sebagainya. Radio Button ini akan sering kita temui saat kita berselancar di dunia maya yang terkait dengan proses input data seperti pendaftaran dll. Fasilitas ini pun didukung oleh HTML. Untuk penggunaan Radio Button berikut ini adalah contoh skripnya. Gambar 3.5. Contoh skrip untuk penggunaan input text berupa radio button Apabila skrip diatas dirunning kedalam sebuah browser akan kita dapati tampilan seperti dibawah ini. Perlu diingat adalah bahwa Radio Button hanya memberikan kita satu opsi pilihan. Gambar 3.5. Hasil eksekusi skrip untuk penggunaan input text berupa radio button 3.2.4 Kontrol Berupa Checkbox Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya
opsional. Anda dapat menggunakan Checkbox pada atribut. Input checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih maka pengguna akan men-check (mencentang) dan jika tidak memilih akan dibiarkan saja. Untuk memilih satu dari beberapa pilihan tidak menggunakan input checkbox melainkan menggunakan input radio. Contoh penggunaan input checkbox yang sering dijumpai adalah persetujuan saat melakukan proses pendaftaran/registrasi pada sebuah website. Jika pendaftar menyetujui persyaratan dari website tempat mendaftar maka dinyatakan dengan mencheck persetujuan. Berikut ini adalah contoh skrip dalam penggunaan checkbox dalam HTML. Gambar 3.6. contoh skrip untuk penggunaan input text berupa checkbox
Gambar 3.7. hasil eksekusi skrip untuk penggunaan input text berupa checkbox Gambar diatas menunjukkan ketika skrip contoh penggunaan checkbox dijalankan pada sebuah browser, maka akan muncul tampilan seperti diatas. Dimana checkbox memungkinkan pengguna untuk memilih opsi lebih dari satu. 3.2.5 Button Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website. Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti tombol. Kali ini kita akan belajar membuat tombol-tombol fungsi diatas. Ada 4 (empat) jenis varian pada elemen ini : - Submit Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action. - Reset Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai semua elemen yang ada pada form) - Button Tombol ini berfungsi untuk membuat form lebih interaktif dengan memanggil script lain. - Image Menggunakan gambar sebagai pengganti tombol. Mari kita ketikkan skrip dibawah ini pada sebuah editor :
Gambar 3.8. Contoh skrip penggunaan input berupa button Setelah skrip diatas dijalankan, didapatkan sebuah tampilan seperti dibawah ini: Gambar 3.9. Contoh eksekusi skrip penggunaan input berupa button 3.2.6 Textarea Saat kita akan membangun sebuah halaman web, suatu ketika kita dihadapkan pada sebuah kasus, dimana pengguna menginginkan adanya sebuah tempat untuk dapat menampung banyak kalimat. Yang hal ini sudah dapat kita tampung menggunakan textboxt, checkbox dll. Maka dibutuhkan media yang mampu menangani input banyak seperti ini. Untuk mendapatkan masukan dari user dengan karakter dalam jumlah banyak (masukan berupa kalimat yang panjangnya lebih dari 255 karakter) dibutuhkan elemen yang mampu menampung inputan tersebut. Dalam dokumen HTML disediakan elemen yang mampu menampung inputan tersebut. Elemen tersebut dinamai textarea.
Silahkan ketik skrip html ini didalam sebuah editor untuk menunjukkan penggunaan textarea. Gambar 3.10. Contoh skrip penggunaan input berupa text area Skrip diatas jika tidak terjadi kesalahan syntak maka jika dijalankan akan keluar tampilan seperti dibawah ini: Gambar 3.11. Hasil eksekusi penggunaan input berupa text area 3.2.7 Textselect (Dropdown) Pada dokumen HTML disediakan elemen untuk membentuk pilihan dalam bentuk dropdown. Tag yang digunakan untuk membuat pilihan dalam bentuk dropdown adalah tag <select>.
Gambar 3.12. Contoh skrip penggunaan Select Dropdown Setelah skrip diketikan dan dieksekusi pada sebuah browser, maka akan didapatkan tampilan sebagai berikut. Gambar 3.13. Hasil eksekusi dari skrip penggunaan Select Dropdown
STUDI KASUS Buatlah Script Form seperti gambar dibawah ini : dikerjakan secara individu