Membuat Form pada HTML

Membuat Form Pada HTML

Form pada HTML digunakan untuk mengumpulkan data dari pengguna melalui elemen seperti input, checkbox, radio button, textarea, dan lainnya. Data yang dimasukkan melalui form dapat dikirimkan ke server untuk diproses lebih lanjut.

1. Struktur Dasar Form

Form dibuat menggunakan tag <form>. Tag ini digunakan untuk membungkus elemen-elemen form seperti input teks, tombol kirim, dan lainnya. Atribut yang penting dalam tag <form> adalah:

• action: Menentukan URL atau lokasi tujuan pengiriman data form.
• method: Menentukan metode pengiriman data (biasanya menggunakan "GET" atau "POST").

Struktur Dasar Form:

<form action="proses.php" method="POST">
    <!-- Elemen form di sini -->
</form>

2. Elemen Input dalam Form

Input Teks

Input teks digunakan untuk menerima input berupa teks dari pengguna.

<form action="proses.php" method="POST">
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Kirim">
</form>

• <label>: Memberikan teks label untuk elemen input.
• <input type="text">: Menentukan bahwa input yang diminta adalah teks.

Input Password

Input password digunakan untuk menerima input berupa kata sandi (password), yang akan disembunyikan saat diketik.

<form action="proses.php" method="POST">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="Kirim">
</form>

Input Email

Input email digunakan untuk menerima input berupa alamat email.

<form action="proses.php" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="Kirim">
</form>

Input Radio Button

Radio button digunakan untuk memilih satu opsi dari beberapa pilihan.

<form action="proses.php" method="POST">
    <label for="gender">Jenis Kelamin:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Pria</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Wanita</label>
    <input type="submit" value="Kirim">
</form>

Input Checkbox

Checkbox digunakan untuk memilih beberapa opsi dari beberapa pilihan.

<form action="proses.php" method="POST">
    <label for="subscribe">Berlangganan Newsletter:</label>
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <input type="submit" value="Kirim">
</form>

Input Select (Dropdown)

Select box digunakan untuk membuat dropdown atau pilihan menu.

<form action="proses.php" method="POST">
    <label for="country">Negara:</label>
    <select id="country" name="country">
        <option value="id">Indonesia</option>
        <option value="us">Amerika Serikat</option>
        <option value="jp">Jepang</option>
    </select>
    <input type="submit" value="Kirim">
</form>

3. Textarea untuk Input Teks Panjang

Textarea digunakan untuk menerima input teks dalam jumlah banyak, seperti komentar atau deskripsi.

<form action="proses.php" method="POST">
    <label for="message">Pesan:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <input type="submit" value="Kirim">
</form>

4. Button dalam Form

Anda bisa menambahkan tombol yang berfungsi untuk melakukan aksi tertentu, seperti mengirim data atau mereset form.

Button Kirim

<form action="proses.php" method="POST">
    <input type="submit" value="Kirim">
</form>

Button Reset

Tombol reset digunakan untuk menghapus semua data yang dimasukkan dalam form dan mengembalikannya ke nilai default.

<form action="proses.php" method="POST">
    <input type="reset" value="Reset">
</form>

5. Menggunakan Atribut placeholder dan required

placeholder: Memberikan petunjuk atau teks sementara di dalam elemen input sebelum pengguna mengetikkan nilai.

<input type="text" id="name" name="name" placeholder="Masukkan Nama">

required: Menandakan bahwa suatu elemen input wajib diisi sebelum form dapat dikirimkan.

<form action="proses.php" method="POST">
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name" required>
    <input type="submit" value="Kirim">
</form>

6. Contoh Form Lengkap

Berikut adalah contoh form lengkap yang menggabungkan berbagai elemen:

<form action="proses.php" method="POST">
    <h2>Form Pendaftaran</h2>
    
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name" required>
    <br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br><br>
    
    <label for="gender">Jenis Kelamin:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Pria</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Wanita</label>
    <br><br>
    
    <label for="country">Negara:</label>
    <select id="country" name="country">
        <option value="id">Indonesia</option>
        <option value="us">Amerika Serikat</option>
        <option value="jp">Jepang</option>
    </select>
    <br><br>
    
    <label for="message">Pesan:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <br><br>
    
    <input type="submit" value="Kirim">
    <input type="reset" value="Reset">
</form>

HTML forms memungkinkan Anda untuk mengumpulkan data dari pengguna melalui berbagai jenis elemen input, seperti teks, password, radio button, checkbox, dan lainnya. Form dapat dikirim menggunakan metode POST atau GET, dan Anda dapat menambahkan berbagai fitur seperti atribut placeholder, required, serta menggunakan tombol submit dan reset untuk memudahkan pengisian dan pengiriman data.