Membuat form isian

 Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit. Untuk itu kalian sebaiknya membaca setiap petunjuk disini agar lebih mudah memahami cara membuat form ini.

Di bawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input

Nama Kalian :
Password :
Hobi :	Baca Berenang
Pernah ke Klikbelajar.com sebelumnya?	Sudah Belum
Mana yang kalian sukai?	Duren Pisang Mangga
Ceritakan tentang diri kalian :

Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan bahan-bahannya, yaitu <form>, <input>, <select>, dan <option>.

Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat sebuah form yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL. Disini kalian hanya mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form yang baik.
Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web kalian misalnya teks. Dari atas ke bawah :

• Text
• Password
• Checkbox
• Radio
• Select
• Textarea

 Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu banyak. Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh penggunaannya adalah sebagai berikut :


Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />




Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />

Nama : <input type="text" size="25" />
Pesan Anda : <input type="textarea" cols="20" rows="20" />

Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari password tersebut.
Cara membuatnya cukup mudah :


Password : <input type="password" size="25" />


Password : <input type="password" size="25" />

Password : <input type="password" size="25" />

Silahkan script html tersebut kalian coba pada papan tulis di bawah.

Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari beberapa pilihan yang disediakan.


Checkbox

Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat penggunaannya berikut ini :

view plaincopy to clipboardprint?

1. Pelajaran yang kalian sukai :  
2. <input type="checkbox"> Matematika  
3. <input type="checkbox"> Fisika  
4. <input type="checkbox"> Kimia  
5. <input type="checkbox"> Sejarah  

view plaincopy to clipboardprint?

1. Pelajaran yang kalian sukai :  
2. <input type="checkbox"> Matematika  
3. <input type="checkbox"> Fisika  
4. <input type="checkbox"> Kimia  
5. <input type="checkbox"> Sejarah  

Pelajaran yang kalian sukai :
 Matematika
 Fisika
 Kimia
 Sejarah

Radio

Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh penggunaannya :
Pelajaran yang kalian sukai :
<input name="favorit" value="matematika" type="radio"> Matematika
<input name="favorit" value="fisika" type="radio"> Fisika
<input name="favorit" value="kimia" type="radio"> Kimia
<input name="favorit" value="sejarah" type="radio"> Sejarah

Pelajaran yang kalian sukai :  

<input name="favorit" value="matematika" type="radio"> Matematika  

<input name="favorit" value="fisika" type="radio"> Fisika  

<input name="favorit" value="kimia" type="radio"> Kimia  

<input name="favorit" value="sejarah" type="radio"> Sejarah  

Pelajaran yang kalian sukai :
 Matematika
 Fisika
 Kimia
 Sejarah

Select

Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :

Pelajaran yang kalian sukai :


<select name="favorit">
 <option>Matematika
</option><option>Kimia
</option><option>Fisika
 </option><option>Bahasa
</option></select>

Pelajaran yang kalian sukai :


<select name="favorit">
 <option selected="selected">Matematika
 </option><option>Kimia
 </option><option>Fisika
  </option><option>Bahasa
</option></select>

Pelajaran yang kalian sukai :

  Matematika
  Kimia
  Fisika
  Bahasa

Silahkan kode-kode diatas dicoba di papan tulis dibawah agar kalian lebih memahami aplikasinya.