Membuat Form HTML Bagian 2 Elemen Form
Pada tutorial sebelumnya tentang pembuatan Form di HTML, sudah di bahas tentang membuat form dan menggunakan atribut form HTML. Baca : Membuat Form Pada Website dengan HTML #1
Untuk melanjutkan mengikuti tutorial ini saya sarankan untuk membaca tutorial sebelumnya.
Element Form HTML
Element Form HTML mendefinisikan jenis formulir yang digunakan untuk mengumpulkan input dari pengguna/pengunjung website. Element form HTML juga sering disebut dengan HTML Form Controls. Berikut ini beberapa jenis Element Form HTML:
Element Input <input>
Element <input> adalah elemen form yang paling banyak digunakan, element input dapat ditampilkan dalam beberapa cara, tergantung pada type atribut yang dimasukkan.
Format penulisan element <input> :
1 |
<input nama_atribut="nilai_atribut"> |
Beberapa tipe input yang dapat digunakan antara lain:
- <input type=”button”> – Untuk membuat tombol yang dapat di klik.
- <input type=”checkbox”> – Untuk membuat inputan berupa pilihah (checklist), pengunjung dapat memilih lebih dari satu.
- <input type=”color”> – untuk menampilkan pilihan warna.
- <input type=”date”> – untuk menampilkan inputan berupa pilihan tanggal.
- <input type=”datetime-local”> – untuk menampilkan inputan berupa pilihan tanggal dan jam.
- <input type=”email”> – digunakan untuk field input yang harus berisi alamat e-mail.
- <input type=”file”> – digunakan untuk menampilkan fitur pilih file dan tombol “Browse” untuk mengunggah file.
- <input type=”hidden”> – untuk menampilkan bidang inputan yang disembunyikan.
- <input type=”image”> – menampilkan gambar yang dapat di klik.
- <input type=”month”> – memungkinkan pengunjung web dapat memilih bulan dan tahun.
- <input type=”number”> – mendefinisikan numerik field input (inputan berupa angka)
- <input type=”password”> – menampilkan bidang inputan seperti text namun pada inputan karakter disembunyikan dengan simbol.
- <input type=”radio”> – menampilkan bidang inputan berupa pilihan, dan pengguna hanya diperbolehkan memilih 1 pilihan.
- <input type=”range”> – mendefinisikan kontrol untuk memasukkan nomor yang nilainya dapat dikontrol (seperti kontrol slider). Ranger default adalah 0 sampai 100. Namun, kalian dapat mengatur pembatasan nomor dengan atribut min, max dan step.
- <input type=”reset”> – digunakan untuk membuat tombol yang berfungsi untuk mengosongkan nilai yang telah diinputkan di form.
- <input type=”search”> – digunakan untuk menampilkan bidang input seperti text field.
- <input type=”submit”> – untuk membuat tombol yang berfungsi untuk memproses form.
- <input type=”tel”> – untuk menampilkan bidang input nomor telepon.
- <input type=”text”> – untuk menampilkan bidang inputan berupa teks 1 baris.
- <input type=”time”> – untuk menampilkan bidang inputan berupa jam (time).
- <input type=”url”> – untuk menampilkan bidang inputan berupa URL.
- <input type=”week”> – untuk menampilkan bidang inputan yang memungkinkan pengguna memilih minggu (week) pada bulan dan tahun.
Contoh Penggunaan Element Input <input>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat Form HTML Bagian 2 Bersama SolusiLain.Com</title> </head> <body> <h3>Form Pendaftaran dengan Element Input</h3> <form method="GET" action="proses_data.php" target=""> Nama Depan <input type="text" name="nama_depan"> <br> Nama Belakang <input type="text" name="nama_belakang"> <br> Password <input type="password" name="password"> <br> Email <input type="email" name="email"> <br> Tanggal Daftar <input type="date" name="tanggal_daftar"> <br> Tipe Member <input type="radio" name="tipe_member" value="Silver"> Silver <input type="radio" name="tipe_member" value="Gold"> Gold<br> <input type="submit" name="proses" value="Daftar"> </form> </body> </html> |

Hasil Latihan Penggunaan Elemen Input
Element Select <select>
Element <select> digunakan untuk mendefinisikan bidang inputan form dalam bentuk pilihan drop-down. Di dalam elemen <select> dapat berisi atribut seperti name, class dll. Untuk menampilkan pilihan di dalam drop-down select kita membutuhkan elemen <option>.
Contoh Penggunaan Element Select <select>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form method="GET" action="proses_data.php" target=""> Nama Depan <input type="text" name="nama_depan"> <br> Nama Belakang <input type="text" name="nama_belakang"> <br> Password <input type="password" name="password"> <br> Email <input type="email" name="email"> <br> Tanggal Daftar <input type="date" name="tanggal_daftar"> <br> Tipe Member <input type="radio" name="tipe_member" value="Silver"> Silver <input type="radio" name="tipe_member" value="Gold"> Gold<br> Kategori Produk <select name="kategori"> <option value="Pendidikan">Pendidikan</option> <option value="Kesehatan">Kesehatan</option> <option value="Pertanian">Pertanian</option> </select><br> <input type="submit" name="proses" value="Daftar"> </form> |
Hasilnya akan terlihat seperti ini.

Hasil Element Select Form HTML
Element Textarea <textarea>
Element Textarea <textarea> digunakan untuk mendefinisikan field input multi-line (textarea).
Contoh Penggunaan:
Kode | Hasil | ||
|
![]() |
Demikian tutorial cara Membuat Form HTML Bagian 2 Elemen Form, jika ada yang perlu ditanyakan dilahkan mengisi kolom komentar. Terus pantau postingan blog SolusiLain.Com atau berlangganan supaya mendapatkan update postingan atau tutorial baru dari SolusiLain.Com.