Sign in Subscribe
HTML

Tambah Interaksi di Formulir dengan Label, Text Area, dan Button

Tambah Interaksi di Formulir dengan Label, Text Area, dan Button
Photo by Amokrane Ait-Kaci / Unsplash

Mau bikin formulir di website yang interaktif dan mudah digunakan? Yuk, kita bahas beberapa elemen penting di HTML: <label>, <textarea>, dan <button>.

1. <label>

Elemen <label> digunakan untuk memberi keterangan pada elemen form lainnya, seperti input atau textarea. Dengan menggunakan <label>, pengguna bisa mengklik teks label untuk fokus ke elemen form yang bersangkutan, meningkatkan aksesibilitas dan kenyamanan.

Contoh penggunaan:

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

Di sini, atribut for pada <label> dihubungkan dengan atribut id pada <input>, sehingga klik pada teks "Nama:" akan memfokuskan kursor ke kolom input nama.

2. <textarea>

Untuk input teks yang panjang atau multiline, gunakan elemen <textarea>. Elemen ini memungkinkan pengguna untuk mengetik lebih dari satu baris teks.

Contoh penggunaan:

<label for="alamat">Alamat:</label>
<textarea id="alamat" name="alamat" rows="4" cols="50" placeholder="Masukkan alamat lengkap Anda"></textarea>

Atribut rows dan cols menentukan ukuran area teks, sedangkan placeholder memberikan petunjuk kepada pengguna tentang apa yang harus ditulis.

3. <button>

Elemen <button> digunakan untuk membuat tombol dalam formulir. Tombol ini bisa memiliki berbagai fungsi, seperti mengirim data formulir atau menjalankan skrip JavaScript.

Contoh penggunaan:

<button type="submit">Kirim</button>

Dengan type="submit", tombol ini akan mengirimkan data formulir ke server saat diklik.

Contoh Formulir Lengkap:

Berikut adalah contoh formulir pendaftaran sederhana yang menggunakan elemen-elemen di atas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Formulir Pendaftaran</title>
</head>
<body>
  <h2>Formulir Pendaftaran</h2>
  <form action="proses.php" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Masukkan email Anda" required><br><br>

    <label for="alamat">Alamat:</label>
    <textarea id="alamat" name="alamat" rows="4" cols="50" placeholder="Masukkan alamat lengkap Anda" required></textarea><br><br>

    <button type="submit">Daftar</button>
  </form>
</body>
</html>

Dalam contoh ini, formulir meminta pengguna untuk memasukkan nama, email, dan alamat mereka. Setelah semua kolom diisi, pengguna dapat mengklik tombol "Daftar" untuk mengirimkan data.

Tips Tambahan:

  • Validasi Data: Pastikan untuk memvalidasi data yang dimasukkan pengguna, baik di sisi klien (menggunakan JavaScript) maupun di sisi server, untuk menjaga keamanan dan integritas data.
  • Desain Responsif: Pastikan formulir kamu tampil dengan baik di berbagai perangkat dengan menggunakan CSS yang responsif.

Dengan memahami dan menggunakan elemen-elemen ini, kamu dapat membuat formulir yang interaktif dan mudah digunakan di website kamu.

Read next