Pemrograman

Bahasa

Framework

Peralatan

Info

Aneka macam elemen form HTML 5

– 06 March 2014


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>
Form sederhana

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>
JS Bin

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' />
Warna

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' />
JS Bin

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.