HTML Dasar #12 - Input Text, Password, Email, Number, dan Textarea

byFerdian Rahabista -
0

Di artikel sebelumnya, kita sudah belajar tentang form dan method GET vs POST. Sekarang saatnya mengenal berbagai jenis input yang bisa kamu gunakan di dalam form. Setiap jenis input punya fungsi dan kegunaan yang berbeda!

Apa Itu Elemen Input?

Elemen <input> adalah cara pengguna memasukkan data ke dalam form. HTML menyediakan banyak jenis input yang bisa disesuaikan dengan kebutuhan.

Aturan Penting: Semua elemen input WAJIB memiliki atribut name agar datanya bisa dikenali oleh server saat form dikirim. Tanpa name, data input tidak akan terkirim!

Jenis-jenis Input yang Akan Kita Pelajari

Jenis Input Kode Kegunaan
Teks biasa type="text" Nama, alamat, judul, dll
Password type="password" Kata sandi (ditampilkan sebagai •••)
Email type="email" Validasi format email otomatis
Angka type="number" Input angka (dengan tombol ↑↓)
Textarea <textarea> Teks panjang (komentar, pesan)

1. Input Text (type="text")

Input text adalah jenis yang paling sering digunakan. Cocok untuk data seperti nama, alamat, judul, dll.

<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">

Contoh langsung:

Atribut penting untuk input text:

  • placeholder → teks contoh yang muncul sebelum diisi
  • maxlength → batas maksimal karakter
  • minlength → batas minimal karakter
  • size → lebar input (dalam karakter)
  • readonly → hanya bisa dibaca, tidak bisa diubah
  • disabled → dinonaktifkan (tidak bisa diisi)

Contoh lengkap atribut text:

<input type="text" name="username" 
       placeholder="Minimal 3 karakter" 
       maxlength="20" 
       minlength="3" 
       required>

2. Input Password (type="password")

Input password mirip dengan text, tapi karakter yang diketik ditampilkan sebagai bullet (•••) untuk menjaga privasi.

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

Contoh langsung:

Coba ketik sesuatu — teksnya berubah jadi bullet (•••)

Tips Keamanan Password:
  • Gunakan atribut minlength="8" untuk memastikan password minimal 8 karakter
  • Biasanya perlu input "Konfirmasi Password" untuk memastikan tidak salah ketik
  • Jangan pernah menggunakan placeholder untuk menampilkan petunjuk password yang sensitif

3. Input Email (type="email")

Input email memiliki validasi otomatis dari browser — akan error jika format bukan email (misal lupa @ atau .com).

<label for="email">Alamat Email:</label>
<input type="email" id="email" name="email" placeholder="contoh@email.com" required>

Contoh langsung:

Coba ketik tanpa @ atau tanpa .com, lalu klik submit (jika ada form) — browser akan memberi peringatan!

Kelebihan type="email":

  • Validasi format email otomatis di browser
  • Di HP, keyboard akan menampilkan tombol @ dan .com
  • Browser menyimpan riwayat email yang pernah diinput

4. Input Number (type="number")

Input number khusus untuk angka. Muncul tombol panah ↑↓ untuk menambah/mengurangi angka.

<label for="umur">Umur:</label>
<input type="number" id="umur" name="umur" min="1" max="120" value="17">

Contoh langsung:

Coba klik tombol panah ↑↓ atau ketik angka langsung

Atribut khusus untuk number:

  • min → nilai minimum yang diizinkan
  • max → nilai maksimum yang diizinkan
  • step → kelipatan angka (default 1, bisa 0.5, 5, 10, dll)
  • value → nilai default

Contoh number dengan step desimal:

<label for="rating">Rating (0 - 5):</label>
<input type="number" id="rating" name="rating" min="0" max="5" step="0.5" value="3">

Bisa naik 0.5 setiap kali klik panah

5. Textarea (Input Teks Panjang)

<textarea> berbeda dengan <input>. Ini untuk teks yang panjang seperti komentar, pesan, deskripsi, atau alamat lengkap. Pengguna bisa menekan Enter untuk membuat baris baru.

<label for="pesan">Pesan / Komentar:</label>
<textarea id="pesan" name="pesan" rows="5" cols="50" placeholder="Tulis pesan kamu di sini..."></textarea>

Contoh langsung:

Coba tekan Enter untuk membuat baris baru — textarea bisa multi-baris!

Atribut penting untuk textarea:

  • rows → tinggi textarea (dalam jumlah baris teks)
  • cols → lebar textarea (dalam jumlah karakter)
  • placeholder → teks contoh di dalam textarea
  • maxlength → batas maksimal karakter
  • readonly → hanya bisa dibaca
  • wrap → bagaimana teks dibungkus (hard, soft, off)

Studi Kasus: Form Kontak Lengkap

Berikut contoh form kontak yang menggabungkan semua jenis input yang sudah dipelajari:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Kontak - Hubungi Kami</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        .contact-card {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }
        .header p {
            opacity: 0.9;
            font-size: 14px;
        }
        form {
            padding: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        .required {
            color: #e74c3c;
        }
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
            transition: border 0.3s;
            font-family: inherit;
        }
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        .row-2 {
            display: flex;
            gap: 20px;
        }
        .row-2 .form-group {
            flex: 1;
        }
        button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
        }
        .info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 13px;
            color: #666;
            border-left: 4px solid #667eea;
        }
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>

    <div class="contact-card">
        <div class="header">
            <h1>Hubungi Kami</h1>
            <p>Isi form di bawah untuk mengirim pesan kepada kami</p>
        </div>
        
        <form action="#" method="POST">
            <div class="row-2">
                <div class="form-group">
                    <label>Nama Lengkap <span class="required">*</span></label>
                    <input type="text" name="nama" placeholder="Masukkan nama lengkap" required>
                </div>
                
                <div class="form-group">
                    <label>Usia</label>
                    <input type="number" name="usia" min="1" max="120" placeholder="Umur">
                </div>
            </div>
            
            <div class="form-group">
                <label>Alamat Email <span class="required">*</span></label>
                <input type="email" name="email" placeholder="contoh@email.com" required>
            </div>
            
            <div class="form-group">
                <label>Kategori Pesan <span class="required">*</span></label>
                <select name="kategori" required>
                    <option value="">Pilih kategori</option>
                    <option value="pertanyaan">Pertanyaan Umum</option>
                    <option value="saran">Saran & Masukan</option>
                    <option value="keluhan">Keluhan</option>
                    <option value="kerjasama">Kerjasama</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>Pesan / Komentar <span class="required">*</span></label>
                <textarea name="pesan" placeholder="Tulis pesan kamu di sini... minimal 10 karakter" rows="5" minlength="10" required></textarea>
            </div>
            
            <button type="submit">Kirim Pesan</button>
            
            <div class="info">
                Informasi Input:
                <ul style="margin-top: 8px; margin-left: 20px;">
                    <li><strong>Nama</strong> → type="text" (teks biasa)</li>
                    <li><strong>Usia</strong> → type="number" dengan min/max</li>
                    <li><strong>Email</strong> → type="email" (validasi otomatis)</li>
                    <li><strong>Pesan</strong> → &lt;textarea&gt; (teks panjang)</li>
                </ul>
            </div>
        </form>
    </div>

</body>
</html>

Tabel Perbandingan Jenis Input

Tipe Kelebihan Kekurangan Contoh
text Fleksibel, paling umum Tidak ada validasi otomatis Nama, alamat, judul
password Privasi terjaga (bullet) Pengguna bisa lupa yang diketik Kata sandi
email Validasi format otomatis Validasi tidak sempurna Alamat email
number Tombol panah, validasi angka Tidak bisa untuk desimal kompleks Umur, harga, rating
textarea Bisa banyak baris, tekan Enter Memakan tempat lebih besar Komentar, deskripsi

Studi Kasus: Form Registrasi dengan Semua Validasi

<div style="max-width: 500px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
    <h2>Form Registrasi</h2>
    
    <form action="#" method="POST">
        <div style="margin-bottom: 15px;">
            <label>Username:</label>
            <input type="text" name="username" 
                   placeholder="Minimal 3 karakter" 
                   minlength="3" 
                   maxlength="20" 
                   required 
                   style="width: 100%; padding: 8px; margin-top: 5px;">
        </div>
        
        <div style="margin-bottom: 15px;">
            <label>Email:</label>
            <input type="email" name="email" 
                   placeholder="contoh@email.com" 
                   required 
                   style="width: 100%; padding: 8px; margin-top: 5px;">
        </div>
        
        <div style="margin-bottom: 15px;">
            <label>Password:</label>
            <input type="password" name="password" 
                   placeholder="Minimal 8 karakter" 
                   minlength="8" 
                   required 
                   style="width: 100%; padding: 8px; margin-top: 5px;">
        </div>
        
        <div style="margin-bottom: 15px;">
            <label>Konfirmasi Password:</label>
            <input type="password" name="confirm_password" 
                   placeholder="Ketik ulang password" 
                   required 
                   style="width: 100%; padding: 8px; margin-top: 5px;">
        </div>
        
        <div style="margin-bottom: 15px;">
            <label>Umur:</label>
            <input type="number" name="umur" 
                   min="13" max="100" 
                   value="18" 
                   style="width: 100%; padding: 8px; margin-top: 5px;">
        </div>
        
        <div style="margin-bottom: 15px;">
            <label>Tentang Kamu:</label>
            <textarea name="bio" 
                      rows="4" 
                      placeholder="Ceritakan sedikit tentang dirimu..." 
                      maxlength="500"
                      style="width: 100%; padding: 8px; margin-top: 5px;"></textarea>
        </div>
        
        <button type="submit" style="background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">
            Daftar Sekarang
        </button>
    </form>
</div>

Kesalahan Umum Pemula

  • Lupa atribut name → Data tidak terkirim ke server!
  • Menggunakan placeholder sebagai pengganti label → Buruk untuk aksesibilitas (screen reader)
  • Tidak menggunakan required untuk field wajib → Pengguna bisa submit form kosong
  • Lupa <label> dikaitkan dengan id atau for → Tidak bisa klik label untuk fokus ke input
  • Menggunakan type="number" untuk nomor telepon → Nomor telepon bisa mulai dengan 0, pakai type="tel" saja
Perhatian: Jangan gunakan type="number" untuk:
  • Nomor telepon (bisa diawali 0 atau +62)
  • Nomor kartu kredit (bisa panjang)
  • Kode pos (bisa diawali 0)
  • Nomor identitas (KTP, SIM, dll)
Untuk kasus di atas, gunakan type="text" dengan validasi tambahan.

Latihan Singkat

  1. Buat file HTML baru dengan judul "Form Biodata Diri"
  2. Form harus memiliki field:
    • Nama lengkap (type="text")
    • Email (type="email")
    • Password (type="password")
    • Usia (type="number", min 1, max 120)
    • Alamat lengkap (textarea)
  3. Semua field wajib diisi (required)
  4. Gunakan CSS sederhana agar form terlihat rapi
  5. Simpan dan buka di browser, coba isi dan submit

Intisari Hari Ini

  • type="text" → teks biasa (nama, alamat, judul)
  • type="password" → teks tersembunyi (kata sandi)
  • type="email" → validasi format email otomatis
  • type="number" → input angka dengan tombol ↑↓
  • <textarea> → teks panjang multi-baris
  • WAJIB pakai atribut name agar data terkirim
  • Gunakan required untuk field wajib
  • Gunakan placeholder sebagai contoh, bukan pengganti label
Tantangan Akhir Pekan: Buat sebuah Form Pemesanan Pizza Online yang lengkap! Form harus memiliki:
  • Nama pemesan (text)
  • Email dan nomor telepon (email dan tel)
  • Jumlah pizza (number, min 1, max 10)
  • Alamat pengiriman (textarea)
  • Catatan tambahan (textarea, opsional)
  • Semua field wajib kecuali catatan tambahan
  • Gunakan CSS yang menarik (warna, border, efek hover)
  • Tambahkan kotak info yang menjelaskan mengapa setiap field menggunakan tipe input tertentu
Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #11 - Membuat Form (form) dan Method GET vs POST
Artikel Selanjutnya: HTML Dasar #13 - Radio Button, Checkbox, dan Select Dropdown

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال