Mengenal Form HTML
Form HTML diperlukan untuk mengumpulkan berbagai macam informasi user, seperti detail kontak nama, alamat email, nomor telepon, atau detail lainnya seperti informasi kartu kredit, dll.
Form berisi elemen khusus yang disebut kontrol seperti inputbox, kotak centang, radio-button, tombol kirim, dll. User umumnya mengisi form seperti memilih item, data diri, dll. dan mengirimkannya ke server web untuk diproses.
Tag <form> digunakan untuk membuat formulir HTML. Berikut ini contoh sederhana form login:
<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</fieldset>
</form>
Bagian berikut menjelaskan berbagai jenis kontrol yang dapat kalian gunakan pada form kalian.
Elemen Input
Ini adalah elemen yang paling umum digunakan dalam formulir HTML.
Elemen yang paling penting dalam form adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat digunakan oleh user untuk mengisikan data dengan yang berbeda-beda jenisnya. Jenis elemen input dapat berupa kotak centang, kata sandi, tombol radio, tombol kirim, tombol reset, dll.
Jenis input yang paling umum digunakan akan dijelaskan di bawah ini:
Text Field
Text field adalah area satu baris yang memungkinkan user untuk memasukkan teks.
Kontrol input teks satu baris dibuat menggunakan elemen <input>, yang atribut tipenya memiliki/berisi nilai teks. Berikut adalah contoh input teks satu baris yang digunakan untuk mengambil id username pada form login:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
Catatan: Tag <label> untuk mendefinisikan label pada elemen <input>. Jika kalian ingin user memasukkan beberapa baris, maka kalian harus menggunakan <textarea>.
Password Field
Bidang kata sandi mirip dengan bidang teks. Satu-satunya perbedaan adalah; karakter dalam bidang kata sandi disamarkan misal seperti ditampilkan dengan tanda bintang atau titik. Ini untuk mencegah orang lain membaca kata sandi di layar. Ini juga merupakan kontrol input teks satu baris yang dibuat menggunakan elemen <input> yang atribut tipenya memiliki nilai kata sandi.
Berikut adalah contoh input kata sandi satu baris yang digunakan untuk mengambil kata sandi pengguna:
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
Radio Buttons
Radio buttons digunakan agar user dapat memilih satu opsi dengan tepat dari serangkaian opsi yang sudah kita tentukan sebelumnya. Radio button dibuat menggunakan elemen <input> yang atribut type-nya memiliki nilai radio. Berikut contoh kodenya:
<form>
<input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
Catatan: Jika kalian ingin mengizinkan user untuk memilih lebih dari satu opsi secara bersamaan, maka kalian harus menggunakan kotak centang (checkboxes) sebagai gantinya.
Checkboxes
Kotak centang (checkboxes) memungkinkan user untuk memilih satu pilihan atau lebih dari satu pilihan yang telah kita tentukan sebelumnya. Checkboxes ini dibuat menggunakan elemen <input> yang atribut type-nya memiliki nilai checkboxes. Berikut contoh kodenya:
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
File Select Box
File select box memungkinkan user untuk mencari file yang dimiliki user pada local file (drive pc user) dan mengirimkannya sebagai lampiran ke form data server. Biasanya ditampilkan sebagai kotak teks dengan tombol yang memungkinkan pengguna untuk mencari file yang diinginkan. Namun, pengguna juga dapat mengetik direktori penyimpanan file yang dimaksud, atau nama filenya di kotak teks yang tersedia.
File select box juga dibuat menggunakan elemen <input>, yang tipe nilai atributnya di set ke file. Berikut contoh kodenya:
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
Textarea
Input textarea digunakan untuk mengisi data yang memiliki banyak baris seperti komentar, alamat, dan sebagainya. Pada TextArea kita bisa mengatur banyak baris dan kolom yang bisa kita isikan. Berikut contoh kodenya:
<html>
<body>
<form action="" method="post">
Alamat : <textarea name="alamat" rows="7" col="150"></textarea>
</form>
</body>
</html>
Hasil dari kode tersebut akan terlihat seperti berikut:
Select Boxes
Select boxes digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list. Select boxes dibuat menggunakan elemen <select> dan elemen <option>. Elemen option yang berada dalam elemen <select> menjelaskan item-item yang ada di dalam daftar. Berikut contoh kodenya:
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
Submit and Reset Buttons
Submit Button digunakan untuk mengirim data form ke server web. Sedangkan reset button digunakan untuk mengulangi/mengosongkan isian form yang tidak berguna/berfungsi apa pun sebelum saat kita mendefinisikan sebuah fungsi/kegunaan untuknya. Berikut contoh kodenya:
<form action="action.php" method="post" id="users">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Hasil dari kode tersebut akan terlihat seperti berikut:
