Membuat Formulir HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Form HTML adalah elemen HTML yang digunakan untuk mengumpulkan informasi dari pengguna. Form ini terdiri dari berbagai elemen seperti input teks, checkbox, radio button, select, dan lainnya. Saat pengguna mengisi form dan mengirimkannya, informasi yang diisi akan dikirimkan ke server untuk diproses dan digunakan sesuai keperluan. Berikut adalah contoh form untuk menginputkan biodata:

Form Input Biodata


















ELemen <form> HTML

Untuk membuat formulir pada HTML kita dapat menggunakan elemen <form> dan beberapa atribut seperti <action>, <method>,  <target>, <autocomplete> dan <novalidate>.

Contoh penggunaan elemen <form>: 

<form>
    elemen form
</form>

Atribut <action> 

Atribut action pada elemen <form> digunakan untuk menentukan alamat URL yang akan diproses saat form dikirimkan. Ketika form di-submit, data yang diisi pada form akan dikirim ke alamat URL yang ditentukan pada atribut action. URL ini bisa berupa alamat URL lokal di dalam situs, atau alamat URL eksternal.

<form action="proses_form.php">
  <!-- elemen input  -->
  <input type="submit" value="Submit">
</form>

Pada contoh di atas, saat form di-submit, data yang diisi pada form akan dikirim ke script proses_form.php untuk diproses lebih lanjut. Script ini bisa berupa file PHP atau script lainnya yang akan memproses data yang dikirimkan dari form.

Atribut <method>

Atribut method pada elemen <form> digunakan untuk menentukan metode pengiriman data dari form ke server. Terdapat dua metode pengiriman data yang bisa digunakan, yaitu metode GET dan POST.

  • GET: 
    Metode GET mengirimkan data form ke server dengan menambahkan data pada URL. Data form akan ditambahkan pada bagian URL setelah tanda tanya ?. Metode ini cocok digunakan untuk mengirimkan data yang bersifat publik dan tidak terlalu rahasia, seperti parameter pencarian pada halaman web.

  • POST: 
    Metode POST mengirimkan data form ke server dengan cara mengirimkannya secara tersembunyi. Data form tidak akan ditambahkan pada URL, sehingga lebih aman digunakan untuk mengirimkan data yang bersifat rahasia dan privasi, seperti login form.

Contoh penggunaan atribut method pada form:

 

<form action="proses_data.php" method="POST">
  <!-- elemen input -->
  <input type="submit" value="Submit">
</form>

Atribut <target>

Atribut target pada elemen <form> digunakan untuk menentukan di mana hasil dari pengiriman data form akan ditampilkan. Biasanya, hasil pengiriman data form akan ditampilkan di halaman yang sama dengan form. Namun, jika Anda ingin menampilkan hasilnya di halaman yang berbeda atau dalam jendela pop-up, Anda dapat menentukan nilai atribut target.

Terdapat dua nilai yang umum digunakan pada atribut target, yaitu:

  • _self: Hasil pengiriman data form akan ditampilkan pada halaman yang sama dengan form.
  • _blank: Hasil pengiriman data form akan ditampilkan pada jendela atau tab baru.

Contoh penggunaan atribut target pada form:

<form action="proses_data.php" method="POST" target="_blank">
  <!-- elemen input -->
  <input type="submit" value="Submit">
</form>

Atribut <autocomplete>

Atribut autocomplete pada elemen form HTML digunakan untuk memberikan saran pengisian pada field-form yang ada pada form tersebut. Dengan menggunakan atribut autocomplete, web browser dapat mengingat input data pada form yang pernah diisi oleh user pada sesi sebelumnya dan memberikan saran pengisian pada saat user akan mengisi formulir yang sama pada situs web yang sama atau situs web yang berbeda.

Atribut autocomplete pada elemen form HTML juga dapat digunakan untuk mengatur pengisian otomatis untuk beberapa field-form seperti nama, alamat, email, nomor telepon dan lain-lain. Hal ini dapat memudahkan user pada saat mengisi formulir dan menghemat waktu. Atribut autocomplete pada elemen form HTML memiliki beberapa nilai yang dapat digunakan:

on: Nilai on digunakan untuk memperbolehkan web browser memberikan saran pengisian data pada saat user akan mengisi formulir.
off: Nilai off digunakan untuk melarang web browser memberikan saran pengisian data pada saat user akan mengisi formulir.

Contoh penggunaan atribut autocomplete pada elemen form:

<form action="/" method="post" autocomplete="on">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" autocomplete="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="email">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="new-password">
  
  <input type="submit" value="Submit">
</form>

Kode diatas akan menghasilkan tampilan sebagai berikut:

Pada contoh di atas, elemen form diberi atribut autocomplete="on" yang berarti memperbolehkan web browser memberikan saran pengisian data pada saat user akan mengisi formulir. Input field nama diberi atribut autocomplete="name", input field email diberi atribut autocomplete="email", dan input field password diberi atribut autocomplete="new-password". Nilai dari atribut autocomplete ini akan memberikan saran pengisian pada input field sesuai dengan data yang telah disimpan pada web browser.

Atribut <novalidate>

Atribut novalidate pada elemen form HTML digunakan untuk menonaktifkan validasi form yang dilakukan oleh browser pada saat submit form. Ketika sebuah form di-submit, browser secara default akan melakukan validasi terhadap setiap input field pada form, seperti memastikan bahwa sebuah field yang diharuskan diisi tidak kosong, atau memvalidasi format email yang dimasukkan. Jika validasi gagal, maka browser akan menampilkan pesan kesalahan dan mencegah form dikirim.

Dengan menggunakan atribut novalidate, maka validasi form oleh browser akan dinonaktifkan. Hal ini berguna jika Anda ingin melakukan validasi form menggunakan script pada sisi client atau server Anda sendiri, dan ingin menghindari pesan kesalahan default dari browser yang dapat membingungkan user atau memperlambat proses pengisian form.

Contoh penggunaan atribut novalidate pada elemen form:

<form action="/" method="post" novalidate>
  <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>
  
  <input type="submit" value="Submit">
</form>