9. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Form biasa digunakan untuk membuat aplikasi web berbasis database dan aplikasi pendaftaran. Untuk membuat form, digunakan tag awal <form> dan diakhiri dengan tag penutup </form>. Penulisan sintaksnya adalah: <form action= url method= get post >... </form> Tag Form Method Action Metode pengiriman data ke tujuan, yaitu: GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL POST : mengirimkan datanya secara terpisah Menentukan lokasi dari script yang akan memproses data dari form 29 9.1. Jenis Masukan dalam Form Jenis masukan dalam form dibedakan menjadi: 1. Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks; 2. Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih; 3. Check box, menyediakan beberapa pilihan, pilihan dapat lebih dari satu; 4. List, menyediakan pilihan dalam bentuk list pilihan (daftar). Dapat memilih lebih dari satu; 5. Button, elemen yang mendefiniskan tombol untuk melakukan proses pada halaman HTML; 6. Submit, elemen tombol yang digunakan untuk memanggil URL, setelah input selesai dimasukkan; 7. Reset, elemen tombol yang digunakan untuk mengembalikan ke kondisi awal; 8. Image, digunakan sebagai pengganti button, berupa gambar yang berfungsi sama seperti button; 9. Text area, elemen yang digunakan untuk menampung data dalam bentuk teks; 10. File,elemen button yang dapat memanggil file atau gambar dari storage; 11. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
9.2. Contoh-contoh Input 9.2.1. Text Area Tag <textarea> digunakan untuk membuat suatu text area yaitu sebuah kotak teks dengan multi baris. Di dalam text area, dapat dituliskan karakter yang tidak terbatas. Tag <textarea> memiliki atribut antara lain: Rows Cols Mendefiniskan nama obyek textarea Menentukan jumlah baris textarea Menentukan lebar textarea 9.2.2. Select Area Tag <select> digunakan untuk membuat dropdown sederhana. Dropdown adalah daftar yang dapat dipilih. Tag ini memiliki beberapa atribut yaitu: Size Multiple Mendefiniskan nama obyek select Menentukan berapa pilihan yang akan ditampilkan. Mengizinkan untuk memilih lebih dari satu 30 contoh: latihan34.html <!DOCTYPE html> <html> <head> <title>mengenal Tag Textarea dan Tag Select</title> </head> <body> <table border= 1 > <td>pilih Jenis Buku <td> <select name= pendidikan > <option value= komputer >Komputer</option> <option value= kedokteran >Kedokteran</option> <option value= psikologi >Psikologi</option> <option value= ekonomi >Ekonomi</option> </select> <td>sinopsis <td> <textarea name= sinosis cols=55 rows= 5 ></textarea> </table> </body> </html>
9.2.3. Input Tag <input> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misal kotak teks, kotak pilihan, tombol, dan lain-lain. Tag <input> tidak memerlukan tag penutup. Tag ini memiliki beberapa atribut antara lain: Mendefiniskan nama obyek input. ini harus dituliskan kecuali untuk tipe submit dan clear. Size Menentukan ukuran kotak teks. Maxlenght Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks. Value Kotak teks : Menentukan teks yang tertulis. Check box atau radio : menentukan nilai item yang dipilih Submit atau reset : menentukan teks yang tertulis pada tombol Checked hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default Type Menentukan tipe input yang dibuat Tipe input antara lain: a. Text digunakan untuk membuat kode teks; b. Password digunakan untuk membuat kotak teks dengan menampilkan tanda *; c. Check box digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu; d. Radio digunakan untuk membuat suatu daftar pilhan yang hanya dipilih satu saja; e. File digunakan untuk memanggil file atau gambar dari storage f. Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isi form yang telah diberikan g. Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah. 31 contoh: latihan35.html <!DOCTYPE html> <html> <head> <title>input Data Mahasiswa</title> </head> <body> <h4>tambah Data Mahasiswa</h4> <form method= post action= # > <table border= 0,5 > <td>nama <input type= text name= nama size= 60 > Next code...
<td>alamat <textarea name= alamat cols= 50 rows= 5 ></textarea> <td>kelas <select name= kelas > <option value= pilih selected>- Pilih Kelas -</option> <option value= 15S1SI01 >17-S1SI-01</option> <option value= 15S1SI02 >17-S1SI-02</option> <option value= 15S1SI03 >17-S1SI-03</option> <option value= 15S1SI04 >17-S1SI-04</option> <option value= 15S1SI05 >17-S1SI-05</option> </select> <td>jenis Kelamin <input type= radio name= gender value= P checked> Pria <input type= radio name= gender value= W > Wanita <td>ukm yang Diikuti <input type= checkbox name= amcc >AMCC <br> <input type= checkbox name= jurnalistik >JURNALISTIK <br> <input type= checkbox name= mayapala >MAYAPALA<br> <input type= checkbox name= taekwondo >TAEKWONDO <td colspan=2> <input type= submit value= SIMPAN > <input type= reset value= RESET > </table> </body> </html> Tambahan: 32 TIPE Cel Color Date Datetime Datetime-local Email Month Number range KETERANGAN Nilai input untuk nomor telepon Untuk pengisian heksadesimal sebuah warna. Misal #FF6600 Untuk pengisian tanggal Untuk mengisi waktu dan tanggal Untuk pengisian lokal waktu/tanggal Untuk mengisi email atau lebih dari satu email Untuk pengisian bulan Untuk pengisian nomer Untuk pengisian rentang nilai
Search Time url Week Untuk bidang pencarian Untuk pengisian waktu Nilai input untuk memasukkan URL Untuk pengisian minggu Penugasan: 1. Buat form isian dengan memanfaatkan atribut-atribut baru 2. Buat form action yang merupakan hasil dari penyimpanan form sebelumnya 33