Form HTML

Form pada HTML digunakan untuk menampung macam-macam element yang berkaitan dengan sebuah form. Dalam sebuah form biasanya terdapat kotak input (control) dan element lainnya yang dapat diedit kemudian ditulis untuk dikirim pada sebuah server untuk diproses guna mendapatkan informasi tertentu dari atau untuk user.

Form di HTML dapat kita buat dengan tag <form>.

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

• action untuk menentukan akasi yang akan dilakukan saat data dikirim;
• method metode pengiriman data.

Contoh :

<form action="aksi.php" method="GET">
    <!-- form field di sini -->
</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari fungsi yang akan memproses form.

Secara sederhananya seperti pada contoh di atas, kita akan menyuruh file aksi.php untuk memproses data form. Proses ini akan dibahas pada materi PHP dipelajaran pemrograman web.

Kode HTML di atas tidak akan menghasilkan apa-apa, karena kita belum membuat field-nya.

Form sangat penting untuk mendapatkan informasi dari user sebuah website, sangat berguna bagi interaktifitas suatu website dengan pengunjungya. Implementasi form pada suatu website seperti formulir pendaftaran pengunjung, fasilitas pencarian, buku tamu, dan lain-lain.

HTML menyediakan beberapa tag di dalam tag <form> untuk membuat sebuah formulir.  Tag tersebut adalah :

1. Tag <input>
2. Tag <textarea>
3. Tag <select>

Tag <form>

Tag <form> berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action dan method.

Sintaks:

<form action="action" method="GET"|"POST">

     ...........................

</form>

Atibut Action

Fungsi dari Attribute action adalah untuk menentukan URL tujuan dari script yang akan menerima data dari form.

Atibut Method

Untuk mengirimkan informasi ke web server, form mempunyai 2 metode, yaitu GET dan POST. Metode GET merupakan default pengiriman suatu data form. Metode ini mengirimkan data dengan cara meletakkan pada bagian akhir dari URL. Sedangkan pada metode POST, data dikirim secara terpisah. Dengan adanya penyimpanan data secara terpisah ini membuat metode POST mampu menyimpan data dalam jumlah banyak.

contoh menggunkan atribut GET :

<form method="GET" action=proses.php>
    <table>
        <tr>
            <td>Nama</td>
            <td><input type="text" name="NamaSiswa"></td>
        </tr>
        <tr>
            <td>Nilai TIK</td>
            <td><input type="text" name="Nilai"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="Submit" value="Simpan Data" name="Simpan">&nbsp;
                <input type="Reset" value="Clear" name="Clear">
            </td>
        </tr>
    </table>
</form>

Hasilnya :

Ketika klik SImpan Data URL pada browser akan tampil seperti berikut :

Sedangkan dengan atribut POST seperti contoh berikut ini :

Tag Input

Tag INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Tag ini mempunyai attribute yaitu:

• name      : mendefinisikan nama dari input kontrol form
• size         : mendefinisikan ukuran teks pada input
• type        : mendefinisikan bentuk-bentuk input kontrol
• value      : mendefinisikan nilai awal/reset/submit
• checked : mendefinisikan pilihan terpilih pada type   radio/checkbox

Tag ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.

Format penulisan tag input seperti berikut :

<input name=”name” size=”number” type=”text”|”checkbox”|”radio”|”submit”|”reset” value=”value” checked >

contoh :

<input type=”Submit” value=”Simpan Data” name=”Simpan”>

Type Text

Text adalah masukan yang berbentuk karakter. Untuk memasukkan data berupa karakter dalam HTML,  digunakan elemen input bertipe text.

Contoh:

<input type="text" name="namasiswa" size="50" maxlength="48">

size   :   digunakan untuk menentukan   panjang komponen Form yang   berupa text pada HTML.

maxlength  :   digunakan untuk menentukan batas   panjang  isian data pada media masukan.

Contoh :

Hasil :

Type Password

Dalam menggunakan komponen Password, setiap karakter yang dimasukkan didalamnya dienkripsi sehingga karakter yang dimasukkan tidak akan ditampilkan melainkan diwakili oleh karakter  lain.

Contoh :

Hasil :

Type Radio

Radio button digunakan jika kita mempunyai sebuah pilihan dan hanya bisa memilih satu pilihan saja. (Contoh implementasinya adalah voting pada sebuah website)

Contoh :

Hasil :

checked :    digunakan untuk memberi tanda opsi yang terpilih pada salah satu opsi pilihan.

Type Checkbox

Berbeda dengan radio button, checkbox memungkinkan user untuk memilih pilihan lebih dari satu pilihan.

Contoh :

 

Hasil :

Type Hidden

Didalam Form, kita dapat memasukkan data yang disembunyikan (hidden). Penggunaannya  adalah untuk menyimpan data yang berasal dari variable masukan sebelumnya. Data tersebut akan disimpan dalam variable masukan yang disembunyikan  dan selanjutnya akan dilakukan pengiriman data menuju halaman lain.

Type File Field

File field biasanya digunakan untuk upload data atau file dari komputer anda menuju internet atau server.

Contoh :

Hasil :

Type Submit dan Reset

Submit button digunakan untuk mengirim isian yang telah diisikan pada form yang kita buat. Pada atribut form action yang berfungsi menentukan arah yang kita tuju. Method adalah bagaimana kita melakukan pengiriman, yaitu GET atau POST. Biasanya dalam suatu web yang mempunyai halaman form menggunakan halaman yang dinamis seperti PHP.

Contoh :

Hasil :

Tag Select

Tag SELECT berfungsi untuk mendefinisikan opsi pilihan pada form. Element ini mempunyai attribute yaitu name, size, multiple (diizinkan memilih beberapa pilihan).

Sintaks:

 <select  name=”name”   size=”number”  multiple >

      …………………

 </select>

Tag Option

Tag OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.

Sintaks:

<option  value=”number” selected >

    …………………

</option>

Contoh 1 :

Hasil :

Contoh 2 :

 

Hasil :

Tag Textarea

TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Tag ini mempunyai attribute yaitu name, cols, rows.

• name  :    mendefinisikan nama input kontrol form element textarea
• cols  :  mendefinisikan jumlah kolom textarea (lebar)
• rows  :  mendefinisikan jumlah baris textarea (tinggi)

Contoh 1 :

Hail :

Contoh 2 :

Hasil :

Latihan :