Skip to main content

HTML Dasar Part 12: Cara Membuat Form di HTML

cara membuat form HTML

Form juga merupakan salah satu faktor yang penting dalam website. Sebuah website digunakan bukan hanya untuk menampilkan informasi saja. Namun, website juga digunakan untuk mengambil informasi dari pengunjung.

Oleh karena itu, kita perlu belajar koding HTML cara membuat form di HTML.

Kalau di dunia nyata form sama seperti formulir yang diisi dengan informasi atau data. Apakah itu form untuk pendaftaran, login, atau untuk kotak pencarian (search box).


Cara Membuat Form HTML

Untuk membuat sebuah form sebenarnya cukup kompleks, karena bukan hanya berurusan dengan HTML saja, kita juga memerlukan bahasa pemrograman web lain, seperti PHP yang berfungsi untuk memproses data, MySQL berfungsi sebagai tempat penyimpanan form JavaScript berfungsi untuk membuat validasi.

HTML menyediakan tag khusus untuk membuat form yaitu tag <form> dan ditutup dengan tag </form>.

Tag tag <form> memiliki 2 atribut yaitu :

  • action berfungsi sebagai tujuan lokasi pengiriman data yang diisi dalam form
  • method berfungsi sebagai metode pengiriman data

Atribut method memiliki 2 nilai yaitu nilai get atau post.

Kegunaan dari method get dan method post sama yaitu untuk mengirim data ke database atau mengambil data dari database.

Perbedaannya adalah jika kita menggunakan atribut method get maka data yang diisi didalam form akan terlihat di bagian URL. Sedangkan method post maka data yang di isi didalam form tidak akan terlihat.

Method get biasanya digunakan ketika mencari query pencarian dan method post biasanya digunakan ketika membuat form yang agak sensitif seperti form registrasi yang memiliki username dan password.

Contoh penggunaannnya :


<!DOCTYPE html>
<html>
<head>
   <title>Form HTML</title>
</head>
<body>
    <form action="prosesdata.php" method="post">
        ...pengisian data form....
     </form>
</body>
</html>
 

Untuk atribut action, kita mengisinya dengan alamat URL yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk memproses data form.

Hal ini akan kita pelajari saat belajar koding php

Kode HTML di atas, tidak akan menghasilkan apa-apa.

Tag <input> dalam Form

Tag <input> adalah tag yang paling banyak untuk membuat form dan memiliki berbagai bentuk yaitu :

  • Tag <input type="text" /> untuk membuat text box sebagai tempat penginputan seperti nama, username
  • Tag <input type="password" /> untuk membuat teks yang di input tidak terlihat, seperti password
  • Tag <input type="checkbox" /> untuk membuat input pencentangan, seperti pencentangan hobi
  • Tag <input type="radio" /> untuk membuat inputan pemilihan dengan memilih salah satu, seperti pemilihan jenis kelamin

Tag <textarea> dalam Form

Tag <textarea> memang hampir mirip dengan tag <input>, perbedaannya hanya Tag <textarea> bisa menampung lebih banyak text. Panjang dan lebarnya dari textarea bisa diatur dari atribut rows dan cols.


<!DOCTYPE html>
<html>
<head>
   <title>Form HTML</title>
</head>
<body>
    <form action="prosesdata.php" method="post">
        <p>Nama : <input type="text" name="nama"></p>
        <p>Alamat : <textarea name="alamat" rows="4" cols="50"></textarea></p>
        <input type="submit" value="Kirim Data"></p>
     </form>
</body>
</html>
 

Hasilnya :

form html

Diatas kita membuat textarea dengan atribut rows="4" dan cols="50", dengan begitu web browser akan menampilkan text area dengan tinggi 4 karakter dan lebar 50 karakter.

Tag <select> dalam Form

Tag <select> biasanya digunakan untuk inputan form ketika user memilih dari pilihan yang disediakan. Sangat berlawanan dengan checkbox atau radio button, pilihan dalam tag <select> akan muncul dengan memanjang kebawah.

Cara pembuatannya, kita membutuhkan 2 element yakni : tag <select> dan tag <option>.

Tag <select> kita gunakan sebagai container (penampung) dan tag <option> sebagai menu pilihan.

Contoh penggunaannnya :


<!DOCTYPE html>
<html>
<head>
   <title>Form HTML</title>
</head>
<body>
   <h3>Pilih Warna Baju:</h3>
   <form action="prosesform.php" method="get">
    <p>Warna :
    <select name="warna_baju">
    <option value="merah">Merah jambu</option>
    <option value="hijau">Ijo lumut</option>
    <option value="hitam">Hitam pekat</option>
    <option value="biru">Biru muda</option>
    <option value="cokelat">Cokelat tua</option>
    </select></p>
    <p><input type="submit" value="Kirim Data"></p>
   </form>
</body>
</html>
 

Hasilnya :

tag select dalam form html

Atribut Name dalam Form

Tag inputan dalam form haruslah memiliki atribut name. Kenapa? Karena agar bisa diproses oleh web server. Pada saat pemrosesan dengan menggunakan bahasa PHP, nilai yang ada pada atribut name akan menjadi sebuah variabel.

Contoh penggunaannnya :


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

Memang, keduanya kelihatan sama, akan tetapi ketika pemrosesan data terjadi, kedua inputan tersebut akan dibedakan menurut atribut name.

Contoh Form Sederhana

Kita akan menggabungkan semua tag form yang telah kita bahas diatas dengan membuat contoh form sederhana. Nah, buka text editor kemudian ketik kode dibawah ini dan simpan dengan nama form_sederhana.html.

Contoh form biodata


<!DOCTYPE html>
<html>
<head>
   <title>Contoh Form Sederhana</title>
</head>
<body>
   <h3>My Biodata</h3>
   <form action="prosesform.php" method="get">
    <p>Nama : <input type="text" name="nama"/></p>
    <p>Password : <input type="password" name="password" /></p>
    <p>Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" />Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</p>
    <p>Hobiku : <input type="checkbox" name="hobi_baca" /> Membaca Buku <input type="checkbox" name="hobi_nulis" /> Menulis <input type="checkbox" name="hobi_lukis"  /> Melukis</p>
    <p>Makanan Favorit :
      <select name="makanan_favorit" >
         <option value="nasigoreng">Nasi Goreng</option>
         <option value="pizza">Pizza</option>
         <option value="burger">Burger</option>
     </select>
    </p>
    <p>Alamat : <textarea name="alamat" rows="5" cols="20">
      
      </textarea></p>
    <p><input type="submit" value="Kirim Data"></p>
   </form>
</body>
</html>
 

Hasil nya :

form biodata html

Yak, kita sudah selesai membuat sebuah form sederhana, memang tampilannya kurang rapi, untuk mengubahnya menjadi rapi, kita dapat menggunakan CSS.

Untuk membuat sebuah form memang agak sedikit rumit, pemrosesan data yang ada di form akan kita bahas dalam belajar koding PHP.


Untuk mempelajari lebih dalam tentang form ini, paltycox.com membuat belajar koding HTML khusus untuk membahas form

Sampai saat ini, kita telah membahas hampir keseluruhan tag yang ada didalam HTML untuk pembuatan sebuah website. Selanjutnya kita akan membuat rangkuman dari yang pernah kita pelajari, sebagai tanda hasil akhir belajar HTML dasar kita (finish).

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar