Al-fatihah
Hallo kawan :),kali ini kita akan belajar membuat sebuah form pendaftaran dengan menggunakan HTML.
Sebuah form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna, untuk memeberikan informasi tertentu dari pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama aplikasi web dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.
Form pada HTML dibuat dengan menggunakan elemen form. Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna dapat dibaca oleh aplikasi web. Pembungkusan elemen-elemen masukan dilakukan sama seperti kita membungkus elemen-elemen lain pada div:
<form action="#" method="post">
....
</form>
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.
Elemen Masukan Teks: TextField dan TextArea
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:
<textarea></textarea>
selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk mendapatkan nilai masukan standar:
<textarea> Contoh isi textarea
<
/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:
<input type="text" />
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
email
range
time
datetime
month
search
url
password
text
file
Elemen Pemilihan: Radio Button, Checkbox, dan Dropdown
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 name="sex" type="radio" value="pria" /> Pria <br />
<input name="sex" type="radio" 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.
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 name="day" type="checkbox" value="senin" /> Senin <br />
<input name="day" type="checkbox" value="selasa" /> Selasa <br />
<input name="day" type="checkbox" value="rabu" /> Rabu
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>
dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat menambahkan atribut multiple pada elemen select:
<select multiple="" name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Elemen Tersembunyi
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 name="csrf_token" type="hidden" value="a1923axclkaseruczxcna" />
Tombol pada Form
Setelah pengguna mengisikan data-data yang diminta oleh dokumen web, tentu saja pengguna harus mengirimkan data tersebut ke server. Pengiriman data dapat dilakukan pengguna melalui tombol khusus yang disediakan oleh HTML.
Tombol Pengiriman
Pembuatan tombol pengiriman juga dilakukan dengan menggunakan elemen input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:
<input name="submit" type="submit" value="Masukkan Form" />
Perhatikann bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari atribut value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal ini menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form, seperti pada radio button ataupun checkbox.
Tombol Penghapus Input
Ketika sedang mengisikan form, seringkali pengguna menyadari bahwa data-data yang diisikannya mayoritas adalah data yang salah. Pada saat ini biasanya pengguna akan menghapus seluruh isi dari form, satu per satu. Untungnya HTML telah memberikan fitur untuk menghapus seluruh isi form sekaligus, melalui tombol penghapus input.
Pembuatan tombol dilakukan sama persis seperti pada tombol pengiriman, dengan perbedaan nilai pada atribut type, yang diisikan dengan reset pada tombol penghapusan ini.
<input name="reset" type="reset" value="Kosongkan Form" />
Organisasi Elemen Form
Mengetahui bagaimana membuat elemen-elemen masukan pada form masih merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna tidak dapat mengetahui data apa yang harus diisikan ke dalam elemen-elemen tersebut.
UNtuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form. Adapun elemen-elemen yagn dapat digunakan untuk tujuan tersebut yaitu label, fieldset, dan legend.
Label
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan, dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan oleh elemen label.
Perhatikan kode berikut:
<label for="username">Username</label>
<input id="username" name="username" type="text" />
di mana isi dari atribut for pada label adalah sama dengan isi atribut id pada elemen input. Lihat hasil eksekusi kode pada halaman berikut dan coba klik teks “Username” untuk melihat efeknya. Coba juga untuk menggantikan isi atribut for atau id untuk melihat hasilnya.
Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen-elemen di dalamnya, yang tentunya dapat diubah dengan menggunakan CSS. Berikut adalah contoh penggunaan fieldset:
<br />
<fieldset>
<label for="username">Username</label>
<input id="username" name="username" type="text" />
<label for="password">Password</label>
<input id="password" name="password" type="text" />
</fieldset>
Legend
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan elemen legend sangat sederhana, hanya dengan menambahkan elemen tersebut sebagai child pertama dari fieldset, seperti berikut:
<br />
<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input id="username" name="username" type="text" />
<label for="password">Password</label>
<input id="password" name="password" type="text" />
</fieldset>
dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.
Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses pengecekan kewajiban isi atau berbagai batasan lain ini dikenal dengan nama validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika pengguna tidak mengisikan elemen maka browser secara otomatis akan memberikan peringatan kepada pengguna dan membatalkan pengiriman form. Contoh penggunaan atribut ini yaitu:
<input name="username" requied="" type="text" />
Pengunaan atribut type yang benar, untuk memastikan browser dapat melakukan pengecekan nilai yang diisikan pengguna dengan format sesuai dengan yang dispesifikasikan pada standar HTML. Misalnya, jika menggunakan type="email", maka pengguna tidak dapat mengisikan bukanemail sebagai masukan form.
Jadi, pastikan kalian menggunakan atribut-atribut yang tepat sesuai dengan data yang ingin disimpan, untuk memastikan browser dapat bekerja dengan optimal dalam melakukan validasi terhadap elemen-elemen dalam form.
Setelah kita mengetahui elemen - elemen dari form, selanjutnya kita akan mencoba membuat sebuah form beserta elemennya secara keseluruhan, seperti pada tampilan form 1 di bawah ini:
