Form dalam HTML

Form atau yang biasanya kita kenal dengan nama formulir adalah salah satu komponen dari bahasa pemograman HTML yang berfungsi untuk membuat web yang kita design menjadi lebih interaktif. Form biasanya digunakan untuk membuat username login, halaman kontak, buku tamu, registrasi user, dll.

Untuk membuat form, tag HTML yang digunakan adalah <form>, sedangkan komponen-komponen yang membentuk form dibuat dari tag-tag lainnya seperti input, select, textarea, dll. Komponen-komponen tersebut tentunya harus ditulis diantara tag <form> dan tag </form>.

Struktur dasar penggunaannya adalah sebagai berikut :

     <form action=”#” method=”post”>

          ……….

     </form>

Bisa dilihat bahwa di dalam tag form terdapat atribut lainnya seperti action dan method.

Atribut action nantinya diisi dengan nama file yang akan menjadi tujuan pemrosesan data yang diisi di dalam form. Biasanya file yang berada pada atribut action adalah file yang ditulis dengan bahasa pemograman yang memiliki kemampuan untuk memproses data-data yang dikumpulkan oleh form. Seperti misalnya PHP, ASP, Python, dll.

Atribud method berfungsi untuk mengatur metode pengiriman data-data yang ada di dalam form. Ada dua metode yaitu metode get dan post. Jika kita memilih get maka data-data form akan dikirim melalui URL. Metode get biasanya digunakan untuk mengirim data yang sedikit. Sedangkan jika kita memilih untuk menggunakan metode post, data tidak dikirim melalui URL karena data yang dikirim biasanya bersifat sensitif seperti username, password, nomor kartu kredit, dan data-data lainnya yang sangat panjang.

Input

Pada saat bekerja dengan form, tag input akan sering kita jumpai karena memiliki banyak variasi dan bentuk. Mulai dari text, password, checkbox, radio, sampai dengan tombol submit, dll. Semua komponen tersebut ada dibuat dalam bentuk tag <input>. Bentuk-bentuk tersebut dapat dihasilkan jika ditulis menggunakan atribut type.

<input type=”text”> akan menghasilkan textbox yang menerima input berupa text

<input type=”password”> akan menghasilkan textbox namun karena digunakan untuk mengisi password makan setiap karakter yang diketik akan diganti dengan karakter bintang atau titik hitam.

<input type=”checkbox”> akan menghasilkan checkbox yang dapat dicentang oleh pengguna dengan cara di klik. Biasanya digunakan untuk isian yang dapat dipilih lebih dari satu. Misalnya untuk pilihan hobby, minat, dll.

<input type=”radio”> akan menghasilkan radio button yang fungsinya mirip dengan checkbox namun perbedaannya ialah, pengguna hanya boleh memilih salah satu dari pilihan yang ada. Misalnya untuk pilihan jenis kelamin.

<input type=”submit”> akan menghasilkan tombol submit atau tombol yang berfungsi untuk mengirim data-data yang telah diinput pada form.

<input type=”reset”> akan menghasilkan tombol reset yang apabila ditekan akan mereset semua form ke posisi semula.

Textarea

Textarea merupakan sebuah tag form yang merupakan pengembangan dari tag <input type=”text”> atau textbox. Hanya saja textarea akan menghasilkan sebuah kotak text yang lebih besar untuk menerima isian text yang lebih panjang. Ukuran panjang dan banyaknya baris inputan dapat diatur melalui penggunaan atribut rows (baris) dan cols (kolom).

Contoh penggunaan :

     <textarea rows=”3” cols=”20”>

          Text yang dapat ditampung adalah 3 baris dan 20 kolom

     </textarea>

Select

Tag <select> digunakan untuk membuat input yang berbentuk menu drop down. Tag <select> akan digunakan bersama-sama dengan tag <option>.

Contoh penggunaan :

     <select>

          <option>pilihan pertama</option>

          <option>pilihan kedua</option>

          <option>pilihan ketiga</option>

     </select>

Atribut Name

Atribut name adalah atribut yang sangat penting, dan harus di tempatkan di dalam semua tag yang berada di bawah tag <form> agar data yang dikirim oleh form dapat dibaca oleh server. Atribut name itu sendiri akan berubah menjadi variabel dari masing-masing data tersebut.

Contoh penggunaan :

     <input type=”text” name=”nama”>

     <input type=”text” name=”alamat”>

Kedua tag di atas memang akan menghasilkan textbox yang sama persis, namun pada saat data dikirim masing-masing data yang ada akan dibedakan berdasarkan atribut name.

Contoh Penggunaan Tag <form>

<html>

   <head>

      <title>Penggunaan Tag Form</title>

   </head>

<body>

   <form action=”proses.php” method=”post”>

      Nama : <input type=”text” name=”nama”><br>

      Alamat : <input type=”text” name=”alamat”><br>

      Jenis Kelamin : <input type=”radio” name=”jenkel” value=”laki-laki”>Laki-Laki

                                 <input type=”radio” name=”jenkel” value=”perempuan”>Perempuan<br>

      Hobby : <input type=”checkbox” name=”hobby” value=”music”>Musik

                    <input type=”checkbox” name=”hobby” value=”dance”>Menari

                    <input type=”checkbox” name=”hobby” value=”design”>Desain<br>

      Profesi :

         <select name=”profesi”>

              <option value=”mahasiswa”>Mahasiswa</option>

              <option value=”wirausaha”>Wirausaha</option>

              <option value=”bumn”>Pegawai BUMN</option>

              <option value=”pns”>Pegawai Negeri</option

         </select><br>

      Pesan :

         <textarea name=”pesan” rows=”4” cols=”25”>

            Tulis pesan di sini :

         </textarea><br>

      <input type=”submit” value=”KIRIM”><input type=”reset” value=”RESET”>

   </form>

</body>

</html>