Tutorial Belajar HTML Part 13 -Membuat Formulir (Form) dalam HTML: Interaksi Pengguna dan Input Data

• 10/16/2023
• Yan Afriyoko
• 57

Membuat Formulir (Form) dalam HTML: Interaksi Pengguna dan Input Data

Formulir HTML adalah cara untuk mengumpulkan informasi dari pengguna melalui berbagai elemen input. Ini mencakup teks, angka, checkbox, tombol radio, area teks, dan banyak lagi. Dengan menggunakan elemen formulir, pengguna dapat mengirim data ke server untuk diproses.

Tag Dasar untuk Membuat Formulir

Tag <form>

Tag <form> digunakan untuk membungkus elemen-elemen formulir dan menentukan cara pengiriman data. Atribut action menunjukkan ke URL atau skrip yang akan memproses data formulir.

Tag <input>

Tag <input> adalah elemen dasar yang digunakan untuk membuat elemen input. Berbagai jenis input didukung, seperti teks, kata sandi, checkbox, radio, dan banyak lagi. Atribut type menentukan jenis input.

Tag <select> dan <option>

Tag <select> digunakan untuk membuat dropdown list, sementara tag <option> mendefinisikan opsi dalam dropdown.

Tag <textarea>

Tag <textarea> digunakan untuk membuat area teks besar di mana pengguna dapat memasukkan teks panjang.

Contoh Formulir Sederhana dalam HTML

<form action="/proses_data" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required><br><br>

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

    <label for="pesan">Pesan:</label>
    <textarea id="pesan" name="pesan" rows="4" cols="50"></textarea><br><br>

    <input type="submit" value="Kirim">
</form>

Atribut Penting pada Elemen Formulir

• action: Menentukan URL atau alamat tujuan pengiriman data.

• method: Menentukan metode pengiriman data, seperti GET atau POST.

• name: Menetapkan nama untuk elemen input.

• required: Memastikan bidang harus diisi sebelum pengiriman.

• type: Menentukan jenis input, seperti text, email, password, checkbox, radio, dan lainnya.

Keterbacaan, Validasi, dan Aksesibilitas

Pastikan formulir Anda mudah dibaca dengan memberikan label yang jelas untuk setiap input, menggunakan atribut required jika diperlukan, dan memastikan kecocokan dengan pedoman aksesibilitas.

Kesimpulan

Formulir HTML memungkinkan pengguna untuk berinteraksi dan memberikan data ke situs web. Dengan memanfaatkan elemen formulir yang tersedia dan memperhatikan aksesibilitas, Anda dapat membuat formulir yang ramah pengguna untuk mengumpulkan informasi dari pengguna dengan mudah.