Membuat Form HTML: Input, Label, dan Elemen Form Lainnya
Formulir HTML adalah elemen penting yang memungkinkan pengguna untuk memasukkan data dan berinteraksi dengan situs web Anda, seperti mengisi survei, masuk ke akun, atau mengirimkan keluhan. Untuk membuat form yang fungsional dan mudah digunakan, Anda memerlukan beberapa elemen kunci.
1. Tag <form>: Wadah Utama Form
Elemen <form> adalah wadah (container) untuk semua kontrol input pengguna, seperti kotak teks, tombol radio, checkbox, dan tombol submit. Semua elemen form yang Anda buat harus berada di dalam tag <form>.
- Atribut Penting:
- action: Menentukan URL ke mana data formulir akan dikirim saat disubmit. Ini biasanya adalah script di sisi server (misalnya PHP, Python, Node.js) yang akan memproses data.
<form action="/submit-keluhan" method="post"> </form>- method: Menentukan metode HTTP yang digunakan untuk mengirim data formulir.
- GET: Data form ditambahkan ke URL (terlihat di bilah alamat browser). Cocok untuk pencarian atau data yang tidak sensitif.
- POST: Data form dikirim dalam "body" permintaan HTTP (tidak terlihat di URL). Cocok untuk data sensitif (kata sandi) atau data yang lebih besar.
<form action="/login" method="post"> </form>
2. Tag <input>: Elemen Input Paling Serbaguna
Tag <input> adalah salah satu elemen form yang paling penting dan serbaguna. Jenis input yang ditampilkan ditentukan oleh atribut type.
- Atribut Penting Umum:
- type: Mendefinisikan jenis kontrol input.
- name: Wajib! Menentukan nama untuk input yang akan digunakan untuk merujuk data saat form disubmit. Server akan menggunakan name ini untuk mengidentifikasi data yang dikirim.
- id: Digunakan untuk mengaitkan input dengan elemen <label> (lihat di bawah) dan juga untuk styling CSS atau manipulasi JavaScript. Harus unik di seluruh dokumen.
- value: Menentukan nilai awal dari input. Untuk tombol radio/checkbox, ini adalah nilai yang dikirim jika dipilih.
- placeholder: Memberikan petunjuk singkat tentang format data yang diharapkan di dalam bidang input. (Hanya untuk text, search, url, tel, email, password).
- required: Atribut boolean. Jika ada, bidang input harus diisi sebelum form dapat disubmit.
- disabled: Atribut boolean. Membuat input tidak dapat diinteraksi oleh pengguna.
- Contoh Jenis type yang Umum:
- text: Untuk input teks satu baris.
<input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap">- password: Untuk input teks yang disembunyikan (titik atau bintang).
<input type="password" id="password" name="password" required>- email: Untuk alamat email. Browser mungkin melakukan validasi dasar format email.
<input type="email" id="email" name="email">- number: Untuk input angka.
<input type="number" id="usia" name="usia" min="1" max="100">- radio: Untuk memilih satu opsi dari beberapa. Setiap opsi dalam grup harus memiliki name yang sama.
<input type="radio" id="pria" name="jenis_kelamin" value="pria"> <input type="radio" id="wanita" name="jenis_kelamin" value="wanita">- checkbox: Untuk memilih nol atau lebih opsi.
<input type="checkbox" id="setuju" name="persetujuan" value="ya">- submit: Membuat tombol untuk mengirimkan form.
<input type="submit" value="Kirim Data">- file: Untuk mengunggah file.
<input type="file" id="dokumen" name="dokumen_lampiran">- date: Untuk memilih tanggal.
<input type="date" id="tanggal_lahir" name="tanggal_lahir">
3. Tag <label>: Penting untuk Aksesibilitas dan Penggunaan
Tag <label> digunakan untuk mendefinisikan label (teks deskriptif) untuk elemen input.
- Atribut Penting:
- for: Mengaitkan label dengan elemen input tertentu. Nilai for harus sama dengan nilai id dari elemen input yang terkait.
- Mengapa Penting:
- Aksesibilitas: Pembaca layar (screen readers) dapat membacakan label ketika pengguna fokus pada input terkait, sangat membantu bagi pengguna tunanetra.
- Kemudahan Penggunaan: Mengklik label juga akan mengaktifkan (memberikan fokus) elemen input terkait, membuat area klik lebih besar dan memudahkan pengguna, terutama di perangkat sentuh.
<label for="nama">Nama Lengkap:</label> <input type="text" id="nama" name="nama"> <input type="radio" id="ya" name="konfirmasi" value="yes"> <label for="ya">Ya</label>
4. Elemen Form Penting Lainnya
Selain <input> dan <label>, ada beberapa elemen form lain yang sering digunakan:
- <textarea>: Untuk input teks multi-baris (misalnya, untuk pesan atau deskripsi panjang).
- rows: Menentukan jumlah baris yang terlihat.
- cols: Menentukan jumlah kolom (lebar) yang terlihat.
<label for="pesan">Pesan Anda:</label><br> <textarea id="pesan" name="pesan" rows="5" cols="40" placeholder="Tuliskan pesan Anda di sini..."></textarea>- <select> dan <option>: Untuk membuat daftar pilihan yang bisa dipilih (dropdown).
- <select>: Elemen wadah untuk pilihan.
- name: Nama untuk data yang akan dikirim.
- <option>: Setiap item dalam daftar.
- value: Nilai yang akan dikirim jika opsi ini dipilih.
- selected: Atribut boolean, membuat opsi ini terpilih secara default.
- <select>: Elemen wadah untuk pilihan.
<label for="prodi">Pilih Program Studi:</label> <select id="prodi" name="program_studi"> <option value="">-- Pilih --</option> <option value="ti">Teknik Informatika</option> <option value="si" selected>Sistem Informasi</option> <option value="dkv">Desain Komunikasi Visual</option> </select>- <button>: Untuk membuat tombol. Lebih fleksibel dari <input type="submit"> karena bisa berisi HTML lain (seperti gambar atau ikon).
- type: submit (mengirim form), reset (mengatur ulang form), button (tombol generik tanpa aksi default).
<button type="submit">Kirim Keluhan</button> <button type="reset">Bersihkan Form</button>- <fieldset> dan <legend>: Untuk mengelompokkan elemen form yang terkait secara logis.
- <fieldset>: Mengelompokkan kontrol form. Menarik garis tepi di sekitarnya secara default.
- <legend>: Memberikan judul atau caption untuk <fieldset>.
<fieldset> <legend>Informasi Kontak</legend> <label for="telp">Telepon:</label> <input type="tel" id="telp" name="telepon"> <br> <label for="alamat">Alamat:</label> <input type="text" id="alamat" name="alamat"> </fieldset>
Contoh Lengkap Form Keluhan Mahasiswa Sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Keluhan Mahasiswa</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
form { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 500px; margin: auto; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button[type="submit"]:hover {
background-color: #45a049;
}
fieldset {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
legend {
font-weight: bold;
padding: 0 10px;
color: #333;
}
</style>
</head>
<body>
<form action="/submit-keluhan" method="post">
<h1>Formulir Pengajuan Keluhan</h1>
<p>Mohon isi formulir di bawah ini untuk mengajukan keluhan Anda.</p>
<fieldset>
<legend>Informasi Pelapor</legend>
<label for="nama_lengkap">Nama Lengkap:</label>
<input type="text" id="nama_lengkap" name="nama_lengkap" placeholder="Masukkan nama Anda" required>
<label for="nim">NIM:</label>
<input type="text" id="nim" name="nim" placeholder="Cth: 2023001" pattern="[0-9]{7,}" title="NIM harus berupa angka, minimal 7 digit" required>
<label for="email_mahasiswa">Email:</label>
<input type="email" id="email_mahasiswa" name="email_mahasiswa" placeholder="email@contoh.com" required>
<label for="prodi">Program Studi:</label>
<select id="prodi" name="program_studi" required>
<option value="">-- Pilih Program Studi --</option>
<option value="ti">Teknik Informatika</option>
<option value="si">Sistem Informasi</option>
<option value="dkv">Desain Komunikasi Visual</option>
<option value="ak">Akuntansi</option>
<option value="mn">Manajemen</option>
</select>
</fieldset>
<fieldset>
<legend>Detail Keluhan</legend>
<label for="kategori_keluhan">Kategori Keluhan:</label><br>
<input type="radio" id="akademik" name="kategori_keluhan" value="akademik" required>
<label for="akademik">Akademik</label><br>
<input type="radio" id="fasilitas" name="kategori_keluhan" value="fasilitas">
<label for="fasilitas">Fasilitas</label><br>
<input type="radio" id="layanan" name="kategori_keluhan" value="layanan">
<label for="layanan">Layanan Kemahasiswaan</label><br>
<input type="radio" id="lainnya" name="kategori_keluhan" value="lainnya">
<label for="lainnya">Lainnya</label><br><br>
<label for="subjek_keluhan">Subjek Keluhan:</label>
<input type="text" id="subjek_keluhan" name="subjek_keluhan" placeholder="Cth: Kerusakan Proyektor Ruang A101" required>
<label for="deskripsi_keluhan">Deskripsi Keluhan:</label>
<textarea id="deskripsi_keluhan" name="deskripsi_keluhan" rows="6" placeholder="Jelaskan keluhan Anda secara rinci di sini..." required></textarea>
<label for="lampiran">Unggah Lampiran (jika ada):</label>
<input type="file" id="lampiran" name="file_lampiran" accept="image/*, .pdf">
</fieldset>
<button type="submit">Kirim Keluhan</button>
</form>
</body>
</html>Formulir HTML adalah elemen yang sangat kuat dan fleksibel. Dengan memahami penggunaan tag <form>, <input>, <label>, serta elemen lainnya, Anda dapat membuat antarmuka yang memungkinkan pengguna untuk berinteraksi dan mengirimkan data dengan mudah.
