Kolom Input Teks
Kumpulkan teks dengan presisi dan fleksibilitas. Dari nama sederhana hingga pola kompleks dengan validasi bawaan, pemformatan cerdas, dan kustomisasi yang canggih – kolom Input Teks beradaptasi dengan setiap kasus penggunaan dengan batasan karakter, pemformatan otomatis, dan mode kata sandi yang aman.
Dasar dari Setiap Formulir WordPress
Sempurna untuk:
Fitur Canggih untuk Setiap Kebutuhan
📏 Kontrol Panjang Cerdas
Batas Karakter Minimum & Maksimum
Tetapkan batas terpendek dan terpanjang yang diizinkan untuk memasukkan teks. Cegah pengiriman teks yang terlalu pendek atau terlalu panjang dengan validasi bawaan browser.
Validasi Waktu Nyata
Pengguna akan melihat umpan balik langsung jika entri mereka tidak memenuhi persyaratan panjang – tidak ada kejutan setelah pengiriman.
contoh:
- Nama pengguna: Minimal 3, maksimal 20 karakter
- Kode pos: Minimal 5, maksimal 10 karakter
- Nama: Minimal 2, Maksimal 50 karakter
- Komentar: Maksimal 500 karakter
Why It Matters:
Mengontrol kualitas data, mencegah spam, memastikan kompatibilitas basis data, dan membimbing pengguna untuk memberikan jumlah informasi yang tepat.
✅ Pola Validasi Bawaan
6 Jenis Validasi yang Telah Dikonfigurasi Sebelumnya:
- 1. Tidak ada – Menerima teks apa pun (default)
2. Email – Memvalidasi format email yang benar ([email dilindungi])
3. URL – Membutuhkan alamat web yang valid (https://example.com)
4. Hanya Huruf – Hanya karakter alfabet dan spasi (John Doe)
5. Hanya Angka – Hanya digit angka (123456)
6. Alfanumerik – Huruf dan angka, tanpa karakter khusus (User123)
Ditambah Pola Kustom:
- Tetapkan validasi regex Anda sendiri untuk format khusus seperti:
- Pelat nomor: `^[AZ]{3}[0-9]{4}$`
- Kode produk: `^[AZ]{2}[0-9]{6}$`
- Format khusus yang unik untuk bisnis Anda.
Umpan Balik Instan:
Pengguna akan melihat pesan kesalahan yang jelas jika input mereka tidak sesuai dengan format yang dibutuhkan.
✂️ Pemangkasan Spasi Otomatis
Bersihkan Data Secara Otomatis
Hapus spasi yang tidak sengaja muncul di awal dan akhir teks. Tidak ada lagi ” John ” ketika Anda menginginkan “John”.
Gunakan Kasus:
- Alamat email (tanpa spasi di akhir)
- Nama pengguna (tanpa spasi di depan)
- Kode referensi (kecocokan persis)
- Bidang apa pun di mana ketelitian sangat penting.
Manfaat:
Mengurangi kesalahan pengguna, meningkatkan konsistensi data, mencegah masalah validasi, dan menyederhanakan pencocokan dan pencarian.
🔒 Mode Kata Sandi
Penyamaran Input Aman
Ubah kolom teks apa pun menjadi kolom kata sandi. Karakter akan muncul sebagai titik (•••) untuk melindungi informasi sensitif dari pengintip.
Sempurna untuk:
- Masukkan kata sandi dan PIN.
- Kode dan token keamanan
- Nomor ID rahasia
- Kode otentikasi dua faktor
Perilaku Cerdas:
Mode kata sandi secara otomatis menonaktifkan fitur-fitur yang bertentangan seperti transformasi teks dan tipe input khusus untuk memastikan keamanan.
📱 Jenis Input Cerdas
Dioptimalkan untuk Perangkat Seluler & Desktop:
- Teks Normal – Input teks standar untuk penggunaan umum.
- Pencarian – Dilengkapi tombol hapus (X) bawaan untuk pengaturan ulang cepat
- Telepon – Mengaktifkan keypad numerik pada perangkat seluler untuk memudahkan memasukkan nomor telepon.
- URL – Menampilkan papan ketik khusus untuk perangkat seluler dengan pintasan .com dan .org
Why It Matters:
Jenis input yang tepat mempercepat entri data di perangkat seluler, mengurangi kesalahan, dan meningkatkan pengalaman pengguna di semua perangkat.
🎨 Transformasi Teks Otomatis
Format Teks Sesuai Ketik Pengguna:
- Tidak ada transformasi – Teks tetap persis seperti yang dimasukkan
- UPPERCASE – Mengubah semua teks menjadi huruf kapital (JOHN DOE)
- lowercase – Mengubah semua teks menjadi huruf kecil (john doe)
- Huruf Pertama Harus Kapital – Hanya huruf pertama yang harus ditulis besar (John doe)
- Huruf Kapital Awal – Huruf Pertama Setiap Kata (John Doe)
Sempurna untuk:
- HURUF KAPITAL: Plat nomor kendaraan, kode negara bagian, ID produk
- huruf kecil: Alamat email, nama pengguna
- Gunakan huruf kapital: Awal kalimat, nama tunggal
- Huruf Kapital Awal: Nama lengkap, alamat, gelar
Perilaku Cerdas:
Transformasi terjadi secara otomatis selama pengiriman sementara pengguna tetap melihat input asli mereka.
🙈 Mode Lapangan Tersembunyi
Bidang Data Tak Terlihat
Buat kolom yang tidak terlihat oleh pengguna tetapi mengirimkan data bersama formulir. Sempurna untuk pelacakan, kode referensi, dan nilai sistem.
Gunakan Kasus:
- Parameter pelacakan UTM
- ID sumber rujukan
- Nomor versi formulir
- Penanda cap waktu
- Metadata tersembunyi
Cara Bekerja:
Atur “Nilai Tersembunyi” dan nilai tersebut akan otomatis disertakan dalam setiap pengiriman formulir tanpa mengacaukan antarmuka pengguna formulir Anda.
🔀 Logika Bersyarat
Visibilitas Bidang Dinamis
Tampilkan atau sembunyikan kolom teks berdasarkan nilai formulir lainnya. Buat formulir cerdas yang beradaptasi dengan masukan pengguna.
Aturan Logika Tingkat Lanjut:
- Logika AND – Semua kondisi harus terpenuhi
- Logika OR – Kondisi apa pun dapat memicu tindakan.
- 8 Operator – Sama dengan, Tidak sama dengan, Lebih besar dari, Lebih kecil dari, Berisi, Kosong, dan lainnya
Gunakan Kasus:
- Tampilkan “Nama perusahaan” hanya jika tipe yang dimasukkan pengguna sama dengan “Bisnis”.
- Tampilkan “Sumber rujukan” ketika “Bagaimana Anda mengetahui tentang kami?” berisi “Rujukan”.
- Sembunyikan “Detail lainnya” jika opsi utama tidak kosong
- Tampilkan "Kode promo" saat nilai pesanan lebih dari $100.
🎯 Pengalaman Pengguna yang Ditingkatkan
Fitur Cerdas Terintegrasi:
- Nilai Default – Isi otomatis kolom untuk mempercepat penyelesaian
- Teks Placeholder – Tampilkan petunjuk bermanfaat sebelum pengguna mengetik
- Teks Bantuan – Tambahkan deskripsi untuk memperjelas apa yang perlu dimasukkan.
- Validasi Wajib – Jadikan kolom wajib diisi dengan indikator yang jelas.
- Kelas CSS Kustom – Terapkan gaya kustom agar sesuai dengan merek Anda
- Dukungan Aksesibilitas – Label ARIA untuk pembaca layar
- Dioptimalkan untuk Perangkat Seluler – Input ramah sentuhan dengan keyboard yang sesuai.
Pengaturan Sederhana dalam 3 Langkah
Siapkan kolom input teks Anda dalam hitungan menit.
Tambahkan Kolom Teks
Seret dan lepas kolom Input Teks dari bagian Kolom Dasar ke dalam formulir Anda.
Tetapkan Validasi & Batasan
Pilih jenis validasi (email, URL, surat, dll.), tetapkan batas karakter minimum/maksimum, dan secara opsional aktifkan mode kata sandi atau penghapusan spasi.
Konfigurasi Pemformatan
Pilih tipe input untuk optimasi seluler, pilih transformasi teks (huruf besar, huruf kecil, dll.), dan atur nilai default atau placeholder.
🎉 Selesai! Kolom teks Anda sudah siap dengan validasi dan pemformatan cerdas.
Aplikasi Dunia Nyata
Pendaftaran Pengguna
* Kolom nama pengguna dengan batasan panjang
* Input kata sandi dengan penyamaran
* Beri nama kolom dengan format huruf kapital di awal setiap kata.
* Alamat email dengan validasi
Formulir Kontak
* Nama lengkap dengan huruf kapital di awal setiap kata
* Validasi email
* Nomor telepon dengan input tel
* Kolom pesan/komentar
E-commerce
* Masukkan kode promo (huruf besar)
* Kolom pesan hadiah
* Instruksi khusus
* Catatan pengiriman
Aplikasi Bisnis
* Nomor ID karyawan
* Nama departemen
* Nomor referensi
* Kode internal
Aplikasi & Pendaftaran
* Nomor lisensi
* Kode sertifikasi
* ID Keanggotaan
* Pengidentifikasi khusus
Pencarian & Penyaringan
* Input pencarian dengan tombol hapus
* Filter kolom teks
* Entri kata kunci
* Masukan kueri
Opsi Bidang Lengkap
Konfigurasi Dasar
- Label Kolom – Judul yang ditampilkan di atas kolom teks.
- Deskripsi/Teks Bantuan – Panduan tambahan untuk pengguna
- Kolom Wajib Diisi – Wajib memasukkan teks.
- Teks Placeholder – Teks petunjuk sebelum pengguna mengetik
Validasi Panjang
- Panjang Minimum – Jumlah karakter paling sedikit yang diperbolehkan (validasi)
- Panjang Maksimum – Jumlah karakter terbanyak yang diizinkan (batas maksimal)
Nilai dasar
- Nilai Default – Teks yang sudah terisi saat formulir dimuat
- Nilai Tersembunyi – Nilai untuk kolom tersembunyi (saat mode tersembunyi diaktifkan)
Keamanan & Privasi
- Kolom Kata Sandi – Masukkan kata sandi dengan tanda titik (•••)
Kolom Tersembunyi – Membuat kolom tidak terlihat tetapi tetap disertakan dalam pengajuan
Kualitas Data
Pangkas Spasi – Menghapus spasi berlebih dari awal dan akhir secara otomatis.
Aturan Validasi
- Jenis Validasi
- Tidak ada (teks apa pun)
- Surel ([email dilindungi])
- URL (https://example.com)
- Hanya huruf (hanya AZ)
- Hanya angka (0-9 saja)
- Alfanumerik (AZ dan 0-9)
- Pola Kustom (regex)
- Pola Kustom – Ekspresi reguler untuk validasi kustom (saat “Kustom” dipilih)
Jenis Input
- Tipe masukan
- Teks Biasa
- Cari (dengan tombol hapus)
- Telepon (tombol angka pada ponsel)
- URL (keyboard khusus untuk perangkat seluler)
Pemformatan Teks
- Transformasi Teks
- Tidak ada transformasi
- HURUF BESAR
- huruf kecil
- Kapitalisasi Huruf Pertama
- Kasus Judul
Logika Bersyarat
- Aktifkan Logika Bersyarat – Tampilkan/sembunyikan berdasarkan kondisi
- Tipe Logika
- Semua syarat harus dipenuhi (DAN)
- Syarat apa pun dapat dipenuhi (ATAU)
- Aturan Kondisi
- Tampilkan/Sembunyikan – Tindakan yang harus diambil
- Kolom – Kolom mana yang perlu diperiksa
- Operator – Sama dengan, Tidak sama dengan, Mengandung, Lebih besar dari, Lebih kecil dari, Kosong, Tidak kosong
- Nilai – Nilai perbandingan
- Beberapa Kondisi – Tambahkan aturan tanpa batas
Opsi Lanjutan
- Kelas CSS Kustom – Terapkan gaya kustom
- Atribut Aksesibilitas – Label dan deskripsi ARIA
Mengapa Memilih Kolom Input Teks Kami?
✅ Serbaguna – Dapat digunakan untuk nama, kode, kata sandi, dan segala sesuatu di antaranya
✅ Validasi Cerdas – 6+ pola validasi plus regex khusus
✅ Dioptimalkan untuk Perangkat Seluler – Papan ketik yang sesuai untuk setiap jenis input
✅ Pemformatan Otomatis – Transformasi teks terjadi secara otomatis
✅ Aman – Mode kata sandi melindungi informasi sensitif
✅ Data Bersih – Penghapusan spasi mencegah kesalahan umum
✅ Fleksibel – Kolom tersembunyi, nilai default, logika kondisional
✅ Ramah Pengguna – Pesan validasi yang jelas memandu pengguna
✅ Terintegrasi Sepenuhnya – Bekerja dengan lancar dengan semua fitur formulir
Pertanyaan yang Sering Diajukan
T: Apa perbedaan antara panjang min/max dan validasi?
Panjang minimum/maksimum mengontrol jumlah karakter yang diizinkan. Validasi mengontrol karakter mana yang diizinkan, seperti hanya huruf, hanya angka, atau format email.
T: Bisakah saya memvalidasi panjang DAN format sekaligus?
Ya. Gabungkan panjang minimum/maksimum dengan aturan validasi. Misalnya, tetapkan minimum 3, maksimum 15, dan validasi alfanumerik untuk kolom nama pengguna.
T: Bagaimana cara kerja mode kata sandi?
Mode kata sandi menyembunyikan karakter dengan titik, sama seperti kolom kata sandi biasa pada layar masuk.
T: Apa fungsi dari “trim whitespace”?
Fungsi ini menghapus spasi di awal dan akhir sebelum pengiriman sehingga spasi yang tidak disengaja tidak mengganggu validasi.
T: Bisakah saya membuat pola validasi khusus?
Ya. Gunakan “Pola Kustom” dan tambahkan ekspresi reguler untuk menerapkan struktur apa pun yang Anda butuhkan.
T: Bagaimana cara kerja transformasi teks?
Pengguna mengetik seperti biasa, dan sistem mengubah teks saat pengiriman, seperti mengubahnya menjadi Huruf Kapital Awal Judul atau HURUF BESAR.
T: Tipe input pencarian itu untuk apa?
Fitur ini menambahkan tombol hapus (X) bawaan sehingga pengguna dapat mengatur ulang kolom secara instan saat melakukan pencarian.
T: Mengapa menggunakan tipe input “tel”?
Di perangkat seluler, fitur ini membuka papan tombol numerik untuk memudahkan memasukkan angka seperti pada telepon.
T: Bisakah saya menggunakan logika kondisional dengan kolom teks?
Ya. Kondisi seperti “Berisi,” “Sama dengan,” atau “Kosong” memungkinkan Anda untuk menampilkan atau menyembunyikan kolom berdasarkan input pengguna.
T: Untuk apa kolom tersembunyi digunakan?
Mereka menyimpan data tanpa terlihat oleh pengguna, berguna untuk melacak metadata seperti tag UTM atau sumber rujukan.
T: Bisakah kolom teks digunakan untuk angka?
Ya, tetapi gunakan kolom Angka untuk perhitungan atau validasi numerik. Gunakan Teks dengan "Hanya Angka" ketika Anda memerlukan kode atau ID yang tidak boleh diperlakukan sebagai angka.
T: Seberapa akuratkah pola regex?
Regex dapat menerapkan pola yang sangat spesifik. Gunakan penguji regex jika Anda perlu membuat atau memverifikasi pola yang kompleks.
