Pada kesempatan kali ini, saya akan mengajarkan sebuah input yang tidak terlihat oleh mata. Input ini berbeda dengan jenis input lain. Input ini tidak ditampilkan pada layar. Mari kita mulai tutorial HTML – input tersembunyi.
Tutorial HTML – Input Tersembunyi – Bagian 15 – 9 (Bahasa Indonesia)
Input tersembunyi dapat disertakan di dalam form. Namun, input ini tidak digunakan untuk berinteraksi dengan pengunjung halaman website. Input ini digunakan untuk membawa data dari suatu halaman ke halaman lain. Input tersembunyi menggunakan tag input dengan atribut type=”hidden”. Berikut ini adalah contoh input hidden di dalam sebuah form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <title>Tutorial HTML - Form</title> </head> <body> <form> <b>Login Form</b><br /> Username<br /> <input type="text" name="username" /><br /> Password<br /> <input type="password" name="password" /> </form> <br /> <form> <input type="hidden" name="kode_promo" value="diskon20%" /> <b>Registration Form</b><br /> Username<br /> <input type="text" name="username" value="nama samaran" /><br /> Email<br /> <input type="text" name="email" value="" /><br /> Jenis Kelamin<br /> <input type="radio" name="jenis_kelamin" value="pria" checked /> Pria<br /> <input type="radio" name="jenis_kelamin" value="wanita" /> Wanita<br /> Alamat<br /> <textarea name="address">Isi Alamat Anda di sini. Data di sini akan dikirimkan</textarea><br /> Cara Anda mengetahui website ini<br /> <select name="cara_ketahui"> <option value="mesin_pencari">Search Engine</option> <option value="ads" selected>Iklan</option> <option value="sosmed">Social Media</option> </select><br /> <input type="checkbox" name="agree" value="yes"> Saya sudah membaca, mengerti dan bersedia menaati semua peraturan<br /> <script type="text/javascript" lang="javascript"> function Daftar() { var kalimat = " Serba Online\n\nSelamat datang di tutorial HTML\n (Bahasa Indonesia)"; alert(kalimat); } </script> <br /> <input type="button" value=" Daftar" onClick="Daftar();" /> <br /> </form> </body> </html> |
Kode HTML di atas tidak akan menghasilkan tampilan apapun seperti berikut ini:
Walaupun tidak menghasilkan tampilan apapun input tersebut akan membawa sebuah data untuk dikirimkan bersama form. Pada contoh di atas, sebuah data yang bernama kode_promo dengan nilai diskon20% akan dikirimkan bersama form.
Cara melihat kehadiran input tersembunyi
Kehadiran input tersembunyi di dalam halaman website tidak dapat terlihat oleh mata karena memang tidak ditampilkan. Namun, input tersembunyi dapat ditelusuri melalui source code yang diterima aplikasi peramban.
Pada aplikasi Mozilla Firefox kita dapat mengakses source code melalui menu Tools -> Web Developer -> Page Source atau menggunakan hot key Ctrl + U.
Kita dapat menemukan input hidden di dalam source code yang diterima oleh aplikasi peramban.
Fungsi input tersembunyi
Input tersembunyi mempunyai kesan yang tidak penting terhadap suatu halaman website. Namun, justru input tersembunyi ini sangat membantu web developer untuk mencatat suatu data dan menyimpannya secara sementara di dalam halaman website. Data dapat di simpan di dalam halaman website tanpa harus mengotori tampilan website.
Banyak website developer memanfaatkan fungsi input tersembunyi untuk membantu penyertaan data yang akan dikirimkan bersama suatu form. Mereka menggunakan input tersembunyi untuk menyimpan data, seperti berikut ini: data terenkripsi, data keamanan, token, data tracking dan lain sebagainya. Biasanya data yang dimasukkan ke dalam input tersembunyi adalah data yang tidak ingin ditampilkan di atas halaman website tapi data tersebut digunakan untuk kegunaan internal sistem. Bila Anda memperdalam ilmu design website hingga ke tahap pemrograman di sisi client maupun sisi server, Anda akan sangat merasakan input tersembunyi sangat membantu pekerjaan Anda.
Saya kira sekian saja tutorial HTML kali ini dan tidak banyak yang perlu dibahas karena fungsi input tersembunyi hanya diperuntukkan menyimpan data di dalam halaman website atau form. Kita akan melanjutkan lagi tutorial HTML yang masih di seputar form, yaitu input tombol ulang.
Tutorial HTML – Input Tombol Ulang – Bagian 15 – 10 (Bahasa Indonesia)
