HTML Dasar | #8 Formulir

Formulir dalam HTML

Membuat Formulir dengan Tag <form>

Formulir adalah elemen HTML yang digunakan untuk mengumpulkan input dari pengguna. Formulir dibuat menggunakan tag <form> dan bisa berisi berbagai elemen seperti teks, password, checkbox, radio, dan button.

Contoh Struktur Formulir Sederhana:

<form action="/submit" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

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

        

Pada contoh di atas, kita membuat formulir sederhana dengan dua input (nama dan password) serta sebuah tombol submit untuk mengirimkan data.

Elemen Input

Teks dan Password

Input teks digunakan untuk memasukkan teks dari pengguna, sementara input password digunakan untuk memasukkan kata sandi dengan karakter tersembunyi.

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

<label for="password">Password:</label>
<input type="password" id="password" name="password">

        

Checkbox dan Radio

Checkbox digunakan untuk memilih beberapa pilihan, sedangkan radio digunakan untuk memilih salah satu dari beberapa pilihan.

<label>
    <input type="checkbox" name="hobi" value="membaca"> Membaca
</label>
<label>
    <input type="checkbox" name="hobi" value="menulis"> Menulis
</label>

<label>
    <input type="radio" name="jenis_kelamin" value="pria"> Pria
</label>
<label>
    <input type="radio" name="jenis_kelamin" value="wanita"> Wanita
</label>

        

Contoh di atas menunjukkan cara membuat checkbox untuk pilihan ganda (hobi) dan radio untuk pilihan tunggal (jenis kelamin).

Button

Menggunakan Tag <button>

Tag <button> digunakan untuk membuat tombol yang dapat diklik oleh pengguna. Tombol ini bisa digunakan untuk submit formulir atau melakukan tindakan tertentu dengan JavaScript.

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

        

Contoh Formulir Lengkap

<form action="/submit" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <label>
        <input type="checkbox" name="newsletter"> Terima newsletter
    </label>

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

        

Contoh di atas adalah formulir lengkap dengan input teks, password, checkbox, dan tombol submit menggunakan tag <button>.