Form HTML adalah bagian penting dalam pembuatan website. Form digunakan untuk mengambil data dari pengguna, seperti nama, email, password, alamat, pilihan jurusan, jenis kelamin, komentar, dan file.
Jika kamu ingin membuat website dinamis, kamu harus memahami form HTML terlebih dahulu. Form menjadi dasar sebelum belajar proses data menggunakan PHP, MySQL, CodeIgniter, Laravel, atau Ajax.
Pada tutorial ini, kita akan belajar membuat form HTML lengkap dari dasar. Materi yang dibahas meliputi tag form, input, label, select, textarea, radio, checkbox, button, method GET, method POST, validasi sederhana, dan contoh form biodata.
Apa itu Form HTML?
Form HTML adalah elemen yang digunakan untuk membuat area input pada halaman website. Pengguna bisa mengisi data melalui form, lalu data tersebut dikirim ke file pemroses.
Dalam HTML, form dibuat menggunakan tag <form>. Di dalam tag form, kita bisa menambahkan elemen seperti <input>, <select>, <textarea>, dan <button>.
Contoh struktur dasar form HTML:
<form action="proses.php" method="post"> <label>Nama Lengkap</label> <input type="text" name="nama"> <button type="submit">Kirim</button> </form>
Pada contoh di atas, form akan mengirim data ke file proses.php menggunakan method post.
Fungsi Atribut pada Tag Form HTML
Tag form memiliki beberapa atribut penting. Atribut ini menentukan cara data dikirim dan ke mana data akan diproses.
| Atribut | Fungsi |
|---|---|
| action | Menentukan file tujuan untuk memproses data form. |
| method | Menentukan metode pengiriman data, biasanya GET atau POST. |
| name | Memberi nama pada form atau input agar data mudah diproses. |
| id | Memberi identitas unik pada elemen HTML. |
Contoh penggunaan atribut form:
<form action="simpan.php" method="post" name="form_biodata" id="form_biodata"> <label>Nama</label> <input type="text" name="nama"> <button type="submit">Simpan</button> </form>
Jenis Input pada Form HTML
HTML menyediakan banyak jenis input. Setiap input memiliki fungsi yang berbeda. Pemilihan input yang tepat membuat form lebih rapi dan mudah digunakan.
| Type Input | Fungsi |
|---|---|
| text | Untuk memasukkan teks biasa. |
| Untuk memasukkan alamat email. | |
| password | Untuk memasukkan password. |
| number | Untuk memasukkan angka. |
| date | Untuk memilih tanggal. |
| file | Untuk mengunggah file. |
| radio | Untuk memilih satu pilihan. |
| checkbox | Untuk memilih lebih dari satu pilihan. |
| submit | Untuk mengirim form. |
| reset | Untuk menghapus isi form. |
Contoh Input Text pada HTML
Input text digunakan untuk menerima teks biasa. Contohnya nama lengkap, tempat lahir, alamat singkat, atau nama pengguna.
<label>Nama Lengkap</label> <input type="text" name="nama">
Atribut name sangat penting. Tanpa atribut name, data input akan sulit diproses dengan PHP atau bahasa pemrograman lainnya.
Contoh Input Email pada HTML
Input email digunakan untuk menerima alamat email. Browser akan membantu memeriksa format email sebelum form dikirim.
<label>Email</label> <input type="email" name="email">
Input email cocok digunakan pada form registrasi, login, kontak, dan formulir pendaftaran.
Contoh Input Password pada HTML
Input password digunakan untuk menyembunyikan karakter yang diketik oleh pengguna. Biasanya digunakan pada form login dan registrasi.
<label>Password</label> <input type="password" name="password">
Meskipun input password menyembunyikan teks di layar, proses keamanan password tetap harus dilakukan di sisi server.
Contoh Input Number pada HTML
Input number digunakan untuk menerima data angka. Contohnya umur, jumlah barang, harga, stok, atau nilai.
<label>Umur</label> <input type="number" name="umur">
Kita juga bisa menambahkan atribut min dan max untuk membatasi angka.
<label>Umur</label> <input type="number" name="umur" min="1" max="100">
Contoh Input Date pada HTML
Input date digunakan untuk memilih tanggal. Input ini sering digunakan pada form biodata, form pemesanan, dan form laporan.
<label>Tanggal Lahir</label> <input type="date" name="tanggal_lahir">
Contoh Input Radio pada HTML
Input radio digunakan ketika pengguna hanya boleh memilih satu pilihan. Contohnya jenis kelamin, status, atau pilihan pembayaran.
<label>Jenis Kelamin</label><br> <input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki <input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
Perhatikan atribut name. Semua radio yang berada dalam satu kelompok harus memakai nama yang sama.
Contoh Input Checkbox pada HTML
Input checkbox digunakan ketika pengguna boleh memilih lebih dari satu pilihan. Contohnya hobi, minat, skill, atau fasilitas tambahan.
<label>Hobi</label><br> <input type="checkbox" name="hobi[]" value="Membaca"> Membaca <input type="checkbox" name="hobi[]" value="Coding"> Coding <input type="checkbox" name="hobi[]" value="Olahraga"> Olahraga
Pada contoh di atas, nama input menggunakan tanda kurung siku []. Bentuk ini umum digunakan agar data checkbox bisa dikirim sebagai array.
Contoh Select Option pada HTML
Select digunakan untuk membuat pilihan dalam bentuk dropdown. Elemen ini cocok untuk memilih jurusan, kota, kategori, status, atau level pengguna.
<label>Jurusan</label> <select name="jurusan"> <option value="RPL">RPL</option> <option value="TKJ">TKJ</option> <option value="Multimedia">Multimedia</option> </select>
Nilai pada atribut value akan dikirim saat form diproses.
Contoh Textarea pada HTML
Textarea digunakan untuk menulis teks panjang. Contohnya alamat, pesan, komentar, keterangan, atau deskripsi.
<label>Alamat</label> <textarea name="alamat" rows="5" cols="30"></textarea>
Atribut rows digunakan untuk mengatur tinggi textarea. Atribut cols digunakan untuk mengatur lebar textarea.
Contoh Button pada Form HTML
Button digunakan untuk membuat tombol pada form. Tombol paling umum adalah tombol submit dan reset.
<button type="submit">Kirim</button> <button type="reset">Reset</button>
Tombol submit digunakan untuk mengirim data form. Tombol reset digunakan untuk mengosongkan kembali isi form.
Perbedaan Method GET dan POST pada Form HTML
Method pada form menentukan cara data dikirim. Method yang sering digunakan adalah GET dan POST.
| Method | Cara Kerja | Cocok Digunakan Untuk |
|---|---|---|
| GET | Data dikirim melalui URL. | Form pencarian dan filter data. |
| POST | Data dikirim melalui request body. | Form login, registrasi, simpan data, dan upload file. |
Contoh form dengan method GET:
<form action="cari.php" method="get"> <label>Kata Kunci</label> <input type="text" name="keyword"> <button type="submit">Cari</button> </form>
Contoh form dengan method POST:
<form action="simpan.php" method="post"> <label>Nama</label> <input type="text" name="nama"> <button type="submit">Simpan</button> </form>
Contoh Form Biodata HTML Lengkap
Sekarang kita buat contoh form biodata lengkap. Form ini berisi nama, email, password, tanggal lahir, jenis kelamin, hobi, jurusan, alamat, dan tombol kirim.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Biodata HTML</title>
</head>
<body>
<h2>Form Biodata Siswa</h2>
<form action="proses.php" method="post">
<label>Nama Lengkap</label><br>
<input type="text" name="nama" placeholder="Masukkan nama lengkap">
<br><br>
<label>Email</label><br>
<input type="email" name="email" placeholder="Masukkan email">
<br><br>
<label>Password</label><br>
<input type="password" name="password" placeholder="Masukkan password">
<br><br>
<label>Tanggal Lahir</label><br>
<input type="date" name="tanggal_lahir">
<br><br>
<label>Jenis Kelamin</label><br>
<input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
<br><br>
<label>Hobi</label><br>
<input type="checkbox" name="hobi[]" value="Membaca"> Membaca
<input type="checkbox" name="hobi[]" value="Coding"> Coding
<input type="checkbox" name="hobi[]" value="Olahraga"> Olahraga
<br><br>
<label>Jurusan</label><br>
<select name="jurusan">
<option value="">Pilih Jurusan</option>
<option value="RPL">RPL</option>
<option value="TKJ">TKJ</option>
<option value="Multimedia">Multimedia</option>
</select>
<br><br>
<label>Alamat</label><br>
<textarea name="alamat" rows="5" cols="30" placeholder="Masukkan alamat lengkap"></textarea>
<br><br>
<button type="submit">Kirim</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Menambahkan Validasi Sederhana pada Form HTML
HTML memiliki atribut validasi sederhana. Atribut ini membantu pengguna mengisi form dengan benar sebelum data dikirim.
Beberapa atribut validasi yang sering digunakan:
| Atribut | Fungsi |
|---|---|
| required | Mewajibkan input diisi. |
| minlength | Menentukan jumlah karakter minimal. |
| maxlength | Menentukan jumlah karakter maksimal. |
| placeholder | Menampilkan petunjuk di dalam input. |
| readonly | Membuat input hanya bisa dibaca. |
| disabled | Menonaktifkan input. |
Contoh validasi sederhana:
<form action="proses.php" method="post"> <label>Nama Lengkap</label> <input type="text" name="nama" required minlength="3" maxlength="50"> <br><br> <label>Email</label> <input type="email" name="email" required> <br><br> <button type="submit">Kirim</button> </form>
Pada contoh di atas, input nama dan email wajib diisi. Nama minimal harus berisi 3 karakter dan maksimal 50 karakter.
Contoh Form HTML dengan Tabel
Kita juga bisa membuat tampilan form lebih rapi menggunakan tabel. Cara ini sering digunakan oleh pemula karena mudah dipahami.
<form action="proses.php" method="post">
<table>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button type="submit">Simpan</button></td>
</tr>
</table>
</form>
Untuk project modern, tampilan form biasanya lebih baik diatur dengan CSS. Namun, contoh tabel tetap berguna untuk memahami susunan form dasar.
Kesalahan Umum Saat Membuat Form HTML
Pemula sering mengalami error saat membuat form. Berikut beberapa kesalahan yang perlu dihindari.
1. Lupa Menambahkan Atribut Name
Atribut name wajib digunakan pada input yang datanya ingin dikirim.
<input type="text" name="nama">
2. Salah Menggunakan Method
Gunakan method GET untuk pencarian. Gunakan method POST untuk login, registrasi, simpan data, dan data yang tidak perlu tampil di URL.
3. Tidak Menggunakan Label
Label membuat form lebih mudah dibaca. Label juga membantu pengguna memahami data apa yang harus diisi.
<label>Nama Lengkap</label> <input type="text" name="nama">
4. Tidak Memberi Validasi
Gunakan atribut required, minlength, dan maxlength untuk membantu validasi dasar.
5. Tidak Menentukan File Tujuan
Atribut action digunakan untuk menentukan file tujuan. Jika data akan diproses dengan PHP, arahkan form ke file PHP.
<form action="proses.php" method="post"> <input type="text" name="nama"> <button type="submit">Kirim</button> </form>
Tips Membuat Form HTML yang Baik
Agar form mudah digunakan, buat susunan form yang jelas dan sederhana. Jangan meminta data yang tidak diperlukan.
- Gunakan label pada setiap input.
- Gunakan type input yang sesuai.
- Tambahkan placeholder jika diperlukan.
- Gunakan validasi sederhana dengan atribut required.
- Gunakan method POST untuk data penting.
- Pastikan atribut name tidak kosong.
- Buat tombol submit yang jelas.
Kesimpulan
Form HTML digunakan untuk mengambil data dari pengguna. Form dibuat menggunakan tag <form> dan dapat berisi input text, email, password, number, date, radio, checkbox, select, textarea, dan button.
Jika kamu sudah memahami form HTML, langkah berikutnya adalah memproses data form menggunakan PHP. Dari sini, kamu bisa belajar membuat form simpan data, form login, form registrasi, upload file, sampai CRUD dengan PHP dan MySQL.
Dengan memahami form HTML dari dasar, kamu akan lebih mudah membuat website dinamis dan aplikasi berbasis web.
0 Komentar
Berkomentarlah dengan baik dan sopan