Mengenal Tag Form HTML5

Halo gaes, saya mau curhat nih, saya sedang belajar pemrograman web tingkat dasar / pemula, terus saya dihadapkan dengan kasus input data menggunakan tag form html sederhana, tapi ada sesuatu yang masih mengganjal dipikiran saya, karena ada beberapa atribut di sana yang masih asing di otak saya, seperti:

• action
• method
• enctype
• target
• onsubmit
• onreset
• accept
• accept-charset

Sebenarnya mereka itu digunakan untuk apa sih? mohon dijelaskan! terimaksih.

Tanggapan

< form > adalah tag elemen html yang memiliki kemampuan menciptakan dan mengontrol mekanisme input data. Beberapa tag kontrol itu seperti checkboxs, radio buttons, menu, input, dll.

Contoh sederhana boilerplate form,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Action

Adalah atribut yang berguna untuk menentukan URL server-side atau alamat backend yang akan memproses data form.

Method

Adalah atribut yang berguna untuk menentukan bagaimana data ditransmisikan ke protokol HTTP, apakah ingin menggunakan GET atau POST. Keputusan itu ada di tangan Anda, jika masih ragu, silakan baca tentang Perbedaan Global Variable PHP $GET, $POST dan $_REQUEST

Enctype

Adalah atribut yang berguna untuk mengenkripsi atau merahasiakan data sebelum ditransmisikan atau dikirimkan. Syarat menggunakan atribut ini adalah wajib menggunakan variable global POST.

Selain keamanan, benefit lain dari enkripsi atau seni merahasiakan adalah mempermudah program dalam menangani data yang kompleks, seperti upload file ke dalam form.

Target

Adalah atribut yang secara spesifik menentukan nama atau kata kunci, mengindikasikan dimana respon akan ditampilkan, setelah menerima pengiriman informasi (submit). Reaksi yang ditampilkan bisa berupa New Tab, New Windows, atau Inline Frame. **Referensi: w3school.com.

Mungkin, contoh implementasi target di hiperlink lebih familiar bagi Anda,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Contoh dalam form,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Jika web Anda dibangun menggunakan Java, maka definisi ini lebih relevan bagi Anda, yaitu atribut yang berguna untuk membatasi kemampuan browser agar melakukan hal tertentu saja. Contoh menampilkan hasil servlet, halaman JSP, atau pengiriman form. Secara default hanya menampilkan form beserta hasilnya.

Note: Servlet adalah program kecil yang ditulis dengan bahasa Java yang dibuat untuk berjalan diatas web server. Kata Servlet memiliki kemiripan dengan Applet. Perbedaannya adalah applet berjalan disisi klien (client-side) sedangakan Servlet berjalan di sisi server (server-side).

Onsubmit

Adalah atribut yang digunakan oleh javascript untuk melaporkan kode yang perlu dievaluasi atau diatur ulang ketika form dikirim (submit). Jika ekspresi bernilai salah (false), maka form tidak akan disampaikan. Hal ini memungkinkan user untuk memeriksa kembali data yang diinputkan agar sesuai dengan format yang telah ditentukan.

Contoh Onsubmit,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Onreset

Adalah atribut yang digunakan untuk mengosongkan text field pada sebuah form, bilamana even ini dieksekusi.

Even onreset biasanya berkolaborasi dengan onsubmit, sehingga jika nilai yang diinputkan benar sesuai format yang ditentukan, maka data dikirim (onsubmit), jika salah maka text field formulir dikosongkan (onreset) dan di highlight dengan warna berbeda.

Contoh Onreset,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Accept

Adalah atribut yang berguna untuk menentukan jenis file yang akan dikirim ke server (konsepnya seperti proses upload).

Note: Atribut accept hanya dapat digunakan dengan menggunakan elemen < input type="file" >

Tip: Jangan menggunakan atribut ini sebagai alat validasi!

Contoh Accept,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Accept-Charset

Adalah atribut yang berguna untuk menentukan jenis karakter berdasarkan standar pengkodean, yang diperbolehkan untuk dikirim ke server-side / backend.

Standar pengkodean karakter secara umum ada 2:

• UTF-8 - Character encoding for Unicode
• ISO-8859-1 - Character encoding for the Latin alphabet

Secara default, sistem menentukan sebagai "UNKNOWN", yang berarti bahwa dokumen yang dikirimkan apa adanya.

Contoh Accept-Charset,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Button

Adalah atribut yang berguna untuk mengontrol aksi atau menjalankan even atau prosedur. Di dalam elemen button Anda dapat menambahkan text atau gambar. Inilah yang membedakan elemen button dengan elemen input.

Tip: Jangan lupa untuk selalu menentukan type attribute elemen < button >, sebab setiap browser memiliki default yang berbeda, dikhawatirkan elemen < button > anda mengikuti browser pengguna.

Contoh Button,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Checkbox & Radio

Adalah atribut boolean yang berguna untuk mendefinisikan type elemen input.

Seperti namanya Check (pilih/centang) box(kotak), maka bidang seleksi yang disediakan berupa kotak. Sedangkan Radio berupa lingkaran.

Contoh Checkbox dan Radio,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Select & Option

Adalah tag element html yang berguna untuk membuat daftar pilihan berupa drop-down. Sementara itu, Elemen < option > digunakan untuk menentukan pilihan yang perlu disediakan, elemen < option > sebagai anggota elemen < select >, maka letakan didalamnya.

Tip: elemen < select > termasuk elemen kontrol untuk fromulir (form), ini digunakan untuk menghindari redudansi input data user. Sederhananya, kita membuat standarisasi input.

Contoh Select & Option,

  First name:

  Last name:

Visit Bundet - Forum System Like Stackoverflow

  First name:
  Last name:

This example demonstrates how to assign an "onsubmit" event to a form element.

When you submit the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was submitted");
}

When you reset the form, a function is triggered which alerts some text.

  Enter name:

function myFunction() {
    alert("The form was reset");
}

  First name:
  Last name:

Click Me!

   I have a bike
   I have a car

  Volvo
  Saab
  Opel
  Audi

Sekian penjelasan kami, semoga bermanfaat.