Cara Membuat Form pada HTML

Formulir HTML merupakan elemen penting dalam sebuah website yang memungkinkan pengguna untuk memasukkan data dan mengirimkan informasi ke server. Formulir dapat digunakan untuk berbagai keperluan, seperti melakukan pembelian, mengisi survei, mendaftar akun, atau mengirimkan kontak. Artikel ini akan membahas cara membuat formulir HTML dengan lengkap, meliputi berbagai jenis input, metode pengiriman, dan cara memproses data yang dikirimkan.

1. Dasar-dasar Formulir HTML

Formulir HTML dibuat dengan tag <form>. Tag ini memiliki beberapa atribut penting yang menentukan fungsionalitas dan perilaku formulir, seperti:

action: Menentukan URL tempat data formulir akan dikirimkan.
method: Menentukan metode HTTP yang digunakan untuk mengirimkan data, umumnya GET atau POST.
enctype: Menentukan tipe data yang digunakan untuk mengirimkan data, biasanya application/x-www-form-urlencoded untuk data teks dan multipart/form-data untuk data file.

Berikut contoh sederhana formulir HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Formulir</title>
</head>
<body>

  <form action="proses.php" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

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

</body>
</html>

Kode ini membuat formulir sederhana dengan dua input: nama dan email. Atribut required pada input menandakan bahwa kedua field harus diisi. Tombol submit akan mengirimkan data formulir ke file proses.php dengan metode POST.

2. Jenis Input Formulir

Formulir HTML memiliki berbagai jenis input yang dapat digunakan untuk mengumpulkan berbagai jenis data dari pengguna. Berikut beberapa jenis input yang umum digunakan:

text: Input teks biasa, digunakan untuk mengumpulkan teks singkat seperti nama, alamat, atau kata sandi.
email: Input khusus untuk alamat email, akan melakukan validasi dasar terhadap format email yang dimasukkan.
password: Input khusus untuk kata sandi, menyembunyikan teks yang diketik pengguna dengan asterisk.
number: Input khusus untuk angka, dapat dikonfigurasi dengan batasan nilai minimum dan maksimum.
date: Input khusus untuk tanggal, memudahkan pengguna untuk memilih tanggal.
checkbox: Input kotak centang, memungkinkan pengguna memilih beberapa opsi.
radio: Input tombol radio, memungkinkan pengguna memilih hanya satu opsi dari beberapa pilihan.
file: Input untuk mengunggah file, biasanya digunakan bersama dengan atribut enctype="multipart/form-data".
textarea: Input untuk memasukkan teks yang lebih panjang, seperti komentar atau pesan.
select: Input dropdown, memungkinkan pengguna memilih satu opsi dari daftar pilihan.

Berikut contoh penggunaan beberapa jenis input:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Jenis Input</title>
</head>
<body>

  <form action="proses.php" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="usia">Usia:</label>
    <input type="number" id="usia" name="usia" min="18" max="100" required>

    <label for="jenis_kelamin">Jenis Kelamin:</label><br>
    <input type="radio" id="pria" name="jenis_kelamin" value="pria">
    <label for="pria">Pria</label><br>
    <input type="radio" id="wanita" name="jenis_kelamin" value="wanita">
    <label for="wanita">Wanita</label><br>

    <label for="hobi">Hobi:</label><br>
    <input type="checkbox" id="membaca" name="hobi" value="membaca">
    <label for="membaca">Membaca</label><br>
    <input type="checkbox" id="bermain_game" name="hobi" value="bermain_game">
    <label for="bermain_game">Bermain Game</label><br>
    <input type="checkbox" id="menulis" name="hobi" value="menulis">
    <label for="menulis">Menulis</label><br>

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

</body>
</html>

Kode ini menunjukkan contoh penggunaan input text, email, number, radio, dan checkbox. Setiap input memiliki label yang jelas untuk memberikan informasi kepada pengguna tentang jenis data yang diharapkan.

3. Metode Pengiriman Formulir

Data formulir dapat dikirimkan ke server menggunakan metode HTTP GET atau POST. Perbedaan utama antara kedua metode ini adalah cara data dikirimkan dan bagaimana data tersebut ditampilkan di URL.

GET: Data formulir ditambahkan ke URL sebagai parameter query, yang berarti data akan terlihat di URL. Metode ini lebih cocok untuk mengirimkan data yang kecil dan tidak sensitif, seperti pencarian atau filter.
POST: Data formulir dikirimkan melalui badan permintaan, yang berarti data tidak ditampilkan di URL. Metode ini lebih cocok untuk mengirimkan data yang besar atau sensitif, seperti informasi pribadi atau data pembayaran.

Berikut contoh penggunaan kedua metode:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Metode Pengiriman</title>
</head>
<body>

  <form action="proses.php" method="get">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required>

    <button type="submit">Kirim (GET)</button>
  </form>

  <form action="proses.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Kirim (POST)</button>
  </form>

</body>
</html>

Kode ini menunjukkan dua formulir dengan metode pengiriman yang berbeda. Formulir pertama menggunakan GET, sedangkan formulir kedua menggunakan POST. Saat data dikirim, data formulir pertama akan terlihat di URL, sedangkan data formulir kedua tidak akan terlihat di URL.

4. Memproses Data Formulir

Setelah data formulir dikirimkan ke server, data tersebut harus diproses. Cara memproses data tergantung pada bahasa pemrograman server yang digunakan. Umumnya, data formulir akan diakses melalui variabel server, seperti $_GET untuk metode GET dan $_POST untuk metode POST.

Berikut contoh sederhana cara memproses data formulir di PHP:

<?php
  // Menerima data dari formulir
  $nama = $_POST['nama'];
  $email = $_POST['email'];

  // Memproses data
  echo "Nama: " . $nama . "<br>";
  echo "Email: " . $email . "<br>";

  // Menampilkan pesan sukses
  echo "Data berhasil dikirim.";
?>

Kode ini menampilkan data yang dikirimkan dari formulir HTML ke browser. Data nama dan email diakses melalui variabel $_POST['nama'] dan $_POST['email'].

FAQ

1. Apa perbedaan antara atribut name dan id pada input formulir?

Atribut name digunakan untuk mengidentifikasi input formulir saat data dikirimkan ke server. Atribut id digunakan untuk mengidentifikasi input formulir di dalam HTML, seperti untuk digunakan dengan JavaScript atau CSS.

2. Bagaimana cara membuat input formulir yang hanya menerima angka?

Gunakan jenis input number. Anda juga dapat menambahkan atribut min dan max untuk membatasi nilai minimum dan maksimum yang dapat dimasukkan.

3. Bagaimana cara mengirimkan file melalui formulir HTML?

Gunakan jenis input file dan atribut enctype="multipart/form-data" pada tag <form>.

4. Bagaimana cara memvalidasi data formulir sebelum dikirimkan?

Anda dapat memvalidasi data formulir menggunakan JavaScript atau server-side scripting. JavaScript memungkinkan validasi real-time, sedangkan server-side scripting memvalidasi data setelah data dikirimkan ke server.

Post Views: 26