Text dan Password Input

Dari seluruh jenis input, dua jenis paling sering kita temui adalah text dan password. Keduanya menerima ketikan satu baris, tetapi keduanya melayani tujuan yang berbeda dan membawa atribut pelengkap yang berbeda pula. Chapter ini membahas perilaku keduanya, atribut value untuk nilai awal, token autocomplete yang membantu password manager, serta pasangan atribut readonly dan disabled yang kerap tertukar.

input type=“text” #

input type="text" adalah kontrol isian satu baris yang paling netral: nilainya teks bebas tanpa syarat format. Kontrol ini cocok untuk nama, nama pengguna, kota, dan data singkat lain yang bentuknya tak terduga. Browser menampilkannya sebagai kolom kosong dengan lebar tertentu, dan lebar tersebut dapat diatur atribut size yang menyatakan perkiraan banyaknya karakter terlihat; nilai bawaannya 20.

input type=“password” #

input type="password" bekerja seperti text, tetapi browser mengganti setiap karakter yang diketik dengan simbol seperti titik atau tanda bintang. Penyamaran ini menjaga ketikan dari tatapan orang di sekitar pengunjung, bukan mengubah data itu sendiri. Nilai yang dikirim tetap teks biasa, sehingga perlindungan jalur kirim tetap menjadi tanggung jawab protokol HTTPS di luar HTML.

Atribut value: Nilai Awal #

Atribut value menetapkan nilai awal kontrol sebelum pengunjung menyentuhnya:

<p>
  <label for="kota">Kota kirim</label>
  <input type="text" id="kota" name="kota" value="Bandung">
</p>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kolom isian yang telah terisi teks "Bandung"
  - Teks tersebut dapat diubah atau dihapus oleh pengunjung

Browser mengisi kolom dengan teks pada atribut value begitu halaman dimuat, dan pengunjung bebas mengubahnya. Nilai terkini kontrol — baik hasil ketikan maupun nilai awal — inilah yang dikirim bersama name saat form disubmit. Untuk type="password", kita membiarkan value kosong: menaruh kata sandi pada atribut berarti menulisnya dalam kode sumber yang mudah dibaca siapa pun.

Autocomplete: Membantu Password Manager #

Atribut autocomplete memberi tahu browser jenis data yang diharapkan sebuah kontrol, memakai daftar token standar. Browser dan password manager memakai petunjuk itu untuk mengisi kontrol secara otomatis dengan data tersimpan pengunjung. Token yang relevan untuk form login:

Manfaatnya nyata: dengan autocomplete="current-password", password manager dapat menawarkan kata sandi tersimpan tanpa mengharuskan pengunjung menyalin-tempel. Token new-password sebaliknya memaksa password manager menawarkan sandi baru, sehingga cocok untuk form pendaftaran dan form ganti sandi.

readonly vs disabled #

Dua atribut ini sama-sama menghentikan penyuntingan, tetapi keduanya berbeda perilaku saat form dikirim:

readonly menyatakan nilai boleh dibaca tetapi tidak boleh diubah — cocok untuk nilai yang dihitung sistem, misalnya nomor pesanan. disabled mematikan kontrol sepenuhnya; browser melewatkan kontrol tersebut saat menghimpun data, sehingga pasangan name dan value miliknya tidak terkirim sama sekali.

<p>
  <label for="kota">Kota kirim</label>
  <input type="text" id="kota" name="kota" value="Bandung" readonly>
</p>
<p>
  <label for="kupon">Kode kupon</label>
  <input type="text" id="kupon" name="kupon" value="HEMAT10" disabled>
</p>

Contoh: Form Login dengan autocomplete #

File berikut merangkai materi chapter ini pada form login Toko Budi. Simpan sebagai form-login-autocomplete.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Login dengan Autocomplete</title>
</head>
<body>
  <h1>Masuk ke Akun Toko</h1>
  <form>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username"
             autocomplete="username">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi"
             autocomplete="current-password">
    </p>
    <p>
      <input type="submit" value="Masuk">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kolom "Nama pengguna" yang mungkin terisi saran tersimpan browser
  - Kolom "Kata sandi" dengan karakter tersamar
  - Tombol "Masuk" di bagian bawah

Berikut peran setiap bagian kode:

1. Baris 13-14: input teks dengan autocomplete="username", menandai kontrol nama pengguna bagi browser dan password manager.
2. Baris 18-19: input password dengan autocomplete="current-password", memberi izin pengisian sandi tersimpan.
3. Baris 22 (input type="submit"): tombol yang memicu pengiriman.
4. Atribut value: sengaja tidak dipakai, sehingga kedua kolom terbuka dalam keadaan kosong.

Dengan dua atribut autocomplete tersebut, form login kita ikut berbicara pada password manager, bukan hanya pada mata pengunjung. Chapter berikutnya menambah tiga jenis input berformat — email, url, dan number — yang membawa aturan format dan keyboard khusus di perangkat genggam.

Referensi resmi untuk pendalaman:

• MDN Web Docs — input type=“text”
• MDN Web Docs — input type=“password”
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Login dengan Autocomplete</title>
</head>
<body>
  <h1>Masuk ke Akun Toko</h1>
  <form>
    <p>
      <label for="username">Nama pengguna</label>
      <input type="text" id="username" name="username"
             autocomplete="username">
    </p>
    <p>
      <label for="sandi">Kata sandi</label>
      <input type="password" id="sandi" name="sandi"
             autocomplete="current-password">
    </p>
    <p>
      <input type="submit" value="Masuk">
    </p>
  </form>
</body>
</html>