Form HTML

Form adalah salah satu tag yang bisa kalian gunakan dalam HTML. Form dalam HTML bisa kalian gunakan untuk mengirim data dari satu halaman ke halaman lain. Data yang dikirim berasal dari input yang diisi pengguna. Data tersebut bisa diproses dengan "server side scripting language" seperti PHP, javascript (nodejs), python, dll.

Sama dengan tag lain, form juga memiliki atribut. Atribut yang mutlak diperlukan dalam form adalah action dan method. Action berguna untuk menentukan file tujuan yang bisa mengolah data dengan menggunakan script. Method diperlukan untuk menentukan cara pengiriman data.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <FORM method="post" action="coba.html" autocomplete="off">
        <INPUT type="text" name="nama" value="Gerimisya Stela Rida">
        <INPUT type="submit" name="kirim" value="kirim?">
    </FORM>
</BODY>
</HTML>

Contoh di atas menggunakan atribut method yang bernilai post, dan atribut action yang berisi nama file yang akan dituju saat tombol submit ditekan. Karena tujuannya adalah file HTML, maka tidak ada data yang diproses. Untuk mengolah isi form yang dikirimkan, kalian membutuhkan bahasa scripting seperti PHP, python, javascript (nodejs), dll.

Elemen form memerlukan beberapa tag <input> dan beberapa elemen HTML sejenis untuk menerima data dari pengguna. Tag <input> bisa diubah-ubah tampilan dan kegunaannya dengan atribut "type". Salah satu tipe input yang sangat diperlukan dalam form adalah input dengan tipe submit yang digunakan untuk mengirim data dari form. Tipe input lainnya akan saya bahas lain kali.

Method

Mungkin ada yang bertanya perbedaan dari method GET dan post, bedanya ada di address bar. Saat tombol submit diklik, method GET akan menampilkan data atau "query" yang dikirim di adress bar setelah tanda tanya, sedangkan POST hanya menampilkan alamat halaman atau nama filenya saja. Untuk lebih jelasnya coba saja ubah methodnya dan lihat "address bar-nya".

Atribut Form

Form bisa menggunakan beberapa atribut yang umum digunakan seperti class, id, style, dll. Selain itu form mempunyai beberapa tag khusus. Beberapa tag khusus yang bisa digunakan dalam form bisa kalian lihat di bawah ini.

  1. Action : file tujuan yang memproses data dari form.
  2. Accept-charset : Set karakter yang digunakan untuk mengirim data. Nilai yang umum digunakan adalah UTF-8 dan ISO-8859-1.
  3. Autocomplete : Mengaktifkan auto complete atau sebaliknya. Nilainya bisa on atau off.
  4. Enctype :Tipe enkripsi. Kalian akan memerlukannya jika ada pengiriman file.
  5. Target : Menentukan di mana halaman / file tujuan dibuka. Nilainya bisa berupa _self, _parent, _blank, dan _top. Kegunaannya relatif sama dengan target pada tag <a>.
  6. Rel : Hubungan antara file tujuan dan halaman saat ini.
  7. Novalidate : Mengabaikan validasi input pada form.
  8. Name : Nama form
  9. Method : Metode pengiriman. Bisa bernilai "post" atau "get"

Beberapa Tag yang Bisa Digunakan dalam Form

Tag form memerlukan tag input untuk menentukan data yang akan dikirim ke server. Selain tag input, ada beberapa tag lain yang bisa digunakan dalam form.

  1. <label>
  2. <textarea>
  3. <button>
  4. <select>
  5. <option>
  6. <optgroup>
  7. <fieldset>
  8. <output>