KAL
Menu

Form HTML

Penanganan pengiriman form dan dasar validasi masukan.

Daftar isi

Form HTML adalah sarana pengguna mengirim data ke server melalui elemen masukan seperti kotak teks dan tombol kirim. Topik ini membahas struktur form yang benar, penanganan pengirimannya di PHP dengan superglobal $_POST, serta validasi dasar menggunakan trim, empty, dan filter_var. Seluruh contoh membentuk satu berkas yang menampilkan formulir pendaftaran anggota perpustakaan sekaligus memproses datanya, sehingga alur lengkap dari masukan sampai validasi dapat dijalankan di satu tempat.

Struktur form HTML#

Elemen <form> membungkus seluruh masukan dan menentukan dua hal, yaitu atribut method yang menyatakan metode HTTP dan atribut action yang menyatakan berkas tujuan pengiriman. Setiap elemen masukan wajib memiliki atribut name, karena nilai itulah yang menjadi kunci array $_POST di sisi server. Atribut required menuntut pengisian sebelum browser mengirim, dan type="email" membuat browser memeriksa bentuk alamat surat elektronik. Nilai yang dikirim dengan metode POST berada di body permintaan dan menjadi isi $_POST, sedangkan metode GET menempelkannya pada URL.

html Kerangka form pendaftaran anggota perpustakaan 
<form method="post" action="form.php">
<p>
<label>Nama lengkap<br>
<input type="text" name="nama" required>
</label>
</p>
<p>
<label>Email<br>
<input type="email" name="email" required>
</label>
</p>
<p><button type="submit">Daftar</button></p>
</form>

Elemen <label> menghubungkan teks keterangan dengan masukannya, sehingga pembaca layar menyebutkan keterangan yang tepat saat masukan difokuskan. Demo berikut memperlihatkan perilaku atribut required dan type="email" langsung di browser. Tekan tombol Daftar tanpa mengisi apa pun, lalu isi email dalam bentuk yang tidak lazim, dan amati pesan yang muncul sebelum data dikirim.

Validasi bawaan browser seperti di atas hanyalah kenyamanan bagi pengunjung yang sah. Permintaan dapat dikirim ke server tanpa melalui browser sama sekali, misalnya dengan curl, sehingga server wajib memeriksa ulang setiap nilai yang diterimanya.

Menangani pengiriman di PHP#

Pola penanganan yang umum adalah satu berkas yang menampilkan formulir sekaligus memprosesnya. Berkas memeriksa $_SERVER['REQUEST_METHOD'] untuk membedakan dua keadaan, yaitu permintaan GET yang menampilkan formulir kosong dan permintaan POST yang memproses data. Setelah pemrosesan selesai dan valid, skrip menampilkan pesan sukses, sedangkan bila terdapat kekeliruan, formulir yang sama ditampilkan kembali beserta nilai lama dan pesan errornya.

php form.php 
<?php
$errors = [];
$nama = $email = '';

if (($_SERVER['REQUEST_METHOD'] ?? 'GET') === 'POST') {
    $nama = trim($_POST['nama'] ?? '');
    $email = trim($_POST['email'] ?? '');

    if ($nama === '') {
        $errors['nama'] = 'Nama wajib diisi.';
    }
    if ($email === '') {
        $errors['email'] = 'Email wajib diisi.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Format email tidak valid.';
    }

    if ($errors === []) {
        echo '<p>Pendaftaran anggota atas nama <strong>' . htmlspecialchars($nama) . '</strong> berhasil disimpan.</p>';
        exit;
    }
}
?>
<form method="post" action="form.php">
<p>
<label>Nama lengkap<br>
<input type="text" name="nama" value="<?= htmlspecialchars($nama) ?>">
</label>
<?php if (isset($errors['nama'])): ?><em><?= $errors['nama'] ?></em><?php endif; ?>
</p>
<p>
<label>Email<br>
<input type="email" name="email" value="<?= htmlspecialchars($email) ?>">
</label>
<?php if (isset($errors['email'])): ?><em><?= $errors['email'] ?></em><?php endif; ?>
</p>
<p><button type="submit">Daftar</button></p>
</form>
text Keluaran 
<form method="post" action="form.php">
<p>
<label>Nama lengkap<br>
<input type="text" name="nama" value="">
</label>
</p>
<p>
<label>Email<br>
<input type="email" name="email" value="">
</label>
</p>
<p><button type="submit">Daftar</button></p>
</form>

Keluaran di atas dihasilkan ketika berkas dijalankan lewat CLI, yaitu tanpa permintaan HTTP sama sekali. Nilai $_SERVER['REQUEST_METHOD'] tidak terisi, ekspresi ?? 'GET' menetapkannya sebagai GET, dan seluruh blok pemrosesan dilewati sehingga yang tersisa adalah formulir kosong. Perilaku yang sama terjadi saat pengunjung membuka halaman melalui browser.

Jalur POST diuji dengan server bawaan PHP beserta curl. Perintah berikut menjalankan server pada port 8050, mengirim data dengan email yang tidak valid, lalu menghentikan servernya.

bash 
# jalankan server bawaan PHP pada port 8050 di latar belakang
php -S localhost:8050 >/dev/null 2>&1 &
sleep 1
# kirim data dengan email tidak valid
curl -s -X POST -d "nama=Budi&email=budi-tidak-valid" http://localhost:8050/form.php
# hentikan server
kill %1
text Keluaran 
<form method="post" action="form.php">
<p>
<label>Nama lengkap<br>
<input type="text" name="nama" value="Budi">
</label>
</p>
<p>
<label>Email<br>
<input type="email" name="email" value="budi-tidak-valid">
</label>
<em>Format email tidak valid.</em></p>
<p><button type="submit">Daftar</button></p>
</form>

Formulir tampil kembali dengan dua hal penting. Nilai nama yang sudah dikirim tetap terisi pada atribut value, sedangkan pesan error muncul tepat di bawah masukan email yang bermasalah. Pengunjung dapat memperbaiki datanya tanpa menulis ulang dari awal, dan tidak ada data yang tersimpan karena validasi belum lolos.

Pengiriman dengan data lengkap menghasilkan jalur sukses, yaitu pesan konfirmasi tanpa formulir.

bash 
# jalankan ulang server bawaan PHP pada port 8050
php -S localhost:8050 >/dev/null 2>&1 &
sleep 1
# kirim data lengkap yang valid
curl -s -X POST -d "nama=Budi Santoso&[email protected]" http://localhost:8050/form.php
# hentikan server
kill %1
text Keluaran 
<p>Pendaftaran anggota atas nama <strong>Budi Santoso</strong> berhasil disimpan.</p>

Kedua nilai lolos dari seluruh pemeriksaan, sehingga variabel $errors tetap kosong dan pesan konfirmasi tercetak sebelum skrip berhenti melalui exit. Nama yang dikirim melalui body permintaan muncul kembali dalam pesan, dan pemanggilan htmlspecialchars saat pencetakan menjaga karakter khusus HTML tetap aman.

Memvalidasi masukan dengan trim, empty, dan filter_var#

Tiga fungsi bawaan mencakup kebutuhan validasi dasar. Fungsi trim memotong karakter spasi pada awal dan akhir string, sehingga masukan yang hanya berisi spasi tidak lagi terbaca sebagai data. Fungsi empty mengembalikan true untuk nilai kosong, dan fungsi filter_var dengan konstanta FILTER_VALIDATE_EMAIL mengembalikan alamat surat elektronik apabila bentuknya sah atau false apabila tidak.

php 
<?php

$_POST['nama'] = '  Budi Santoso  ';
$_POST['email'] = '[email protected]';

$nama = trim($_POST['nama']);
$email = trim($_POST['email']);

echo '[' . $nama . ']' . PHP_EOL;
var_dump($nama === '');
var_dump(empty($_POST['umur']));
var_dump(filter_var($email, FILTER_VALIDATE_EMAIL));
var_dump(filter_var('budi-tidak-valid', FILTER_VALIDATE_EMAIL));
text Keluaran 
[Budi Santoso]
bool(false)
bool(true)
string(19) "[email protected]"
bool(false)

Tanda kurung siku pada baris pertama memperlihatkan spasi hasil trim yang sudah hilang di kedua ujung. Baris ketiga bernilai true karena kunci umur tidak pernah ada, dan nilai yang tidak ada memang dianggap kosong oleh empty. Dua baris terakhir menunjukkan filter_var yang mengembalikan alamat itu sendiri ketika sah dan false ketika bentuknya tidak memenuhi syarat.

Kesalahan umum#

Empat kesalahan berikut paling sering muncul saat menangani form.

  • Elemen input tidak diberi atribut name, sehingga nilainya tidak pernah sampai ke $_POST dan data terlihat hilang tanpa pesan error. Perbaikannya adalah memastikan setiap masukan memiliki name yang unik dalam satu form.
  • Validasi hanya mengandalkan atribut required di browser. Permintaan yang dikirim langsung ke server melewati seluruh pemeriksaan browser, sehingga data yang tidak sah tetap sampai ke PHP. Perbaikannya adalah mengulang seluruh pemeriksaan di sisi server sebelum data dipakai.
  • Nilai masukan dicetak ke dalam HTML tanpa htmlspecialchars. Nilai yang memuat tanda < atau > dapat merusak struktur halaman atau menyisipkan skrip ke dalamnya. Perbaikannya adalah membungkus setiap nilai yang dicetak dengan htmlspecialchars.
  • Nilai lama tidak dikembalikan ke atribut value ketika validasi gagal. Formulir tampil kosong kembali, dan pengunjung harus mengisi ulang seluruh kolom untuk memperbaiki satu kesalahan. Perbaikannya adalah mencetak kembali nilai lama yang telah diloloskan dengan htmlspecialchars, sebagaimana dilakukan pada form.php.

Ringkasan#

  • Atribut method dan action pada <form> menentukan cara serta tujuan pengiriman, dan atribut name pada setiap masukan menjadi kunci array $_POST.
  • Satu berkas PHP dapat menampilkan formulir dan memprosesnya dengan memeriksa $_SERVER['REQUEST_METHOD'], kemudian menampilkan kembali formulir beserta error bila validasi gagal.
  • trim memotong spasi di kedua ujung masukan, empty mendeteksi nilai kosong dengan pengecualian string "0", dan filter_var dengan FILTER_VALIDATE_EMAIL memeriksa bentuk alamat surat elektronik.
  • Setiap nilai masukan yang dicetak ke dalam HTML wajib dibungkus htmlspecialchars agar struktur halaman tidak dapat diubah oleh isinya.

Referensi#