close

Pengantar Form dalam HTML: Struktur, Jenis Input, dan Contoh

HTML form adalah bagian penting dari pengembangan web yang memungkinkan pengguna berinteraksi dengan situs web dan mengirimkan data ke server. Form digunakan untuk berbagai tujuan, seperti mengumpulkan informasi pengguna form, memproses input pengguna, dan mengaktifkan tindakan pengguna di situs web. Pada artikel ini, kita akan menjelajahi atribut dan berbagai jenis kolom input, elemen pilihan, area teks, dan tombol yang biasa digunakan dalam HTML form.

Bidang Masukan

  • <input type="text">: Membuat kolom input teks tempat pengguna dapat memasukkan karakter alfanumerik.
  • <input type="password">: Menampilkan bidang input kata sandi yang menyamarkan karakter yang dimasukkan.
  • <input type="email">: Memberikan validasi email untuk kolom input yang memerlukan alamat email yang valid.
  • <input type="number">: Membatasi input ke nilai numerik saja.
  • <input type="checkbox">: Mewakili kotak centang yang dapat dipilih atau dibatalkan pilihannya oleh pengguna.
  • <input type="radio">: Mewakili tombol radio yang memungkinkan pengguna memilih satu opsi dari sekelompok opsi.
  • <input type="file">: Memungkinkan pengguna untuk memilih dan mengunggah file.
  • <input type="submit">: Menampilkan tombol yang mengirimkan form ketika diklik.
  • <input type="reset">: Menampilkan tombol yang mengatur ulang form ke keadaan awalnya.
  • <input type="date">: Menyediakan pemilih tanggal untuk memilih tanggal.
  • <input type="time">: Memungkinkan pengguna untuk memasukkan nilai waktu.

Pilih Elemen

  • <select>: Membuat menu tarik-turun dengan opsi yang dapat dipilih.
  • <option>: Menentukan opsi dalam menu tarik-turun, ditempatkan di dalam <select> tag.
  • <optgroup>: Mengelompokkan opsi terkait bersama-sama dalam menu tarik-turun.
  • <select multiple>: Memungkinkan pengguna untuk memilih beberapa opsi secara bersamaan dengan menahan tombol Ctrl(atau tombol Command di Mac) sambil mengklik.

Area teks

<textarea>: Membuat kolom input teks multibaris tempat pengguna dapat memasukkan dan mengedit blok teks yang lebih panjang. Itu dapat diubah ukurannya dan dikonfigurasikan dengan atribut seperti rows dan cols untuk menentukan dimensinya.

Tombol

<button>: Merupakan tombol yang dapat memicu berbagai tindakan dalam form. Itu dapat digunakan untuk mengirimkan form, per form fungsi JavaScript, atau menavigasi ke halaman lain.

Contoh penggunaan:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Contoh ini menampilkan penggunaan berbagai form elemen, termasuk input bidang, textarea, checkbox, select dropdown dan submit tombol. Jangan ragu untuk menyesuaikan form elemen dan atribut berdasarkan kebutuhan spesifik Anda.