HTML Form

Panduan Lengkap Membuat Form di Website

Form adalah salah satu elemen penting dalam pengembangan web. Dengan menggunakan form HTML, Anda dapat mengumpulkan data dari pengguna dan mengirimkannya ke server untuk diproses. 

Form HTML dapat digunakan untuk berbagai keperluan, mulai dari pendaftaran akun, pengisian data dan lain-lain. 

Pengertian Form HTML

Form HTML adalah elemen HTML yang digunakan untuk mengumpulkan data dari pengguna dan mengirimkannya ke server. Form ini dibungkus dalam tag <form>, dan dapat berisi berbagai elemen input seperti teks, tombol, pilihan dropdown, dan lainnya. 

Data yang dikirimkan melalui form dapat digunakan untuk berbagai keperluan, seperti registrasi pengguna, pengiriman komentar, hingga pengolahan transaksi.

Contoh Struktur Form HTML Dasar

Berikut adalah struktur dasar dari form HTML:

<form action="" method="POST">
 <!-- Elemen form di sini -->
</form>
  •  action: URL tujuan tempat data yang dikirim dari form akan diproses.
  •  method: Metode yang digunakan untuk mengirimkan data, bisa menggunakan GET atau POST

Method GET dan POST akan kamu pelajari pada form handling PHP.

Jenis Form HTML

HTML menyediakan berbagai elemen yang dapat digunakan di dalam form untuk mengumpulkan data dari pengguna. 

Berikut adalah beberapa elemen yang sering digunakan:

1. Input Text

Elemen <input> dengan tipe text digunakan untuk menerima input berupa teks dari pengguna. Biasanya digunakan untuk pengisian nama, alamat, atau informasi lainnya.

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

2. Input Password

Elemen <input> dengan tipe password digunakan untuk mengumpulkan kata sandi dari pengguna. Data yang dimasukkan akan disembunyikan dengan simbol titik (•).

<label for="password">Kata Sandi:</label>
<input type="password" id="password" name="password" placeholder="Masukkan kata sandi Anda">

3. Textarea

Elemen <textarea> digunakan untuk menerima input teks dalam bentuk area lebih besar, cocok untuk komentar atau pesan panjang.

<label for="message">Pesan:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Tulis pesan Anda di sini"></textarea>

4. Button

Elemen <button> digunakan untuk membuat tombol yang dapat digunakan untuk mengirimkan form atau menjalankan aksi tertentu.

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

5. Select dan Option

Elemen <select> digunakan untuk membuat dropdown menu, yang memungkinkan pengguna memilih satu atau lebih pilihan dari daftar.

<label for="country">Negara:</label>
<select id="country" name="country">
 <option value="ID">Indonesia</option>
 <option value="US">Amerika Serikat</option>
</select>

Cara Penulisan Form HTML

Form HTML ditulis dengan menempatkan elemen-elemen input di dalam tag <form>. Berikut adalah contoh form lengkap yang mencakup berbagai elemen:

<form action="/submit" method="POST">
 <label for="username">Nama Pengguna:</label>
 <input type="text" id="username" name="username" required>
 
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 
 <label for="message">Pesan:</label>
 <textarea id="message" name="message" required></textarea>
 
 <button type="submit">Kirim</button>
</form>

Penjelasan :

  • <label> : Memberikan label untuk setiap elemen input agar pengguna tahu informasi apa yang harus diisi.
  • required : Atribut yang memastikan bahwa kolom tersebut harus diisi sebelum form dikirimkan.
  • type="email" : Mengatur input agar hanya menerima alamat email yang valid.

Validasi Form HTML

Validasi form adalah cara untuk memastikan bahwa data yang dimasukkan oleh pengguna benar dan lengkap. 

HTML5 menyediakan beberapa atribut untuk melakukan validasi secara otomatis, seperti required, minlength, maxlength, dan pattern.
Contoh Validasi:

<input type="email" name="email" required>
<input type="text" name="username" minlength="5" required>
  • required : Menandakan bahwa input ini wajib diisi.
  • minlength : Membatasi jumlah karakter minimum yang harus dimasukkan.
  • pattern : Menggunakan ekspresi reguler untuk memvalidasi input (misalnya, untuk nomor telepon atau kode pos).


Kesimpulan

Form HTML adalah alat yang sangat penting untuk mengumpulkan data dari pengguna di website. 

Dengan memahami cara menulis form yang benar, serta mengimplementasikan validasi dan pengamanan yang tepat, Anda dapat membuat form yang efektif dan aman. 

Pastikan form yang Anda buat tidak hanya mudah digunakan oleh pengunjung, tetapi juga aman dan sesuai dengan standar web yang baik.