Assalamualaikum Wr Wb.
A. Pengertian
    Form merupakan tempat penginputan data sebelum diproses oleh sistem. Salah satunya adalah form login, form comment, form data user, dan lain sebgainya.
     
B. Maksud dan Tujuan
    Dalam sebuah website pasti sering kita temui macam-macam form, misalnya form login facebook. Dalam bab ini kita akan belajar cara membuat form dan memahami setiap fungsi-fungsi dari tiap form.
      
C. Pembahasan
  • Tag <form>
Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang dikirim berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut kedua beruoa method. method ini menjelaskan bagaimana data yang akan dikirim oleh browser. nilai dari method ini biasanya get atau post. Berikut contoh penulisan <form> pada HTML :

<form action="proses.php" method="post">
      ......isikan dengan.....
</form>
  • Tag <input>
Tag <input> merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak sekali yang bisa digunakan. Misalkan isian teks, password, checkbox, radiobutton, sampai dengan kontrol submit berada dalam tag <input>.
Berikut beberapa bentuk dalam keluarga tag <input> yang dikategorikan berdasarkan atribut: 
  1. <input type="text"> textbox yang bisa menerima inputan text mislakan username.
  2. <input type="password"> textbox yang menerima inputan text, akan tetapi text yang diinputkan akan tampil sebagai tanda bintang.
  3. <input type="submit"> inputan ini berupa tombol (button) untuk memproses data inputan dari form.
  4. <input type="checkbox"> inputan berupa checkbox yang dapat di ceklis oleh user.
  5. <input type="radio"> inputan yang berupa radio grup, diman user dapat memilih salah satu dari pilihan yang disediakan.
  • Tag <textarea>
<textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalmanya.
Berikut contoh penulisan textarea :

<textarea>
      isikan pesan anda
<textarea>

  • Tag <select>
<select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunaan select selalu diikuti oleh tag <option> yang digunakan untuk membuat pilihan.
Berikut contoh penulisan <select> pada html :
<select>
<option>Semarang</option>

<option>Bandung</option>

</select>

  • Atribut name
atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server, berikut contoh penulisan yang menggunakan atribut name
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
Untuk lebi jelas membuat form dengan menggunakan HTML, perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
   <title>Belajar Membuat Form pada HTML</title>
</head>

<body>
<form>
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
Jenis Kelamin : 
<input type="radio" name="jk" value="laki-laki" checked /> 
Laki - Laki
<input type="radio" name="jk" value="perempuan" /> 
Perempuan
<br/>
bahas pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
pesan anda :
<textarea>
</textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>

Dan hasilnya ketika ditampilakan di web browser :

Semoga Bermanfaat , Wassalmualaikum wr wb.

TAGS : |