Input Text, Email, Password

Input Text, Email, Password ✍️

Tiga jenis input ini adalah yang paling sering dijumpai di hampir setiap form di web — dari login, registrasi, pencarian, hingga formulir kontak. Meski tampak sederhana, ada banyak atribut dan detail penting yang perlu dipahami.

Struktur Dasar <input>

Tag <input> adalah self-closing tag yang menampilkan berbagai jenis field input tergantung nilai atribut type-nya:

<input type="text">
<input type="email">
<input type="password">

Ketiganya tampil sebagai kotak teks di browser, namun perilaku dan validasinya berbeda.

Input Text — type="text"

Input teks paling dasar — menerima semua karakter tanpa validasi khusus:

<label for="nama">Nama Lengkap</label>
<input type="text" id="nama" name="nama">

Atribut-Atribut Input Text

placeholder — Teks petunjuk di dalam kotak:

<input type="text" name="nama" placeholder="Contoh: Budi Santoso">
<input type="text" name="kota" placeholder="Masukkan nama kota...">

Teks placeholder menghilang otomatis saat pengguna mulai mengetik. Jangan gunakan placeholder sebagai pengganti label — keduanya punya peran berbeda.

value — Nilai awal yang sudah terisi:

<!-- Nilai sudah terisi saat halaman dibuka -->
<input type="text" name="negara" value="Indonesia">

maxlength & minlength — Batas panjang karakter:

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

<!-- Minimal 3, maksimal 20 karakter -->
<input type="text" name="username" minlength="3" maxlength="20">

Browser otomatis menolak input yang melebihi maxlength.

size — Lebar kotak input (dalam jumlah karakter):

<!-- Kotak selebar 10 karakter -->
<input type="text" name="kode_pos" size="10">

Lebih disarankan menggunakan CSS width untuk mengatur lebar — hasilnya lebih konsisten antar browser.

readonly — Input bisa dilihat tapi tidak bisa diubah:

<input type="text" name="kode_referral" value="REF-2025-XYZ" readonly>

Data readonly tetap dikirim saat form di-submit — berbeda dengan disabled.

disabled — Input dinonaktifkan sepenuhnya:

<input type="text" name="diskon" value="PROMO10" disabled>

Data disabled tidak dikirim saat form di-submit.

required — Wajib diisi sebelum submit:

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

Browser akan memunculkan pesan error dan menolak submit jika field ini kosong.

autofocus — Otomatis fokus saat halaman dibuka:

<!-- Field ini langsung aktif saat halaman dibuka -->
<input type="text" name="cari" autofocus placeholder="Cari artikel...">

Gunakan hanya pada satu field per halaman.

autocomplete — Kontrol saran pengisian otomatis:

<input type="text" name="nama" autocomplete="name">
<input type="text" name="kota" autocomplete="address-level2">
<input type="text" name="username" autocomplete="username">

Nilai autocomplete yang umum:

pattern — Validasi dengan ekspresi reguler:

<!-- Hanya huruf, minimal 3 karakter -->
<input 
  type="text" 
  name="username" 
  pattern="[a-zA-Z0-9]{3,20}"
  title="Username hanya boleh huruf dan angka, 3-20 karakter"
>

<!-- Format kode pos Indonesia -->
<input 
  type="text" 
  name="kode_pos" 
  pattern="[0-9]{5}"
  title="Kode pos harus 5 digit angka"
  placeholder="Contoh: 50123"
>

Atribut title menampilkan pesan error kustom saat validasi gagal.

Input Email — type="email"

Secara tampilan sama dengan input text, namun browser otomatis memvalidasi format email yang benar:

<label for="email">Alamat Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]">

Browser menolak submit jika format email salah — misalnya jika tidak ada karakter @ atau domain.

Validasi yang dilakukan browser:

budi             → ❌ Tidak valid — tidak ada @
budi@            → ❌ Tidak valid — tidak ada domain
budi@gmail       → ❌ Tidak valid — tidak ada TLD
[email protected]   → ✅ Valid

Atribut Tambahan Input Email

multiple — Izinkan beberapa email dipisah koma:

<input 
  type="email" 
  name="penerima" 
  multiple 
  placeholder="[email protected], [email protected]"
>

Contoh input email dengan validasi lengkap:

<label for="email-daftar">Email</label>
<input 
  type="email" 
  id="email-daftar"
  name="email"
  placeholder="[email protected]"
  required
  autocomplete="email"
  maxlength="100"
>

Input Password — type="password"

Menampilkan karakter yang diketik sebagai titik atau asterisk — menyembunyikan input dari pandangan orang lain:

<label for="password">Password</label>
<input type="password" id="password" name="password">

Atribut Tambahan Input Password

minlength — Panjang minimum password:

<input 
  type="password" 
  name="password"
  minlength="8"
  placeholder="Minimal 8 karakter"
  required
>

pattern — Aturan kompleksitas password:

<!-- Minimal 8 karakter, harus ada huruf besar, huruf kecil, dan angka -->
<input 
  type="password"
  name="password"
  pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
  title="Password minimal 8 karakter, harus mengandung huruf besar, huruf kecil, dan angka"
  required
>

autocomplete — Penting untuk password:

<!-- Form login — izinkan password manager mengisi -->
<input type="password" name="password" autocomplete="current-password">

<!-- Form registrasi — password baru -->
<input type="password" name="password_baru" autocomplete="new-password">

Nilai autocomplete="new-password" memberi tahu browser dan password manager bahwa ini adalah field untuk membuat password baru — mencegah pengisian otomatis dari password lama.

Tombol Lihat/Sembunyikan Password

Fitur yang kini umum di form modern — toggle antara text dan password:

<style>
  .input-password-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .input-password-wrapper input {
    width: 100%;
    padding: 10px 44px 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
  }

  .input-password-wrapper input:focus {
    border-color: #4a9eed;
    box-shadow: 0 0 0 3px rgba(74,158,237,0.15);
  }

  .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #6b7280;
    padding: 0;
    line-height: 1;
  }
</style>

<div class="input-password-wrapper">
  <input 
    type="password" 
    id="pwd" 
    name="password"
    placeholder="Masukkan password"
  >
  <button 
    type="button" 
    class="toggle-password"
    onclick="
      const input = document.getElementById('pwd');
      input.type = input.type === 'password' ? 'text' : 'password';
      this.textContent = input.type === 'password' ? '👁' : '🙈';
    "
  >👁</button>
</div>

Perbedaan Ketiga Jenis Input

Form Registrasi Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar Akun</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: sans-serif;
      background: #f0f4ff;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .card {
      background: white;
      border-radius: 16px;
      padding: 40px;
      width: 100%;
      max-width: 480px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }

    h2 {
      font-size: 24px;
      color: #1e1e1e;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 28px;
    }

    .form-row {
      display: flex;
      gap: 16px;
    }

    .form-group {
      flex: 1;
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 6px;
    }

    .required-mark {
      color: #ef4444;
      margin-left: 2px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      color: #1e1e1e;
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }

    input:focus {
      border-color: #4a9eed;
      box-shadow: 0 0 0 3px rgba(74,158,237,0.12);
    }

    input:invalid:not(:placeholder-shown) {
      border-color: #ef4444;
    }

    .hint {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 4px;
    }

    .pw-wrapper {
      position: relative;
    }

    .pw-wrapper input {
      padding-right: 44px;
    }

    .pw-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: #9ca3af;
    }

    .strength-bar {
      height: 4px;
      border-radius: 4px;
      background: #e5e7eb;
      margin-top: 8px;
      overflow: hidden;
    }

    .strength-fill {
      height: 100%;
      width: 0%;
      border-radius: 4px;
      transition: width 0.3s, background-color 0.3s;
    }

    .btn-submit {
      width: 100%;
      padding: 12px;
      background: #4a9eed;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s;
    }

    .btn-submit:hover { background: #2563eb; }

    .login-link {
      text-align: center;
      font-size: 13px;
      color: #6b7280;
      margin-top: 16px;
    }

    .login-link a {
      color: #4a9eed;
      text-decoration: none;
      font-weight: 600;
    }
  </style>
</head>
<body>
<div class="card">
  <h2>Buat Akun Baru</h2>
  <p class="subtitle">Isi data di bawah untuk memulai</p>

  <form action="/daftar" method="POST" autocomplete="on" novalidate>

    <!-- Nama Depan & Belakang -->
    <div class="form-row">
      <div class="form-group">
        <label for="nama-depan">
          Nama Depan <span class="required-mark">*</span>
        </label>
        <input 
          type="text" 
          id="nama-depan" 
          name="nama_depan"
          placeholder="Budi"
          autocomplete="given-name"
          maxlength="50"
          required
        >
      </div>
      <div class="form-group">
        <label for="nama-belakang">Nama Belakang</label>
        <input 
          type="text" 
          id="nama-belakang" 
          name="nama_belakang"
          placeholder="Santoso"
          autocomplete="family-name"
          maxlength="50"
        >
      </div>
    </div>

    <!-- Username -->
    <div class="form-group">
      <label for="username">
        Username <span class="required-mark">*</span>
      </label>
      <input 
        type="text" 
        id="username" 
        name="username"
        placeholder="budi_santoso"
        autocomplete="username"
        minlength="3"
        maxlength="20"
        pattern="[a-zA-Z0-9_]{3,20}"
        title="Hanya huruf, angka, dan underscore. 3-20 karakter."
        required
      >
      <p class="hint">3-20 karakter. Hanya huruf, angka, dan underscore (_).</p>
    </div>

    <!-- Email -->
    <div class="form-group">
      <label for="email">
        Alamat Email <span class="required-mark">*</span>
      </label>
      <input 
        type="email" 
        id="email" 
        name="email"
        placeholder="[email protected]"
        autocomplete="email"
        maxlength="100"
        required
      >
    </div>

    <!-- Password -->
    <div class="form-group">
      <label for="password">
        Password <span class="required-mark">*</span>
      </label>
      <div class="pw-wrapper">
        <input 
          type="password" 
          id="password" 
          name="password"
          placeholder="Minimal 8 karakter"
          autocomplete="new-password"
          minlength="8"
          required
          oninput="cekKekuatan(this.value)"
        >
        <button 
          type="button" 
          class="pw-toggle"
          onclick="
            const i = document.getElementById('password');
            i.type = i.type === 'password' ? 'text' : 'password';
            this.textContent = i.type === 'password' ? '👁' : '🙈';
          "
        >👁</button>
      </div>
      <div class="strength-bar">
        <div class="strength-fill" id="strength-fill"></div>
      </div>
      <p class="hint" id="strength-text">Masukkan password untuk melihat kekuatannya</p>
    </div>

    <!-- Konfirmasi Password -->
    <div class="form-group">
      <label for="konfirmasi">
        Konfirmasi Password <span class="required-mark">*</span>
      </label>
      <div class="pw-wrapper">
        <input 
          type="password" 
          id="konfirmasi" 
          name="konfirmasi_password"
          placeholder="Ulangi password"
          autocomplete="new-password"
          required
        >
        <button 
          type="button" 
          class="pw-toggle"
          onclick="
            const i = document.getElementById('konfirmasi');
            i.type = i.type === 'password' ? 'text' : 'password';
            this.textContent = i.type === 'password' ? '👁' : '🙈';
          "
        >👁</button>
      </div>
    </div>

    <button type="submit" class="btn-submit">Buat Akun</button>

  </form>

  <p class="login-link">
    Sudah punya akun? <a href="/login">Masuk di sini</a>
  </p>
</div>

<script>
  function cekKekuatan(password) {
    const fill = document.getElementById('strength-fill');
    const text = document.getElementById('strength-text');
    let skor = 0;

    if (password.length >= 8)  skor++;
    if (/[A-Z]/.test(password)) skor++;
    if (/[0-9]/.test(password)) skor++;
    if (/[^a-zA-Z0-9]/.test(password)) skor++;

    const level = {
      0: { width: '0%',   color: '#e5e7eb', label: 'Masukkan password' },
      1: { width: '25%',  color: '#ef4444', label: 'Lemah' },
      2: { width: '50%',  color: '#f59e0b', label: 'Sedang' },
      3: { width: '75%',  color: '#4a9eed', label: 'Kuat' },
      4: { width: '100%', color: '#22c55e', label: 'Sangat Kuat' },
    };

    fill.style.width           = level[skor].width;
    fill.style.backgroundColor = level[skor].color;
    text.textContent           = `Kekuatan password: ${level[skor].label}`;
    text.style.color           = level[skor].color;
  }
</script>
</body>
</html>

Ringkasan Atribut Input Text, Email & Password

💡 Tips: Jangan pernah mengandalkan validasi HTML saja — validasi di sisi browser mudah dilewati pengguna yang paham teknis. Selalu lakukan validasi ulang di sisi server untuk keamanan yang sesungguhnya. Validasi HTML hanya untuk pengalaman pengguna yang lebih baik, bukan sebagai pertahanan keamanan. 🔐