Tutorial HTML / Menambahkan petunjuk input dengan placeholder

Untuk menampilkan petunjuk singkat di dalam kolom formulir HTML yang kosong, gunakan atribut placeholder. Gunakan label untuk nama kolom dan value untuk nilai awal yang sebenarnya. Pemisahan antara placeholder dan nilai mencegah teks contoh terkirim sebagai data pengguna.

Perbedaan antara label, placeholder, dan value

Sebuah label mengidentifikasi sebuah bidang, seperti "Email" atau "Pesan". placeholder adalah petunjuk kecil yang ditampilkan di dalam bidang ketika nilainya kosong. Atribut value pada sebuah input menetapkan nilai awalnya.

Misalnya, “E-Mail” berfungsi sebagai label kolom, sementara “mis. alex@example.com” berfungsi sebagai petunjuk input. Menyertakan alamat contoh di value dalam formulir kontak yang kosong dapat menimbulkan kesan alamat nyata, oleh karena itu gunakan placeholder untuk contoh ini. Sebuah formulir perubahan akun, yang menampilkan alamat yang tersimpan, memerlukan nilai awal yang nyata.

Menambahkan teks petunjuk ke sebuah kolom

Tambahkan placeholder="Petunjuk Anda" ke tag kolom input pembuka. Contoh ini menampilkan alamat e-mail sebagai petunjuk ketika kolom kosong.

<label for="email">Email</label>
<input type="email" id="email" name="email"
       placeholder="misalnya alex@example.com">

Tetapkan atribut for dari label ke id dari bidang input untuk menghubungkannya. name mengidentifikasi bidang dalam data yang dikirim. Atribut ini memiliki fungsi yang berbeda: Menetapkan id tidak menggantikan kebutuhan akan name. Lihat label dan input terhubung dengan benar untuk contoh lebih lanjut.

Standar HTML mendukung placeholder untuk jenis input ini: text, search, tel, url, email, password, dan number. Bidang tanggal tidak mendukung atribut ini. Simpan petunjuk penting di luar bidang, termasuk untuk angka, agar tetap terlihat saat pengisian. Definisi HTML dari placeholder dan tabel atribut menurut jenis input menjelaskan ruang lingkup penggunaannya.

Menambahkan teks petunjuk pada bidang teks

Elemen textarea, yang menerima beberapa baris teks, juga mendukung placeholder. Untuk menampilkan hanya satu placeholder, biarkan area di antara tag pembuka dan penutupnya kosong. Gabungkan input multi-baris dan kotak pilihan dengan menggunakan contoh lengkap di Menggunakan textarea, select, option, dan button .

<label for="message">Pesan</label>
<textarea id="message" name="message" rows="4"
          placeholder="misalnya Kapan pesanan saya akan tiba?"></textarea>

Nilai awal dari area teks berasal dari teks antara tagnya dan bukan dari atribut value. Dalam contoh berikut, “Tolong beri tahu saya kapan pesanan saya akan tiba.” adalah nilai yang benar-benar dapat diedit dan bukan placeholder.

<textarea name="message">Tolong beri tahu saya kapan pesanan saya akan tiba.</textarea>

Spasi atau indentasi di antara tag area teks dapat menjadi bagian dari nilainya. Jika sebuah area teks yang tampaknya kosong tidak menampilkan placeholder-nya, periksa apakah masih ada teks sisa di antara tag-tag tersebut. Spesifikasi untuk area teks HTML menentukan nilai awalnya dan perilaku placeholder-nya.

Biarkan instruksi penting tetap terlihat saat mengetik

Teks petunjuk menghilang begitu pengguna memasukkan nilai, sehingga tidak dapat menggantikan nama kolom atau instruksi penting. Pertahankan nama seperti "E-Mail" dalam label yang terlihat dan berikan instruksi yang dibutuhkan pengguna saat mengetik dalam teks terpisah.

<label for="email">Email (wajib)</label>
<input type="email" id="email" name="email"
       placeholder="misalnya alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Gunakan alamat email yang dapat menerima balasan.</p>

Atribut aksesibilitas aria-describedby menghubungkan kolom input dengan teks penjelasan tambahan. Gunakan id milik elemen penjelasan sebagai nilai aria-describedby. Dengan begitu, teknologi bantu seperti pembaca layar dapat mengaitkan deskripsi dengan kolom. Pertahankan juga penjelasan yang terlihat seperti dalam contoh ini. Tutorial petunjuk formulir W3C menjelaskan pendekatan tersebut.

Contoh lengkap: Field wajib Email dan catatan opsional

Simpan kode berikut dengan nama form-guide.html menggunakan pengkodean UTF-8 dan buka di browser. Kolom email wajib diisi dan pesan bersifat opsional. Warna placeholder dipilih untuk latar belakang putih, dan kolom menyesuaikan lebar formulir pada layar yang lebih kecil. Bandingkan keharusan pengisian dengan batasan format dan jangkauan menggunakan nilai batas di Validasi formulir dengan keharusan pengisian, panjang, dan batasan jangkauan .

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh petunjuk input</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Hubungi kami</h1>
  <form method="get">
    <p>
      <label for="email">Email (wajib)</label>
      <input type="email" id="email" name="email"
             placeholder="misalnya alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Gunakan alamat email yang dapat menerima balasan.</p>
    <p>
      <label for="message">Pesan (opsional)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="misalnya Kapan pesanan saya akan tiba?"></textarea>
    </p>
    <button type="submit">Kirim</button>
  </form>
</body>
</html>

Kedua kolom awalnya menampilkan placeholder. Begitu Anda memasukkan alamat email, contohnya akan hilang, tetapi “Email (wajib)” dan penjelasan di bawahnya tetap terlihat. Hapus kolom sepenuhnya, dan teks placeholder akan muncul kembali.

1. Biarkan kolom email kosong dan tekan Kirim. Pengiriman melalui browser normal akan diblokir oleh pemeriksaan required.
2. Masukkan abc di kolom email dan kirim ulang. Pemeriksaan format type="email" akan memblokir pengiriman.
3. Masukkan alamat yang diformat dengan benar seperti alex@example.com, dan biarkan pesan kosong. Formulir dapat dikirim dengan kolom opsional yang kosong.

required memeriksa nilai kosong, dan type="email" memeriksa format email. Alamat yang diformat dengan benar bukan bukti bahwa alamat tersebut benar-benar ada. Pesan kesalahan dan tampilannya bervariasi tergantung pada browser dan pengaturan bahasa.

Contoh ini tidak berisi server yang menyimpan pesan. Karena formulir GET action dihilangkan, pengiriman normal diarahkan ke alamat dokumen saat ini. Jika file disajikan oleh server web, string kueri di URL-nya dapat menampilkan nilai yang dikirim. Penanganan file yang dibuka secara lokal dapat bervariasi. Layanan yang berfungsi memerlukan endpoint server dan metode pengiriman yang sesuai.

Apa yang dikirim: teks placeholder atau nilainya?

Teks placeholder tidak dikirimkan sebagai nilai input, tetapi nilai kosong masih bisa termasuk dalam data yang dikirimkan. Misalnya, sebuah bidang yang tidak dinonaktifkan dengan name="email" email= dapat dihasilkan dalam pengiriman GET jika kosong dan tidak ada pemeriksaan untuk bidang wajib yang menghalangi pengiriman. Bidang tanpa name atau dengan disabled diabaikan dari data formulir normal. Perbedaan ini mengikuti aturan HTML untuk membuat data formulir .

<form id="compare-form">
  <label for="default-name">Nilai awal</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Contoh catatan</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="misalnya Alex">
</form>

Buka kode ini dalam file HTML terpisah dan kemudian jalankan kode berikut di konsol alat pengembang browser Anda. FormData membuat daftar nama-nama bidang formulir dan nilai-nilai saat ini. Kode ini memeriksa daftar tersebut tanpa mengirimkannya ke server.

Array.from(new FormData(document.getElementById("compare-form")).entries())

Jika kedua bidang tetap tidak berubah, hasilnya adalah sebagai berikut. "Alex", yang diberikan melalui value, akan disertakan. Teks placeholder "misalnya Alex" tidak disertakan.

[["default_name", "Alex"], ["hint_name", ""]]

Masukkan "Sam" ke dalam bidang kedua dan jalankan kembali kode: nilai untuk hint_name akan menjadi "Sam". Jika pengguna mengubah bidang pertama, nilainya saat ini akan disertakan menggantikan nilai awal.

Bahkan dengan required, sebuah bidang yang telah diisi sebelumnya dapat melewati pemeriksaan sederhana untuk nilai kosong melalui value. Pembuatan objek FormData juga tidak menyebabkan validasi bidang wajib. Tangani pemeriksaan saat pengiriman melalui browser dan pembuatan daftar data sebagai proses terpisah dan lakukan validasi input di sisi server dalam layanan nyata.

Jika teks placeholder hilang atau sulit dibaca

• Periksa apakah bidang sudah memiliki nilai. Nilai awal dari sebuah input, isi dari area teks, pengisian otomatis oleh browser atau skrip dapat mencegah teks placeholder ditampilkan.
• Periksa jenis inputnya. Untuk kontrol dengan antarmuka khusus, seperti bidang tanggal, berikan petunjuk di luar bidang.
• Jaga keterangan tetap singkat. Berikan contoh singkat di dalam bidang dan kondisi rinci dalam teks penjelas yang terlihat. Jangan membuat pemenggalan baris di teks petunjuk.
• Periksa warna teks dan latar belakang. Warna yang sangat pucat atau opasitas rendah dapat menyulitkan keterbacaan petunjuk. Setelah menyesuaikan gaya, periksa juga keterbacaan di layar ponsel.

Gunakan pseudoelement CSS ::placeholder untuk menata teks petunjuk. CSS (Cascading Style Sheets) mengontrol tampilan sebuah halaman; contoh lengkap menggunakannya untuk mengatur warna dan opasitas petunjuk. Untuk contoh gaya lainnya, lihat Penataan teks petunjuk (dalam bahasa Korea). Gunakan label untuk nama bidang, teks petunjuk untuk contoh singkat, dan deskripsi terpisah untuk instruksi yang harus tetap terlihat.