1 MODUL 6 FORM HTML 6.1. PENGANTAR FORM Sebelum memulai materi tentang FORM, cobalah jawab pertanyaan dibawah ini, Apakah kalian memiliki alamat ? Ap...
PENGANTAR FORM Sebelum memulai materi tentang FORM, cobalah jawab pertanyaan dibawah ini , Apakah kalian memiliki alamat email ? Apakah kalian sudah memiliki akun Facebook!? Jika jawabannya ya, maka dapat dipastikan, kalian pasti sudah berkenalan dengan FORM dalam HTML. Untuk memiliki alamat email ataupun akun di facebook, langkah pertama yang harus kalian lakukan adalah mendaftarkan diri kalian dengan mengisi data diri lewat sebuah form registrasi. Inilah yang dimaksud dengan FORM dalam HTML. Bila didefinisikan, form html merupakan bagian dari dokumen yang digunakan untuk menginput atau memasukan data. Kalian akan melengkapi form dengan cara menginput data pada element form, seperti dengan memasukan text, memilih item menu, dan lain sebagainya sebelum mengirimkan form tersebut untuk di proses.
6.2.
PENULISAN FORM Sama halnya seperti sintaks html, form juga memiliki identifier agar bisa dikenal oleh browser. Untuk menggunakan form html, sintaks yang digunakan yaitu . Form memiliki beberapa property, yaitu : Name, merupakan property yang berfungsi untuk memberi nama pada form html. Action, merupakan property yang berfungsi untuk menentukan halaman yang akan memproses form yang di isi. Method, merupakan property yang berfungsi untuk menentukan metode pengiriman data formulir, apakah dengan menggunakan post atau get. Elemen-elemen pada form juga memiliki properti yang harus digunakan agar nantinya halaman yang memproses data bisa membedakan informasi yang di input. Property yang digunakan pada elemen form yaitu : Name, merupakan property yang berfungsi untuk memberi nama pada elemen form Value, merupakan property yang berfungsi untuk menuliskan data atau kata pada element form sebelum element form tersebut di isi oleh user. Value biasa digunakan pada form edit data user, dimana sebelumnya, user sudah menginput data, kemudian data tersebut akan di edit. Dibawah ini adalah aturan penulisan form html :
6.3.
TIPE ELEMENT FORM Kalian akan berinteraksi dengan form menggunakan element form. Tipe-tipe element yang dikenal oleh form html adalah sebagai berikut : a) Input Elemen input merupakan elemen yang paling sering digunakan dalam form. Elemen ini dibuka dengan menggunakan tag . Tag input tidak memerlukan sintaks penutup. Elemen input memiliki beberapa tipe, tipe ini sendiri dideklarasikan dengan cara di tambahkan didalam tag input, contohnya . Text Tipe text digunakan bila kalian ingin memasukan data berupa tulisan, angka ataupun symbol kedalam form. Elemen bertipe text biasa digunakan untuk mengisi data nama lengkap. Penulisan tag text yaitu :
1
Check Box Input berupa check box biasa digunakan untuk pertanyaan yang bertipe multi answer atau boleh dijawab lebih dari satu jawaban, contohnya pertanyaan tentang makanan favorit atau hobi. Untuk menginput user, tag yang digunakan yaitu : Main Bola
Property “checked=checked” dapat kalian gunakan untuk memberikan pilihan awal, dimana sebelum user memilih checkbox, checkbox tersebut sudah di isi terlebih dahulu.
Radio Button Radio Button digunakan untuk pertanyaan berupa pilihan, hanya ada satu jawaban yang dapat dijawab. Contoh penggunaan radio button adalah pada pertanyaan tentang gender user. Tag yang digunakan yaitu : Pria Wanita
Yang harus diperhatikan dalam membuat radio button adalah property name harus sama serta harus disertakan dengan property value. Bila kalian ingin membuat pertanyaan tentang pilihan gender, maka yang harus kalian lakukan adalah membuat dua buah radio button dengan property name yang sama (dalam kasus ini, bisa di isi dengan name=”gender”) lalu sertakan juga properti value, satu di isi dengan value=”pria” dan satu lagi value=”wanita”. Property “checked=checked” dapat kalian gunakan untuk memberikan pilihan awal, dimana sebelum user memilih radio, radio tersebut sudah di isi terlebih dahulu.
Tombol Submit Tombol Submit digunakan sebagai tombol yang bila diklik akan memerintahkan form untuk melakukan proses pengiriman data ke halaman yang dituju. Secara default, teks yang tertulis pada tombol submit adalah kata “submit”. Untuk menggantinya dengan kata lain, kalian bisa menggunakan property value. Tag yang digunakan yaitu :
Tombol Reset Tombol Reset digunakan untuk mereset (mengosongkan) form yang telah di isi. Sama seperti tombol submit, property value dapat digunakan untuk mengubah teks yang tertulis pada tombol reset. Tag yang digunakan yaitu :
Password Input password digunakan untuk input yang berupa password. Teks apapun yang ditulis pada form input password, karakternya akan diubah menjadi symbol, sehingga user tidak bisa melihat teks apa yang dituliskan. Tag yang digunakan yaitu :
b) Text Area Hampir sama dengan elemen form bertipe text, Text Area juga digunakan untuk menginput data berupa tulisan, angka ataupun symbol kedalam form. Perbedaannya ada pada lebar dan tinggi area input nya. Text area biasa digunakan untuk memasukan alamat lengkap user. Property yang biasa digunakan dalam textarea yaitu sebagai berikut : Name, merupakan property yang berfungsi untuk memberi nama textarea. Cols, merupakan property yang digunakan untuk menentukan lebar dari textarea. Rows, merupakan property yang digunakan untuk menetukan tinggi dari textarea. 2
Tag yang digunakan yaitu :
c) Select Elemen Select digunakan untuk pilihan yang berupa dropdown kebawah. Elemen select biasa digunakan untuk menginput data berupa pilihan kota, tanggal lahir, dan lain sebagainya. Property yang biasa digunakan dalam element select yaitu : Name, merupakan property yang berfungsi untuk memberi nama elemen select. Size, merupakan property yang digunakan untuk menentukan berapa banyak pilihan yang ditampilkan dalam elemen select. Didalam elemen select, terdapat elemen option yang digunakan untuk menuliskan pilihan-pilihan pada elemen select.
Tag yang digunakan untuk elemen select dan option yaitu sebagi berikut : <select name=”negara” size=”2”>