Langsung ke konten

Form Validation di HTML: Validasi Input Tanpa JavaScript

Pelajari cara memvalidasi form di HTML menggunakan attribute required, minlength, maxlength, pattern, placeholder, readonly, dan disabled.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami form input lengkap, kita perlu memastikan data yang dikirim valid. HTML punya beberapa attribute untuk validasi tanpa JavaScript.

Mengapa Validasi Penting?

Validasi memastikan:

  • Data yang dikirim lengkap dan benar
  • Format email, nomor telepon, dll sesuai
  • Server tidak menerima data kosong atau tidak valid
  • Pengguna mendapat feedback langsung

required: Input Wajib

Attribute required memaksa pengguna mengisi input sebelum form bisa dikirim:

<input type="text" name="nama" required />
<input type="email" name="email" required />

Jika kolom kosong dan pengguna klik submit, browser akan menampilkan pesan error.

minlength dan maxlength

Batasi jumlah karakter minimal dan maksimal:

<!-- Minimal 3 karakter -->
<input type="text" name="username" minlength="3" />

<!-- Maksimal 50 karakter -->
<input type="text" name="nama" maxlength="50" />

<!-- Password minimal 8 karakter -->
<input type="password" name="password" minlength="8" />

min dan max

Batasi nilai numerik untuk input number, date, dll:

<!-- Umur minimal 17, maksimal 60 -->
<input type="number" name="umur" min="17" max="60" />

<!-- Tanggal tidak boleh sebelum hari ini -->
<input type="date" name="tanggal" min="2026-09-07" />

<!-- Volume 0-100 -->
<input type="range" name="volume" min="0" max="100" />

pattern: Validasi dengan Regex

pattern memvalidasi input dengan regular expression:

<!-- Hanya huruf dan spasi -->
<input type="text" name="nama" pattern="[A-Za-z ]+" />

<!-- Nomor telepon Indonesia -->
<input type="tel" name="telepon" pattern="[0-9]{10,13}" />

<!-- Format NIM (angka 10 digit) -->
<input type="text" name="nim" pattern="[0-9]{10}" />

Contoh Pattern Umum

KebutuhanPattern
Hanya huruf[A-Za-z]+
Hanya angka[0-9]+
Email[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$
Nomor HP[0-9]{10,13}
Nama file[a-zA-Z0-9_-]+\.[a-z]{2,}

placeholder: Teks Bantuan

placeholder menampilkan teks panduan di dalam input:

<input type="email" name="email" placeholder="contoh: [email protected]" />
<input type="text" name="alamat" placeholder="Jl. Merdeka No. 1" />

placeholder membantu pengguna memahami format yang diharapkan.

readonly vs disabled

readonly

Input tidak bisa diubah tapi tetap dikirim saat form submit:

<input type="text" name="username" value="budi123" readonly />

Cocok untuk data yang tidak boleh diubah pengguna.

disabled

Input tidak aktif dan tidak dikirim saat form submit:

<input type="text" name="kode" value="AUTO-001" disabled />

Cocok untuk data yang diisi otomatis oleh sistem.

Contoh Form dengan Validasi

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Form dengan Validasi</title>
    <style>
      .form-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      input,
      select {
        width: 300px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Form Pendaftaran</h1>

    <form action="/daftar" method="POST">
      <div class="form-group">
        <label for="nama">Nama Lengkap (wajib, min 3 karakter):</label>
        <input
          type="text"
          id="nama"
          name="nama"
          minlength="3"
          maxlength="50"
          required
          placeholder="Masukkan nama"
        />
      </div>

      <div class="form-group">
        <label for="email">Email (wajib):</label>
        <input
          type="email"
          id="email"
          name="email"
          required
          placeholder="contoh: [email protected]"
        />
      </div>

      <div class="form-group">
        <label for="password">Password (wajib, min 8 karakter):</label>
        <input
          type="password"
          id="password"
          name="password"
          minlength="8"
          required
          placeholder="Minimal 8 karakter"
        />
      </div>

      <div class="form-group">
        <label for="umur">Umur (17-60 tahun):</label>
        <input
          type="number"
          id="umur"
          name="umur"
          min="17"
          max="60"
          required
        />
      </div>

      <div class="form-group">
        <label for="telepon">Nomor HP (10-13 angka):</label>
        <input
          type="tel"
          id="telepon"
          name="telepon"
          pattern="[0-9]{10,13}"
          required
          placeholder="081234567890"
        />
      </div>

      <div class="form-group">
        <label for="website">Website (opsional):</label>
        <input
          type="url"
          id="website"
          name="website"
          placeholder="https://example.com"
        />
      </div>

      <div class="form-group">
        <button type="submit">Daftar</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  </body>
</html>

CSS untuk Validasi

CSS bisa menampilkan style berbeda untuk input valid/invalid:

/* Border merah untuk input invalid */
input:invalid {
  border-color: red;
}

/* Border hijau untuk input valid */
input:valid {
  border-color: green;
}

/* Pesan error */
input:invalid + .error {
  color: red;
  font-size: 0.8em;
}

Pentingnya Label

Walaupun ada validasi, tetap gunakan <label> untuk:

  • Aksesibilitas (screen reader)
  • Klik label langsung fokus ke input
  • SEO dan dokumentasi kode

Best Practice Validasi

  • Gunakan required untuk input wajib
  • Gunakan minlength/maxlength untuk batas karakter
  • Gunakan pattern untuk format khusus
  • Selalu validasi di server juga (validasi HTML bisa dilewati)
  • Beri pesan error yang jelas dan membantu
  • Jangan andalkan validasi HTML saja, tambah JavaScript untuk pengalaman lebih baik

Ringkasan

  • required untuk input wajib
  • minlength/maxlength membatasi jumlah karakter
  • min/max membatasi nilai numerik
  • pattern validasi dengan regex
  • placeholder memberi panduan format
  • readonly input tidak bisa diubah
  • disabled input tidak aktif
  • Validasi HTML initial validation, server validation tetap perlu

Langkah Selanjutnya

Kamu sudah memahami form validation. Artikel selanjutnya membahas label dan fieldset, cara meningkatkan aksesibilitas form.