Formulir HTML

Dalam tutorial ini akan belajar cara membuat formulir dalam HTML untuk mengumpulkan input pengguna.

Apa itu Formulir HTML?

Formulir HTML diperlukan untuk mengumpulkan berbagai jenis input pengguna, seperti detail kontak seperti nama, alamat email, nomor telepon, atau detail seperti informasi kartu kredit, dll.

Formulir berisi elemen khusus yang disebut controls (kontrol) seperti inputbox (kotak input), checkbox (kotak centang), radio-buttons (tombol radio), submit buttons (tombol kirim), dll. Pengguna biasanya melengkapi formulir dengan memodifikasi kontrolnya, mis. memasukkan teks, memilih item, dll. dan mengirimkan formulir ini ke server web untuk diproses lebih lanjut.

Tag <form> digunakan untuk membuat form HTML. Berikut adalah contoh sederhana dari formulir login:

<form>
  <label>Username: <input type="text" /></label>
  <label>Password: <input type="password" /></label>
  <input type="submit" value="Submit" />
</form>

Bagian berikut menjelaskan berbagai tipe kontrol yang bisa kalian gunakan di formulir.

Elemen Input

Ini adalah elemen yang paling umum digunakan dalam formulir HTML.

Ini memungkinkan kalian untuk menentukan berbagai jenis bidang input pengguna, tergantung pada atribut type. Elemen input dapat berupa bidang teks jenis, bidang kata sandi, kotak centang, tombol radio, tombol kirim, tombol reset, kotak pilih file, serta beberapa jenis input baru yang diperkenalkan di HTML5.

Jenis input yang paling sering digunakan dijelaskan di bawah ini.

Bidang Teks

Bidang teks adalah area satu baris yang memungkinkan pengguna untuk memasukkan teks.

Kontrol input teks satu baris dibuat menggunakan elemen <input>, yang atribut tipe nya memiliki nilai text. Berikut adalah contoh input teks satu baris yang digunakan untuk mengambil nama pengguna:

<form>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" />
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Username :

CATATAN

Tag <label> digunakan untuk mendefinisikan label untuk elemen <input>. Jika kalian ingin pengguna memasukkan beberapa baris, kalian harus menggunakan <textarea> sebagai gantinya.

Bidang Kata Sandi

Bidang kata sandi mirip dengan bidang teks. Satu-satunya perbedaan adalah; karakter dalam bidang kata sandi disembunyikan, yaitu ditampilkan sebagai 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 type nya memiliki nilai password.

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>

— Output dari contoh di atas akan terlihat seperti ini:

Password :

Tombol radio

Tombol radio digunakan untuk memungkinkan pengguna memilih tepat satu opsi dari serangkaian opsi yang telah ditentukan sebelumnya. Itu dibuat menggunakan elemen <input> yang atribut type nya memiliki nilai radio.

Berikut adalah contoh tombol radio yang dapat digunakan untuk mengumpulkan informasi gender pengguna:

<form>
  <input type="radio" name="gender" id="pria" />
  <label for="pria">Pria</label>
  <input type="radio" name="gender" id="wanita" />
  <label for="wanita">Wanita</label>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

PriaWanita

Kotak Centang

Kotak centang memungkinkan pengguna untuk memilih satu atau lebih opsi dari serangkaian opsi yang telah ditentukan sebelumnya. Itu dibuat menggunakan elemen <input> yang atribut type nya memiliki nilai checkbox.

Berikut adalah contoh kotak centang yang dapat digunakan untuk mengumpulkan informasi tentang hobi pengguna:

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

— Output dari contoh di atas akan terlihat seperti ini:

SoccerCricketBaseball

CATATAN

Jika ingin membuat tombol radio atau kotak centang dipilih secara default, kalian dapat menambahkan atribut yang dicentang ke elemen input, seperti <input type="checkbox" checked>.

Kotak Pilih File

Bidang file memungkinkan pengguna untuk menelusuri file lokal dan mengirimkannya sebagai lampiran dengan data formulir. Browser web seperti Google Chrome dan Firefox membuat bidang input pemilihan file dengan tombol Browse yang memungkinkan pengguna untuk menavigasi hard drive lokal dan memilih file.

Ini juga dibuat menggunakan elemen <input>, yang nilai atribut type nya disetel ke file.

<form>
  <label for="file-select">Unggah:</label>
  <input type="file" name="upload" id="file-select" />
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Upload :

TIP

Ada beberapa jenis input lainnya. Silakan lihat bab tentang tipe input baru HTML5 untuk mempelajari lebih lanjut tentang tipe input yang baru diperkenalkan.

Area Teks

Area Teks adalah kontrol input teks beberapa baris yang memungkinkan pengguna untuk memasukkan lebih dari satu baris teks. Kontrol input teks multi-baris dibuat menggunakan elemen <textarea>.

<form>
  <label for="address">Alamat:</label>
  <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Alamat :

Pilih Kotak

Kotak pilih adalah daftar dropdown opsi yang memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar opsi pull-down. Kotak pilih dibuat menggunakan elemen <select> dan elemen <option>.

Elemen <option> dalam elemen <select> mendefinisikan setiap item daftar.

<form>
  <label for="kota">Kota:</label>
  <select name="kota" id="kota">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya">Surabaya</option>
  </select>
</form>

— Output dari contoh di atas akan terlihat seperti ini:

Kota : JakartaBandungSurabaya

Kirim dan Atur Ulang Tombol

Tombol kirim digunakan untuk mengirim data formulir ke server web. Ketika tombol kirim diklik, data formulir dikirim ke file yang ditentukan dalam atribut action formulir untuk memproses data yang dikirimkan.

Tombol reset mengatur ulang semua kontrol formulir ke nilai default. Cobalah contoh berikut dengan mengetikkan nama Kalian di bidang teks, dan klik tombol kirim untuk melihatnya beraksi.

<form action="action.php" method="post">
  <label for="nama-depan">Nama Depan:</label>
  <input type="text" name="nama-depan" id="nama-depan" />
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
</form>

Nama Depan :

Ketik nama kalian di bidang teks di atas, dan klik tombol kirim untuk melihatnya beraksi.

TIP

Anda juga dapat membuat tombol menggunakan elemen <button>. Tombol yang dibuat dengan fungsi elemen <button> sama seperti tombol yang dibuat dengan elemen input, tetapi mereka menawarkan kemungkinan rendering yang lebih kaya dengan memungkinkan penyematan elemen HTML lainnya.

Kontrol Formulir Pengelompokan

Kalian juga mengelompokkan kontrol dan label yang terkait secara logis dalam formulir web menggunakan elemen <legend>. Mengelompokkan kontrol formulir ke dalam kategori memudahkan pengguna untuk menemukan kontrol yang membuat formulir lebih ramah pengguna. Mari kita coba contoh berikut untuk melihat cara kerjanya:

<form>
  <fieldset>
    <legend>Detil Kontak</legend>
    <label>Alamat Email: <input type="email" name="email" /></label>
    <label>Nomor Telepon: <input type="text" name="phone" /></label>
  </fieldset>
</form>

Atribut Formulir yang Sering Digunakan

Tabel berikut mencantumkan atribut elemen formulir yang paling sering digunakan:

Atribut	Deskripsi
name	Menentukan nama form.
action	Menentukan URL program atau skrip di server web yang akan digunakan untuk memproses informasi yang dikirimkan melalui formulir.
method	Menentukan metode HTTP yang digunakan untuk mengirim data ke server web oleh browser. Nilainya bisa berupa get (default) dan post.
target	Menentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir. Nilai yang mungkin adalah _blank, _self, _parent dan _top.
enctype	Menentukan bagaimana data formulir harus dikodekan saat mengirimkan formulir ke server. Hanya berlaku jika nilai atribut method adalah post.

Ada beberapa atribut lainnya, untuk mengetahuinya silahkan lihat referensi tag <form>.

CATATAN

Atribut nama mewakili nama formulir dalam kumpulan formulir. Nilainya harus unik di antara formulir dalam dokumen, dan tidak boleh berupa string kosong.

TIP

Semua data yang dikirim melalui metode get terlihat di bilah alamat browser. Namun, data yang dikirim melalui pos tidak terlihat oleh pengguna. Silakan lihat tutorial tentang GET vs. POST untuk mempelajari perbedaan antara kedua metode HTTP ini secara mendetail.