Tutorial Form HTML Part 9: Fungsi dan Cara Penggunaan Tag Input Type Hidden HTML
Halo Kawan-kawan,
Pada kesempatan kali ini kita akan belajar tag input dengan type hidden yang merupakan salah satu “senjata rahasia” dalam merancang form HTML. Di dalam Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input Type Hidden ini kita akan mempelajari cara memanfaatkan fitur objek ini.
Fungsi tag input type hidden dalam pembuatan Form HTML
Tag input dengan type hidden adalah sebuah objek form khusus yang sesuai dengan nama tipenya, memang tersembunyi dan tidak dapat dilihat oleh user. Namun objek form ini menawarkan fleksibilitas yang dapat dimanfaatkan oleh programmer untuk menyisipkan suatu data untuk diproses.
Type hidden ini bisa digunakan untuk mengirim suatu data dari sebuah halaman ke halaman lain tanpa mengganggu bentuk form yang telah ada, dan biasanya digabungkan dengan pemrosesan javascript atau PHP.
Cara penulisan dasar type hidden ini adalah sebagai berikut:
<form>
<input type="hidden" />
</form>
Atribut name: Untuk Pemrosesan tag input type hidden
Atribut name berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server (misalnya dengan bahasa PHP). Berikut adalah cara penulisan tag input type hidden dengan atribut name:
<form>
<input type="hidden" name="asal_halaman"/>
</form>
Atribut value: Sebagai Nilai tag input type hidden
Atribut value untuk type hidden berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa PHP, nilai dari value inilah yang akan diproses. Dalam type hidden ini, nilai dari atribut value inilah yang merupakan nilai terpenting, karena disinilah programmer dapat menyisipkan data yang diinginkan.
Berikut adalah contoh penggunaan atribut value:
<form>
<input type="hidden" name="asal_halaman" value="halaman_register"/>
</form>
Atribut id dan class: CSS dan Javascript
Selain atribut yang dijelaskan diatas, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type hidden. Namun karena sifatnya yang tersembunyi, atribut class tidak akan diperlukan. Tag id dibutuhkan untuk pemograman HTML menggunakan Javascript.
Cara Penggunaan tag input type hidden dalam Form HTML
Untuk merangkum penggunaan Tag Input type hidden beserta atributnya, saya akan membuat contoh kode HTML cara penggunaan tag input type hidden:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=hidden HTML</title>
</head>
<body>
<h4>Belajar tag Input type="hidden" Nusantara Coding:</h4>
<form action="proses.php" method="get">
<input type="hidden" name="asal_halaman" value="halaman_register"/>
<input type="submit" value="Kirim pesan rahasia"/>
</form>
</body>
</html>
Hasil Code:
Jika anda menjalankan kode HTML tersebut, yang terlihat hanya sebuah tombol, namun ketika tombol tersebut diklik, objek form hidden akan terlihat nilainya di alamat web browser sebagai berikut:
file:///D:/HTML/proses.php?asal_halaman=halaman_register
Pesan ini menandakan bahwa sebenarnya di dalam form terdapat tag input dengan type hidden. Asal_alaman berasal dari atribut name, dan halaman_register adalah nilai dari atribut value. Penggunaan tag input type hidden ini akan berguna saat dikombinasikan dengan bahasa pemograman web seperti Javascript.
Dalam tutorial tag input type hidden ini kita telah mempelajari cara penulisan dan penggunaan objek form hidden. Berikutnya kita akan membahas tentang tag select.