TUTORIAL FORM INPUT DENGAN HTML

Latihan: Membuat Form Pendaftaran Exstra Kulikuler

Sebelum kita ke tutorialnya, ane boleh nanya dulu gak sih ke pembaca yang terhormat ini ? ente udah tau apa belum sih pengertian dari form ? :-D disimak ya pembaca yang budiman :-D

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). Form dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya.udah tau kan :-D, 

nah sekarang kita baru akan latihan membuat formnya ya, semakin banyak latihan, semakin bagus.

Berikutnya kita akan coba membuat 

Form Pendaftaran Exstra Kulikuler

• Input NIS;
• Input Nama;
• Input Jenis Kelamin;
• Input Alamat;
• Input Jurusan;
• Input Email;
• Input Password;
• Input Ekstra yang dipilih;

Mari kita buat…
pertama kali kita buat seperti biasa dulu, alias kode html pertama kali seperti ini,

yang saya lingkari itu judul di tab, tampilannya seperti dibawah ini sob, misalkan kalian buat "otak udang" maka tampilan tapnya akan menjadi "otak udang", sampai disini ngertikan ?

oke next, kita akan membahas salah satu kode HTML yaitu sebuah tag yang berfungsi untuk mengelompokan beberapa elemen yang terdapat didalam sebuah form. Tag ini disebut fieldset. Dengan menggunakan fieldset form terlihat lebih rapi dan jelas. Cara menggunakannya cukup dengan menambahkan tag pembuka <fieldset> dan penutup</fieldset>. Berikut contoh kode penggunaan fildset.

nah, tampilannya akan seperti ini

selanjutnya kita akan membuat kode untuk input "Nama" "Nis" dan lain-lain.

setelah kalian melihatnya pasti timbul pertanyaan, kenapa di "Alamat" ada kode "textarea" ? begini penjelasannya Objek form textarea digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau Alamat. nah, udah ngerti kan, berikut tampilan dari koding diatas :

terlihat kan teman-teman, kalau kolom di Input Alamat lebih besar. sekarang kita buat kode input yang lainnya ya

nah, selesai teman-teman, berikut tampilan dari kode kita ya