Cara Membuat Form di HTML

Form adalah salah satu elemen penting dalam HTML yang digunakan untuk mengumpulkan data dari pengguna melalui halaman web. Dengan menggunakan form, pengguna dapat menginput data seperti teks, angka, pilihan, dan lain-lain, yang nantinya dapat diproses oleh server untuk melakukan tindakan yang diperlukan. Dalam artikel ini, kita akan mengenal lebih lanjut tentang form pada HTML, termasuk cara membuat form, tipe-tipe input yang tersedia, serta contoh penggunaan form dalam sebuah halaman web.

Membuat Form pada HTML

Untuk membuat form pada HTML, kita memerlukan elemen <form> yang digunakan sebagai wadah untuk mengelompokkan elemen-elemen form lainnya. Berikut adalah contoh struktur dasar dari sebuah form:

<form action="/proses" method="post">

    <!-- Elemen form lainnya akan ditempatkan di sini -->

</form>

Beberapa atribut yang umum digunakan pada elemen <form> antara lain:

action: atribut ini digunakan untuk menentukan URL atau alamat tempat data form akan dikirimkan untuk diproses. URL ini dapat merupakan URL relatif atau URL absolut. Misalnya, action="/proses" atau action="https://www.contoh.com/proses".

method: atribut ini digunakan untuk menentukan metode pengiriman data form. Dua metode yang paling umum adalah GET dan POST. Metode GET mengirimkan data form sebagai parameter di URL, sedangkan metode POST mengirimkan data form dalam tubuh permintaan HTTP.

Input dalam Form

Elemen-elemen input adalah komponen utama dalam form. Elemen input digunakan untuk mengizinkan pengguna untuk memasukkan data dalam form. Berikut adalah beberapa tipe input yang umum digunakan dalam form:

1. Input Teks (<input type="text">): Digunakan untuk memungkinkan pengguna memasukkan teks, seperti nama, alamat, atau email.

Contoh penggunaan:

<label for="nama">Nama:</label>

<input type="text" id="nama" name="nama">

2. Input Sandi (<input type="password">): Digunakan untuk memungkinkan pengguna memasukkan kata sandi atau password. Karakter yang dimasukkan akan disembunyikan.

Contoh penggunaan:

<label for="password">Kata Sandi:</label>

<input type="password" id="password" name="password">

3. Input Angka (<input type="number">): Digunakan untuk memungkinkan pengguna memasukkan angka, seperti umur, nomor telepon, atau jumlah.

Contoh penggunaan:

<label for="umur">Umur:</label>

<input type="number" id="umur" name="umur">

4. Input Radio (<input type="radio">): Digunakan untuk memungkinkan pengguna memilih satu opsi dari beberapa opsi yang diberikan.

Contoh penggunaan:

<label for="jenis-kelamin">Jenis Kelamin:</label>

<input type="radio" id="laki-laki" name="jenis-kelamin" value="laki-laki">

<label for="laki-laki">Laki-laki</label>

<input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan">

<label for="perempuan">Perempuan</label>

5. Input Checkbox (<input type="checkbox">): Digunakan untuk memungkinkan pengguna memilih satu atau lebih opsi dari beberapa opsi yang diberikan.

Contoh penggunaan:

<label for="hobi">Hobi:</label>

<input type="checkbox" id="hobi1" name="hobi[]" value="renang">

<label for="hobi1">Renang</label>

<input type="checkbox" id="hobi2" name="hobi[]" value="sepeda">

<label for="hobi2">Sepeda</label>

<input type="checkbox" id="hobi3" name="hobi[]" value="membaca">

<label for="hobi3">Membaca</label>

6. Input Tanggal (<input type="date">): Digunakan untuk memungkinkan pengguna memilih atau memasukkan tanggal.

Contoh penggunaan:

<label for="tanggal-lahir">Tanggal Lahir:</label>

<input type="date" id="tanggal-lahir" name="tanggal-lahir">

7. Input Submit (<input type="submit">): Digunakan untuk mengirimkan data form yang telah diisi ke server untuk diproses.

Contoh penggunaan:

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

8. Input pilihan : Input pilihan digunakan untuk memungkinkan pengguna memilih satu atau lebih opsi. Contohnya adalah input untuk jenis kelamin, status pernikahan, atau pilihan produk.

contoh penggunaan:

<label for="jenis-kelamin">Jenis Kelamin:</label>

<select id="jenis-kelamin" name="jenis-kelamin">

    <option value="laki-laki">Laki-laki</option>

    <option value="perempuan">Perempuan</option>

</select>

Itulah beberapa tipe input yang umum digunakan dalam form pada HTML. Namun, masih terdapat tipe input lainnya seperti Input File, Input Email, Input URL, Input Warna, dan lain-lain. Anda dapat menggali lebih dalam dokumentasi HTML untuk menemukan tipe input yang sesuai dengan kebutuhan form yang ingin Anda buat.

Untuk lebih lengkapnya bisa kunjungi : W3School Form HTML