Terdapat banyak elemen-elemen masukan pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Bagian ini akan membahas tiap-tiap elemen masukan form, beserta dengan cara pembuatannya.
Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen: textarea dan input. textarea digunakan untuk masukan teks yang terdiri dafi beberapa baris, sementara input digunakan untuk masukan teks yang hanya satu baris.
Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya langsung memasukkan tag-nya saja:
selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk mendapatkan nilai masukan standar:
<textarea> Contoh isi textarea </textarea>
Contoh Penggunaan Elemen TextArea
Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan menggunakan properti height dan width.
Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:
yang akan menghasilkan elemen masukan seperti berikut:
Contoh Penggunaan Elemen Input
Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu:
- color
- datetime-local
- number
- tel
- week
- date
- range
- time
- datetime
- month
- search
- url
- password
- text
- file
Silahkan pergi ke halaman berikut untuk melihat demo dari setiap nilai atribut type yang ada.
Selain mengisikan data berupa teks, seringkali kita juga menemukan data berupa pilihan, misalnya jenis kelamin atau hobi. Pengisian data seperti ini biasanya memberikan beberapa pilihan kepada pengguna, dan pengguna dapat memilih satu atau beberapa pilihan yang diberikan.
Jika kita ingin memberikan pilihan kepada pengguna, dan memastikan pengguna hanya memilih satu pilihan saja, kita dapat menggunakan radio button. Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut type bernilai :code`radio`:
<input type="radio" name="sex" value="pria"> Pria <br> <input type="radio" name="sex" value="wanita"> Wanita
dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan browser bahwa radio button dengan atribut name yang sama adalah merupakan kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua buah pilihan pada radio button tersebut.
Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.
Contoh Penggunaan Elemen Radio Button | Demo
Jika ingin memberikan pengguna kemampuan untuk memilih banyak pilihan sekaligus, kita dapat menggunakan elemen checkbox. Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikan checkbox.
<input type="checkbox" name="day" value="senin"> Senin <br> <input type="checkbox" name="day" value="selasa"> Selasa <br> <input type="checkbox" name="day" value="rabu"> Rabu
Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox, dengan alasan yang sama untuk radio button.
Contoh Penggunaan Elemen Checkbox | Demo
Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan negara yang ada di dunia akan jika ditampilkan pada radio button akan menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.
Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu select dan option. Elemen select membungkus seluruh elemen option yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang diinginkan. Perhatikan kode di bawah:
<select name="country"> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="filipina">Filipina</option> <option value="vietnam">Vietnam</option> </select>
yang akan menghasilkan:
Contoh Penggunaan Elemen Dropdown | Demo
dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat menambahkan atribut multiple pada elemen select:
<select name="country" multiple> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="filipina">Filipina</option> <option value="vietnam">Vietnam</option> </select>
Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak | Demo
Elemen tersembunyi memberikan kebebasan pada pengembang untuk mengirimkan data ke server tanpa menampilkan data tersebut kepada pengguna. Elemen tersembunyi biasanya berisi kode khusus untuk melacak pengguna, kunci enkripsi, atau kode-kode lainnya yang tidak penting bagi pengguna, tetapi diperulkan oleh website.
Pembuatan elemen tersembunyi dilakukan dengan menggunakan elemen input, yang memiliki atribut type bernilai hidden.
<input type="hidden" name="csrf_token" value="a1923axclkaseruczxcna">