YODHA.web.id – Kali ini saya akan membahas Aneka macam elemen form HTML 5 berserta penjelasannya. Form merupakan sebuah antarmuka yang digunakan oleh penunjung website untuk berinteraksi. Formulir dapat menampung data yang akan dikirim ke server.
Cara membuat formulir
Formulir dibuat dengan tag <form>. Dalam kode tag ini, dapat diisi dengan berbagai jenis ruas pengisian (input field). Contoh:
<form>
Nama: <input type=‘text’ />
<input type=‘submit’ value=‘kirim’ />
</form>Jenis-jenis ruas
Ruas adalah bagian dari formulir yang berfungsi sebagai tempat menampung suatu nilai. Di ruas inilah pengunjung situs akan mengisi nilai atau data.
1. Ruas teks
Ruas ini berfungsi menerima data masukan berupa teks. Contoh penulisan ruas ini di HTML:
<form>
Nama: <input type=‘text’ />
</form>2. Ruas password
Ruas ini berfungsi untuk menerima data masukan berupa password. Ruas ini tidak sperti ruas teks, ruas ini akan menyembunyikan data yang dituliskan di dalamnya. Contoh:
<form>
Nama: <input type=‘password’ />
</form>3. Ruas checkbox
Ruas ini untuk menyediakan pilihan-pilihan yang dapat dicentang dengan mengeliknya. Contoh:
Pilih Beberapa distro yang anda sukai:<br />
<label><input type=‘checkbox’ name=‘Debian’ />Debian</label><br />
<label><input type=‘checkbox’ name=‘Ubuntu’ />Ubuntu</label><br />
<label><input type=‘checkbox’ name=‘Mint’ />Mint</label><br />
<label><input type=‘checkbox’ name=‘Fedora’ />Fedora</label><br />
<label><input type=‘checkbox’ name=‘openSUSE’ />openSUSE</label>Pilihan checkbox diapit dengan tag <label> supaya saat teks yang berada setelah chekbox diklik, chekbox-nya juga ikut diklik.
Contoh chekbox
4. Ruas Radio
Kalau tadi, memilih dengna chekcbox dapat memilih lebih dari satu pilihan. Berbeda dengan radio, hanya dapat memilih satu pilihan saja. Contoh:
Radio
Penulisan setiap pilihan harus memiliki atribut name dengan nilai yang sama. Kalau tidak sama, maka pilihan tersebut akan dinggap berbeda. Contoh:
Radio
Pada contoh diatas, kedua pilihan dapat dipilih, kerena memiliki atribut name dengan nilai yang berbeda yaitu jk dengan jeniskelamin.
5. Ruas warna
Warna di komputer disimpan dalam bilangan heksadesimal, contoh warna biru = #0000ff. Pengunjung situs tidak mungkin mengisi bilangan aneh itu. Oleh karena itu, di HTML 5 disediakan ruas khusus yang menangani hal ini. Contoh ruas warna di HTML:
Pilih warna latar: <input type=‘color’ />6. Ruas waktu
Ruas ini untuk menerima data berupa waktu. Contoh:
Tanggal lahir: <input type=‘date’ /><br />
Bulan: <input type=‘month’ /><br />
Minggu: <input type=‘week’ /><br />
Sekarang Pukul: <input type=‘time’ /><br />
Tanggal konfirmasi: <input type=‘datetime-local’ />7. Ruas email
Menerima data berupa alamat surel/pos-el (email). Contoh:
Surel
8. Ruas berkas
Untuk menerima data dalam bentuk berkas, dapat menggunakan ruas dengan tipe file. Biasaya dipakai untuk menunggah atau melampirkan file. Contoh:
JS Bin
Pada contoh di atas, terdapat dua ruas masukan berjenis file, yang pertama hanya mampu mengunggah satu berkas saja. Sedangkan yang kedua dapat mengunggah lebih dari satu berkas karena diberikan atribut multiple.
9. Tombol tata ulang
Tombol tata ulang (reset) berfungsi untuk membersihkan ruas. Contoh:
Tombol Reset
10. Ruas angka
Terkadang pengunjung situs memasukkan data berupa teks, padahal kita ingin data tersebut berupa angka (integer). Oleh karena itu, kita perlu menggunakan ruas dengan tipe number. Contoh:
Input Number
11. Ruas uluran
Untuk menerima data berupa angka dengan batas tertentu dapat menggunakan ruas uluran. Contoh:
Range
12. Tombol submit dan ruas tel
Submit adalah tombol yang berfungsi mesubmisi atau mengirim data ke server, sedangkan ruas tel untuk memasukkan nomer telepon. Contoh:
Submit Telepon
13. Ruas url
Terkadang kita ingin pengunjung memasukkan data berupa alamt sius atau URL. Tapi, dia malah memasukkan data berupa angka atau alamat email. Oleh karena itu, kita perlu menggunakan ruas url ini. Contoh penulisannya di HTML:
JS Bin
14. Ruas tersembunyi
Biasanya digunakan untuk menyimpan data yang tidak boleh dilihat dan dimasukan oleh pengunjung. Contoh:
JS Bin
15. Tombol citra
Tombol ini mirip seperti tombol submit. Namun, tombol ini memakai gambar. Contoh:
JS Bin
16. Pilihan dengan seleksi
Digunakan untuk menampilkan daftar pilihan-pilihan (combobox). Contoh:
JS Bin
17. Ruas datalist
Digunakan untuk menyediakan data otokomplit (combobox)
untuk ruas masukan. Contoh: JS Bin
18. Mengelompokan pilihan
Kita juga dapat menglompokkan pilihan-pilihan ke dalam beberapa kategori dengan menggunakan tag <optgroup>. Contoh:
JS Bin
19. Area teks
Digunakan untuk menampung teks yang panjang, biasanya untuk komentar. Contoh
Textarea
20. Tombol biasa
Tombol berguna untuk menjalankan suatu fungsi tertentu. Pada contoh-contoh di atas, kita sudah membuat beberapa tombol seperti tata ulang (reset) dan submit. Untuk membuat tombol biasa, kita datap menggunakan ruas bertipe button. Contoh:
<form>
<input type=“button” value=“sebuah tombol”/>
<form>Kesimpulan dan saran
Formulir diperlukan apabila ingin berinteraksi dengan penujung web. Gunakanlah ruas yang tepat. Agar lebih mantap, saya sarankan untuk berlatih dengan membuat formulir HTML dari formulir cetak yang ada di sekitar anda.
Catatan: Semua contoh-contoh elemen di atas, dapat ditampilkan dengan baik di browser Google Chrome versi mutakhir.
