Cara Membuat Form di HTML

Di postingan sebelumnya kita sudah membahas cara menambahkan komentar di HTML. Kali ini kita akan membahas cara membuat form di HTML. Silakan simak panduan AneIqbal berikut ini.

Membuat form di HTML

Anda pernah daftar ke facebook? atau daftar di google sewaktu mau bikin email? pasti ngisi nama dan segala macemnya dulu kan?

Nah, itulah yang dinamakan form.

Di web, form digunakan untuk mengumpulkan data yang diinput pengunjung, entah itu nama, alamat, umur, jenis kelamin, dan sebagainya.

..pengunjung akan mengisi data-data sesuai dengan form input yang tersedia.

Ada form login, form kontak, form registrasi, dan form-form lainnya yang ada di web.

Form di HTML hanyalah sebagai pintu masuk informasi yang diberikan pengunjung. HTML tidak dapat menyimpan informasi yang sudah diinput itu.

..maka dibutuhkan bahasa pemrograman seperti PHP untuk memproses data yang diinput lalu menyimpannya di database. Contoh database: MySQL.

..PHP dan MySQL nggak kita bahas disini. Nanti ada sesinya sendiri. Di atas hanya sebagai gambaran aja kalo membuat web itu bukan cuma dengan HTML aja.

Oke, kita masuk ke kodenya.

Tag-tag yang digunakan untuk membuat form

Tag yang digunakan untuk membuat form yaitu tag <form>, tag <input>, tag <textarea>, dan tag <select>.

Kita bedah satu per satu.

Tag <form>

Setiap kali kita ingin membuat form di halaman web, tag <form> inilah yang kita gunakan. Tag pembukanya <form> dan tag penutupnya </form>.

Agar form ini dapat menerima informasi yang diinput pengunjung dengan baik, ada atribut yang harus ditambahkan ke tag <form>, yakni atribut action dan method.

Atribut action digunakan untuk merujuk ke file yang bertugas menerima dan mengelola informasi yang diinput. Biasanya, file pada atribut action ini adalah file PHP.

Lalu.

Atribut method digunakan untuk menentukan cara web browser mengirimkan informasi yang diinput pengunjung. Nilai atribut method ada 2, yakni get dan post.

Kalo diisi dengan get, maka web browser akan mengirimkan informasi yang diinput melalui url web browser. Jadi akan terlihat infomasinya di url web browser. Biasanya digunakan untuk form pencarian.

..method=”get” nggak tepat kalo digunakan pada form login, karena informasi username dan password yang diinput pengunjung akan terlihat di url web browser.

Seperti ini kodenya:

<form action="proses_data.php" method="get">
..isi kode HTML form input..
</form>

Kalo diisi dengan post, maka web browser akan mengirimkan informasi yang diinput tanpa menampilkannya dimanapun. Nggak keliatan.

..method=”post” cocok digunakan untuk form login, karena informasi username dan password yang diinput pengunjung nggak ditampilkan.

Seperti ini kodenya:

<form action="proses_data.php" method="post">
..isi kode HTML form input..
</form>

Tag <input>

Selanjutnya adalah tag <input>. Tag <input> letaknya ada di dalam tag <form> dan merupakan tag yang paling banyak digunakan pada pembuatan form di HTML.

Tag <input> ini dibedakan cara inputnya berdasarkan atribut typenya. Ohiya, tag <input> merupakan self closing tag, jadi nggak punya tag penutup.

<input type=”text” />, jenis inputan ini berupa teks. Misalnya untuk menginput nama, username, dan inputan lainnya yang berupa teks pendek.

<input type=”password” />, jenis inputan ini berupa teks juga namun nggak bisa dilihat. Teks yang diinput akan berubah menjadi tanda bintang atau bulatan.

<input type=”radio” />, jenis inputan ini berupa pilihan yang hanya dapat dipilih 1 dari pilihan yang tersedia. Banyak digunakan untuk menginput jenis kelamin.

<input type=”checkbox” />, jenis inputan ini berupa kotak ceklis pada pilihannya. Kita dapat memilih lebih dari 1 pilihan yang ada. Biasanya digunakan untuk memilih hobi atau kesukaan atau hal lain yang jawabannya bisa lebih dari 1.

<input type=”submit” />, jenis inputan ini berupa tombol untuk memproses form. Tombol inilah yang akan mengirim informasi yang sudah diisi oleh pengunjung dari web browser. Letaknya ada di paling bawah form.

Selanjutnya, tag <textarea>.

Tag <textarea>

Jenis inputan ini sama halnya dengan <input type=”text”> di atas, bedanya adalah textarea dapat memuat lebih banyak teks. textarea juga dapat kita atur juga area inputnya.

Untuk menggunakannya, dibuka dengan tag <textarea> lalu ditutup dengan tag </textarea>.

Seperti ini:

<textarea>
Teks yang akan diinput..
</textarea>

Kita dapat mengatur banyak baris dari textareanya dengan atribut rows dan lebar textareanya dengan atribut cols.

<textarea rows="5" cols="30">
Teks yang akan diinput..
</textarea>

Tag <select>

Jenis inputan yang satu ini biasa dikenal dengan dropdown.

Dropdown memaksa pengunjung untuk memilih pilihan yang tersedia. Jadi pengunjung nggak bisa isi inputan sesuka hati.

Tag ini dibuka dengan tag <select> dan ditutup dengan tag </select>. Di antara keduanya, ada tag <option></option> yang merupakan pilihan yang akan ditampilkan di web browser.

Contohnya:

<select>
  <option>Biru</option>
  <option>Merah</option>
</select>

Informasi yang akan dikirim oleh web browser adalah teks yang berada di antara tag option.

Beda lagi jika kita beri atribut value pada tag optionnya.

<select>
  <option value="warna biru">Biru</option>
  <option value="warna merah">Merah</option>
</select>

Maka, informasi yang dikirim adalah nilai pada atribut value.

Kita juga dapat menambahkan atribut selected untuk menentukan default pilihan dropdownya.

<select>
  <option value="warna biru">Biru</option>
  <option value="warna merah">Merah</option>
  <option value="warna kuning" selected>Kuning</option>
</select>

Atribut name

Kita perlu menambahkan atribut name di setiap tag <input>. Tujuannya adalah supaya informasi yang diinput pengunjung sesuai dengan tempat inputannya.

..bisa dibilang sebagai tanda pengenal dari masing-masing inputan.

Selain itu, dengan adanya atribut name, informasi yang dikirimkan web browser ke file pemroses data dapat dikenali dengan mudah.

..apakah itu informasi nama depan, atau nama belakang, atau password, atau dan yang lainnya.

Contohnya:

<input type="text" name="nama_depan" />
<input type="text" name="nama_belakang" />
<input type="password" name="password" />

<select name="warna_favorit">
  <option value="warna biru">Biru</option>
  <option value="warna merah">Merah</option>
  <option value="warna kuning" selected>Kuning</option>
</select>

Membuat form dari semua tag di atas

Kita sudah membahas berbagai tag <input> di atas. Saatnya kita praktikkan. Kita buat 1 halaman web HTML yang berisi form.

Seperti ini kodenya:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat form di HTML</title>
  </head>

  <body>
    <form action="form.html" method="get">
      Nama lengkap: <input type="text" name="nama_lengkap" />
      <br/>
      Password: <input type="password" name="password" />
      <br/>
      Jenis Kelamin:
      <input type="radio" name="jenis_kelamin" value="pria" /> Pria
      <input type="radio" name="jenis_kelamin" value="wanita" /> Wanita
      <br/>
      Makanan Favorit:
      <input type="checkbox" name="makanan_favorit" value="ketoprak" /> Ketoprak
      <input type="checkbox" name="makanan_favorit" value="nasi goreng" /> Nasi Goreng
      <input type="checkbox" name="makanan_favorit" value="bubur ayam" /> Bubur Ayam
      <br/>
      Kota Asal:
      <select name="kota_asal">
        <option value="Jakarta">Jakarta</option>
        <option value="Bandung">Bandung</option>
        <option value="Surabaya">Surabaya</option>
        <option value="Yogyakarta" selected>Yogyakarta</option>
      </select>
      <br/>
      Pesan Anda:
      <textarea name="pesan" rows="5" cols="50">Tinggalkan pesan disini..</textarea>
      <br/>
      <input type="submit" value="Kirim" />
    </form>
  </body>
</html>

Hasilnya akan terlihat seperti ini:

Kalo kita isi form nya lalu kita tekan tombol Kirim, maka informasinya akan muncul di url web browser karena kita menggunakan method=”get”. Seperti ini bentuknya urlnya:

file:///C:/Users/iqbal/Desktop/belajar_html/form.html?nama_lengkap=aneiqbal&
password=inipassword&jenis_kelamin=pria&makanan_favorit=ketoprak&
makanan_favorit=nasi+goreng&makanan_favorit=bubur+ayam&kota_asal=Yogyakarta&
pesan=pesannya+apa+ya..

Dari url itu terlihat informasi yang dikirim oleh web browser, yakni atribut name dan value yang ada pada tiap tag <input>. Pemisah tiap name dan value ditandai dengan & dan spasinya diubah menjadi tanda +.

Panjang ya? Begitulah membuat form di HTML. Nggak serumit yang dibayangkan kok. Inilah yang menjadi pintu masuk informasi dari pengunjung.

Sekian pembahasan cara membuat form di HTML dan semoga bisa membantu Anda.

Selanjutnya, kita akan membahas perbedaan span dan div HTML. Check it out!