Selamat datang kembali di seri “Belajar HTML”! Pada tutorial sebelumnya (#11), kita telah mempelajari cara membangun struktur dasar sebuah formulir menggunakan tag seperti <form>, <input>, dan <textarea>. Kini, saatnya kita melangkah lebih jauh untuk memberikan “kecerdasan” dan kontrol lebih pada formulir kita dengan mengenal berbagai atribut form HTML.

Atribut adalah kata kunci khusus yang memberikan informasi tambahan atau fungsionalitas pada sebuah elemen HTML. Dalam konteks form, atribut adalah kunci untuk membuat formulir yang interaktif, mudah digunakan, dan lebih aman.

1. Atribut Esensial (Review & Pendalaman)

Kita sudah sedikit membahas ini, tapi mari kita perdalam perbedaannya karena ini sangat fundamental.

• name: Atribut ini wajib ada pada setiap elemen input yang datanya ingin kita kirim ke server. Server menggunakan nilai dari atribut name sebagai “kunci” atau “variabel” untuk mengidentifikasi data yang masuk.
• id: Atribut ini berfungsi sebagai pengenal unik untuk sebuah elemen di dalam halaman. Kegunaan utamanya adalah untuk dihubungkan dengan tag <label> (melalui atribut for) dan untuk dimanipulasi menggunakan JavaScript. Data dari id tidak dikirim ke server.

Poin Penting: Gunakan name untuk keperluan pengiriman data ke server. Gunakan id untuk keperluan interaksi di sisi klien (seperti label dan JavaScript). Seringkali, untuk konsistensi, name dan id diberi nilai yang sama.

2. Atribut Interaksi & Tampilan

Atribut-atribut ini memengaruhi bagaimana input ditampilkan dan bagaimana pengguna berinteraksi dengannya.

• value: Menentukan nilai awal (default) dari sebuah elemen input. Untuk type="text", ini adalah teks yang muncul di dalam kotak. Untuk type="submit", ini adalah teks yang tampil pada tombol.
  HTML

  <input type="text" name="kota" value="Malang">
  <input type="submit" value="Kirim Pendaftaran">
  

• placeholder: Menampilkan teks petunjuk (contohnya, “Masukkan nama lengkap Anda”) di dalam sebuah kolom input. Teks ini akan otomatis hilang ketika pengguna mulai mengetik. Ini sangat baik untuk meningkatkan pengalaman pengguna (UX).
  HTML

  <input type="email" name="user_email" placeholder="contoh@domain.com">
  

• size: Mengatur lebar sebuah kolom input berdasarkan jumlah karakter. Perlu dicatat, ini hanya memengaruhi tampilan visual, bukan batas maksimal karakter yang bisa dimasukkan.
  HTML

  <input type="text" name="kodepos" size="5">
  

• maxlength: Mengatur jumlah maksimal karakter yang dapat dimasukkan oleh pengguna. Ini adalah batasan yang sebenarnya.
  HTML

  <input type="text" name="kodepos" size="5" maxlength="5">
  

3. Atribut Status & Kondisi

Atribut ini mengatur apakah sebuah elemen input bisa digunakan atau tidak. Atribut ini tidak memerlukan nilai (cukup tuliskan namanya saja).

• disabled: Menonaktifkan elemen input sepenuhnya. Pengguna tidak bisa mengklik, mengubah, atau berinteraksi dengannya. Data dari elemen yang disabled tidak akan dikirim saat formulir di-submit.
  HTML

  <input type="text" name="user_id" value="ID-12345" disabled>
  

• readonly: Membuat elemen input tidak bisa diubah oleh pengguna, tetapi mereka masih bisa memilih dan menyalin isinya. Data dari elemen yang readonly tetap akan dikirim saat formulir di-submit.
  HTML

  <input type="text" name="email_terdaftar" value="user@example.com" readonly>
  

• checked: Digunakan pada type="radio" atau type="checkbox" untuk memberikan pilihan default yang sudah tercentang saat halaman dimuat.
  HTML

  
  <input type="radio" name="gender" value="pria" checked> Pria
  <input type="radio" name="gender" value="wanita"> Wanita
  

4. Atribut Validasi Bawaan HTML5

HTML5 memperkenalkan atribut validasi yang sangat kuat, memungkinkan browser untuk memeriksa input pengguna tanpa memerlukan JavaScript.

• required: Mewajibkan pengguna untuk mengisi sebuah kolom input sebelum formulir bisa dikirim. Jika kosong, browser akan menampilkan pesan peringatan.
  HTML

  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama_lengkap" required>
  

• pattern: Menentukan sebuah pola (menggunakan Regular Expression atau Regex) yang harus dipenuhi oleh nilai input. Sangat berguna untuk format spesifik seperti nomor telepon, kode pos, atau username.
  HTML

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" pattern="[a-z0-9]{5,15}" title="Username harus terdiri dari 5-15 karakter huruf kecil dan angka.">
  

• min dan max: Menentukan nilai minimum dan maksimum untuk input dengan tipe number, range, date, dll.
  HTML

  <label for="usia">Usia (17-60):</label>
  <input type="number" id="usia" name="usia" min="17" max="60">
  

• step: Menentukan interval angka yang valid untuk input type="number".
  HTML

  <label for="kuantitas">Kuantitas (kelipatan 5):</label>
  <input type="number" id="kuantitas" name="kuantitas" step="5">
  

5. Atribut Tambahan pada Tag <form>

Selain action dan method, tag <form> juga memiliki atribut berguna lainnya.

• autocomplete: Mengontrol apakah browser boleh secara otomatis mengisi kolom formulir berdasarkan input pengguna sebelumnya. Nilainya bisa on (default) atau off. Matikan (off) untuk kolom-kolom sensitif.
  HTML

  <form action="/login" method="post" autocomplete="off">
  

• novalidate: Jika atribut ini ada, maka semua validasi bawaan HTML5 (required, pattern, dll.) pada formulir tersebut akan diabaikan. Ini berguna saat tahap pengembangan atau jika Anda ingin menangani semua validasi menggunakan JavaScript kustom.
  HTML

  <form action="/test" method="post" novalidate>
  

Contoh Praktis Formulir Lanjutan

Mari kita gabungkan beberapa atribut yang telah kita pelajari ke dalam sebuah formulir pendaftaran yang lebih lengkap.

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Formulir Pendaftaran Lanjutan</title>
</head>
<body>

    <h2>Formulir Pendaftaran Workshop</h2>

    <form action="/proses-workshop" method="post" autocomplete="on">
        <fieldset>
            <legend>Data Peserta</legend>
            <p>
                <label for="nama">Nama Lengkap:</label><br>
                <input type="text" id="nama" name="nama_peserta" placeholder="Contoh: Budi Santoso" size="30" required>
            </p>
            <p>
                <label for="email">Email:</label><br>
                <input type="email" id="email" name="email_peserta" placeholder="email@Anda.com" size="30" required>
            </p>
            <p>
                <label for="no_peserta">Nomor Peserta:</label><br>
                <input type="text" id="no_peserta" name="nomor_peserta" value="WS-2025-08-001" readonly>
            </p>
            <p>
                <label for="usia">Usia Anda:</label><br>
                <input type="number" id="usia" name="usia_peserta" min="18" max="99" required>
            </p>
        </fieldset>

        <fieldset>
            <legend>Pilihan Workshop</legend>
            <p>
                <label>Pilih salah satu:</label><br>
                <input type="radio" id="html" name="workshop" value="html" required> 
                <label for="html">Dasar HTML & CSS</label><br>

                <input type="radio" id="js" name="workshop" value="javascript"> 
                <label for="js">Dasar JavaScript</label><br>

                <input type="radio" id="php" name="workshop" value="php" disabled> 
                <label for="php">Dasar PHP (Slot Penuh)</label>
            </p>
        </fieldset>
        
        <p>
            <input type="checkbox" id="setuju" name="setuju_syarat" required>
            <label for="setuju">Saya menyetujui semua syarat dan ketentuan yang berlaku.</label>
        </p>

        <input type="submit" value="Daftarkan Diri">
    </form>

</body>
</html>

Kesimpulan

Atribut adalah napas dari formulir HTML. Tanpa mereka, formulir hanyalah kerangka kosong. Dengan memahami dan menggunakan atribut-atribut seperti placeholder, required, disabled, dan pattern, Anda dapat secara signifikan meningkatkan fungsionalitas, keamanan, dan kemudahan penggunaan formulir Anda langsung dari HTML.

Teruslah bereksperimen dengan berbagai atribut ini untuk melihat efeknya. Selamat mencoba!