Dalam HTML, tag <form> digunakan untuk membuat formulir yang dapat menerima input dari pengguna. Formulir ini sering digunakan dalam pembuatan halaman login, registrasi, pencarian, dan banyak lagi.

1. Tag <form>

Tag <form> digunakan untuk membungkus semua elemen input dalam formulir. Tag ini memiliki beberapa atribut penting

Atribut pada <form>:

• action → Menentukan URL tujuan untuk mengirim data formulir.
• method → Menentukan metode pengiriman data (GET atau POST).
• enctype → Menentukan jenis encoding data, biasanya digunakan untuk upload file.
• target → Menentukan bagaimana hasil formulir ditampilkan (_self, _blank, _parent, _top).
• autocomplete → Menentukan apakah browser mengisi otomatis data yang sudah pernah dimasukkan.

Contoh penggunaan <form>:

  
<form action="submit.php" method="post">
    ... (elemen input di sini) ...
</form>

2. Tag <input>

Tag <input> digunakan untuk menerima berbagai jenis data dari pengguna. Terdapat banyak tipe input yang bisa digunakan sesuai kebutuhan.

Jenis-jenis <input> dan Atributnya

a. Input Teks

Digunakan untuk menerima input berupa teks pendek seperti nama atau username.

<input type="text" name="nama" placeholder="Masukkan nama Anda">

Atribut penting:

• type="text" → Menentukan jenis input sebagai teks.
• name → Nama unik yang digunakan dalam pengiriman data.
• placeholder → Menampilkan teks petunjuk dalam input.
• maxlength → Batas maksimal karakter yang bisa dimasukkan.
• required → Memastikan input wajib diisi.

atribut ini diketik didalam tag input. Atribut ini berguna untuk menyesuaikan inputan yang diterima pada input. seperti pengecekan nilai atau input yang tidak boleh kosong.

b. Input Kata Sandi

Digunakan untuk input password dengan karakter tersembunyi. Teks yang diketik pada input ini akan diubah menjadi simbol sehingga pengguna atau orang lain tidak dapat mengetahui apa yang diketik didalamnya

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

c. Input Email

Digunakan untuk validasi email secara otomatis oleh browser. Input ini sekilas akan sama saja seperti input teks, namun jika diketik pada handphone, maka keyboard akan memunculkan simbol @ dan .com untuk mempermudah mengetik email

<input type="email" name="email" required>

d. Input Angka (Number)

Digunakan untuk input angka. Inputan ini hanya menerima angka dan bukan teks. Inputan ini tidak cocok untuk menerima inputan yang memiliki angka 0 didepan angka.

<input type="number" name="usia" min="1" max="100">

e. Input Tanggal dan Waktu

Input tanggal dan waktu digunakan untuk menerima inputan tanggal seperti tanggal lahir, tanggal pengiriman, dan lainnya yang berhubungan dengan tanggal dan waktu.

Inputan tipe tanggal

<input type="date" name="tanggal_lahir">

Input tipe waktu

<input type="time" name="jam">

Input tipe tanggal dan waktu

<input type="datetime-local" name="jadwal">

f. Input Pilihan (Radio dan Checkbox)

Radio, sebuah inputan bulatan yang akan menyala ketika ditekan. Radio ini biasanya digunakan untuk memilih satu opsi dari sekian banyak pilihan contohnya seperti soal pilihan ganda, jenis kelamin atau status perkawinan. (hanya bisa memilih satu dari beberapa opsi):

<input type="radio" name="gender" id="lk" value="L"> Laki-laki
<input type="radio" name="gender" id="pr" value="P"> Perempuan

Untuk memilih pilihan lebih dari satu, kita dapat menggunakan input tipe checkbox. Dengan input ini, user dapat memilih pilihan lebih dari satu jenis. Contoh makanan favorit, tempat rekreasi, hobi, bahasa yang dikuasai dan lain sebagainya.

<input type="checkbox" name="hobi" value="musik"> Musik
<input type="checkbox" name="hobi" value="olahraga"> Olahraga
  

g. Dropdown (Select dan Option)

Digunakan untuk membuat daftar pilihan. Pilihan ini akan muncul menurun kebawah dan pengguna dapat memilih pilihan yang sesuai dengan pertanyaan yang diminta. Sama halnya seperti radio, pilihan ini hanya dipilih satu jenis.

  <select name="negara">
    <option value="id">Indonesia</option>
    <option value="us">Amerika</option>
    <option value="jp">Jepang</option>
</select>
  

h. Input File (Upload)

Digunakan untuk mengunggah file. Input ini biasanya digunakan jika ada permintaan file yang harus diunggah ke server. Permintaan file ini digunakan untuk melakukan verifikasi data antara data yang diisi dengan bukti fisik yang ada. Data yang minta dapat berupa dokumen penting (KTP/Ijasah/Sertifikat/Foto) dan lain sebagainya.

  <input type="file" name="dokumen">
  

i. Input Warna

Memungkinkan pengguna memilih warna.

  <input type="color" name="warna">
  

j. Input Slider (Range)

Digunakan untuk memilih angka dalam rentang tertentu. Anda dapat melihat slider pada halaman yang menyediakan perubahan ukuran font, zoom (memperbesar objek) atau volume.

  <input type="range" name="volume" min="0" max="100">
  

k. Input Pencarian

Digunakan untuk bidang pencarian dengan tampilan khusus. Inputan ini hampir sama dengan input tipe text. namun anda akan melihat perbedaan nya saat menggunakannya di handphone. tombol enter akan berubah menjadi kaca pembesar.

  <input type="search" name="cari" placeholder="Cari di sini...">
  

l. Input Tombol (Button, Submit, Reset)

Pada form HTML terdapat beberapa jenis tombol. Tombol ini memiliki fungsi yang berbeda sesuai dengan fungsinya. Tipe Submit akan mengirimkan data yang sudah terisi pada input yang telah disediakan. Namun perlu diperhatikan pengiriman data juga membutuhkan bantuan bahasa lainnya seperti PHP agar data dapat terkirim ke server.

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

Tombol Reset digunakan untuk mereset isi input yang ada pada form. Tombol ini diperlukan dibeberapa halaman untuk mengosongkan seluruh input tanpa harus menghapus satu per satu.

  <input type="reset" value="Hapus">
  

Tombol yang tidak memiliki tipe hanya akan menjadi tombol biasa. Tombol biasa ini juga akan memiliki fungsi yang sama jika disisipkan dengan perintah Javascript atau PHP.

  <input type="button" value="Klik Saya" onclick="alert('Tombol ditekan!')">
  

Elemen Pendukung dalam Formulir

Elemen ini akan menampilkan keterangan tentang inputan yang ada pada formulir. Keterangan ini berupa tulisan atau hasil dari inputan itu sendiri. Dengan adanya elemen ini, pengguna akan mudah mengisi data sesuai dengan keterangan yang ada.

a. Label

Memberikan deskripsi pada input untuk meningkatkan aksesibilitas.

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
  

b. Textarea

Digunakan untuk input teks panjang.

<textarea name="komentar" rows="4" cols="50"></textarea>
  

c. Fieldset dan Legend

Digunakan untuk mengelompokkan elemen dalam formulir.

<fieldset>
    <legend>Informasi Pribadi</legend>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
</fieldset>
  

d. Datalist

Menyediakan saran input yang bisa dipilih pengguna.

<input list="kota" name="kota">
<datalist id="kota">
    <option value="Jakarta">
    <option value="Bandung">
    <option value="Surabaya">
</datalist>
  

e. Output

Menampilkan hasil dari perhitungan dalam formulir.

<output name="hasil">0</output>

  

Contoh Formulir Lengkap

Berikut adalah contoh formulir lengkap dalam HTML:

<form action="submit.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="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="gender">Jenis Kelamin:</label>
    <input type="radio" id="male" name="gender" value="L"> Laki-laki
    <input type="radio" id="female" name="gender" value="P"> Perempuan

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

Dengan memahami berbagai elemen dan atribut dalam <form> dan <input>, Anda dapat membuat formulir yang lebih interaktif dan sesuai dengan kebutuhan pengguna. Semoga bermanfaat

Untuk melihat seberapa jauh memahami dalam pembuatan form pada HTML, yuk kita coba membuat form seperti gambar yang ada dibawah ini. Agar form dapat tersusun rapi, gunakan tag table untuk menyusunnya.