inputformteksMenengah3 mnt baca

Input Teks: text, email, password, number

Kuasai input satu baris: text, password, email, number, tel, url, search.

Kenapa Satu Tag Punya Banyak Tipe

Bayangkan formulir pendaftaran lomba di sekolah. Ada kolom nama, kolom tanggal lahir, kolom nomor HP, kolom tanda tangan. Setiap kolom mengharapkan jenis jawaban yang berbeda, dan panitia tahu cara memeriksa tiap jenisnya. Tag <input> bekerja dengan prinsip yang sama. Satu tag, tapi atribut type mengubah perilakunya: cara browser menampilkan, memvalidasi, bahkan keyboard apa yang muncul di HP. Masalah yang dipecahkan: tanpa tipe khusus, semua data diperlakukan sebagai teks mentah, dan kamu harus menulis validasi sendiri untuk email, angka, dan URL. Dengan tipe yang tepat, browser memberimu validasi dan keyboard yang cocok secara gratis.

Contoh 1: Tiga Input Paling Sering Dipakai

html

<form action="/daftar" method="post">
  <p>Nama: <input type="text" name="nama" placeholder="Nama lengkap" /></p>
  <p>Email: <input type="email" name="email" placeholder="[email protected]" /></p>
  <p>Sandi: <input type="password" name="sandi" /></p>
  <button type="submit">Daftar</button>
</form>

type="text" untuk tulisan bebas, type="email" meminta format email yang valid (browser menolak bukanemail yang tanpa @), dan type="password" menyamarkan ketikan dengan titik-titik agar tidak diintip orang di sebelahmu.

Contoh 2: Form Profil yang Lebih Lengkap

html

<form action="/profil" method="post">
  <p>Nama: <input type="text" name="nama" placeholder="cth: Andi Pratama" /></p>
  <p>Umur: <input type="number" name="umur" min="17" max="99" /></p>
  <p>HP: <input type="tel" name="hp" placeholder="08xx-xxxx-xxxx" /></p>
  <p>Website: <input type="url" name="web" placeholder="https://" /></p>
  <p>Cari teman: <input type="search" name="q" placeholder="Ketik nama..." /></p>
  <button type="submit">Simpan</button>
</form>

Bonus tiap tipe paling terasa di HP: number memunculkan keyboard angka plus tombol naik turun, tel memunculkan keypad telepon, email menambahkan tombol @ dan titik di keyboard, search memberi tombol hapus (x) bawaan, dan url menambahkan tombol / dan .com. Semua ini gratis, tanpa satu baris pun JavaScript.

placeholder vs value vs label: Jangan Tertukar

placeholder: teks contoh abu-abu yang hilang saat pengguna mengetik. Hanya petunjuk, bukan pengganti label.
value: nilai awal yang ikut terkirim kalau tidak diubah. Cocok untuk nilai default.
label: nama resmi field yang selalu terlihat. Placeholder yang hilang membuat pengguna lupa mereka sedang mengisi apa, jadi label tetap wajib dipasang.

Kesalahan Umum

1. Semua input pakai type="text". Bisa jalan, tapi kamu membuang validasi dan keyboard gratis dari browser. Email yang salah format lolos begitu saja, dan pengguna HP harus berjuang dengan keyboard huruf hanya untuk mengetik angka.

html

<!-- SALAH: validasi manual, keyboard salah di HP -->
<input type="text" name="umur" />

<!-- BENAR: browser bantu validasi dan keyboard -->
<input type="number" name="umur" min="1" max="120" />

2. Placeholder dijadikan label. Begitu pengguna mengetik, petunjuknya lenyap. Kalau ia lupa konteks fieldnya, tidak ada cara melihatnya lagi kecuali menghapus ketikan. Selalu pasang <label> yang terlihat permanen.

Catatan teknis: Validasi bawaan browser (type="email", min, max) hanya untuk kenyamanan pengguna, bukan keamanan. Data dari browser selalu bisa dipalsukan, jadi server wajib memvalidasi ulang semuanya.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Profil

Buat form profil dengan: text (nama, placeholder contoh), email, password, number (umur, min 17 max 99), tel (HP), dan url (website, opsional). Tiap input punya name. Memilih type yang tepat adalah kebiasaan kecil yang langsung menaikkan kualitas form: validasi gratis, keyboard yang benar di HP, dan data yang lebih bersih di server.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Profil</title>
</head>
<body>
  <h1>Edit Profil</h1>
  <form>
    <!-- enam input di sini -->
  </form>
</body>
</html>

Open Sandbox