HTML POST Basic-HTML

Basic HTML - Form Part 1

13. Basic HTML - Form Part 1

Pada kali ini kita akan membahas tentang form pada HTML, pembahasan ini akan di bagi menjadi beberapa tutorial, dikarenakan materinya yang cukup panjang. Pada part 1 ini kita akan mengenal apa itu form pada HTML? bagaimana cara membuat form? lansung saja kita akan bahas pengenalan form part 1.

Apa itu Form?

Sebagian dari kamu mungkin sudah pernah mengisi sebuah formulir, baik itu formulir pendaftaran, biodata dan lain sebagainnya. Jadi form itu merupakan sebuah wadah untuk menampung data yang di kumpulkan. Begitu juga dengan form pada HTML, yaitu mengumpulkan data secara digital yang biasanya kita mengisi di atas kertas.

Apa Manfaat dari Form?

Form atau formulir memiliki banyak kemudahan bagi kita. Berikut manfaat kegunaan form:

  1. Memudahkan dalam mengumpulkan data
  2. Mengurangi kesalahan input data
  3. Membaca data yang di kumpulkan dengan mudah
  4. dll

Berikut salah satu contoh form: tdfprogramming-forme-example-developer-mozila.png

Bagaimana Cara Membuat Form

Sekarang kita akan membuat sebuah form secara digital menggunakan HTML. tag yang digunakan untuk membuat sebuah form adalah tag <form>. tag ini mendefenisikan formulir yang akan di isi. kita anggap saja tag tersebut sebuah kertas yang akan di isi oleh orang lain atau user.

<form>
  <!-- data yang akan di input -->
</form>

Script di atas akan kosong jika kita tampilkan ke browser. Karena data yang akan di isi oleh user belum ada, atau kertas nya masih kosong. Sebelum kita mengisi data yang akan di isi oleh user. Kita akan mengenal dulu attribute yang ada pada form.

Atrribute Form

Attribute pada form ini dibilang cukup banyak dan beberapa attribute sangat di haruskan untuk di ketahui. Attribute tersebut digunakan untuk mengelola sebuah form. Lalu apa saja attribute yang ada pada tag <form>. Berikut penjelasan attribute untuk tag <form>:

1. Atrribute Action

Attribute action berfungsi ketika form telah di isi dan lalu di submit oleh user. Maka yang akan mengelola data tersebut adalah attribute action. Biasanya data form akan di kirim melalui sisi server saat user mengklik tombol submit.

Misalkan kita memiliki sebuah form yang nama filenya index.html dan di kelola oleh file hasil.php. Saat user mengklik tombol submit. maka proses data akan di kirim melalui URL lalu kita panggil data yang di krim melalui URL menggunakan variable Global dari PHP $_GET.

Berikut skema prosesnya : tdfprogramming-form-gambar-contoh.png

🗒️ File index.html

<form action="hasil.php">
    <label for="fname">Nama Awal:</label><br>
    <input type="text" id="fname" name="fname" value="Triadmoko"><br>
    <label for="lname">Nama Akhir:</label><br>
    <input type="text" id="lname" name="lname" value="Denny Fatrosa"><br><br>
    <input type="submit" value="Submit">
</form>

🗒️ File hasil.php

<?php 
$fname = $_GET["fname"];
$lname = $_GET["lname"];
 ?>

<p>nama awal anda : <?= "$fname"; ?></p>
<p>nama akhir anda : <?= "$lname"; ?></p>

Sekarang jangan pusing dulu. ini hanyalah contoh penggunaan action, Nanti kita akan bahas lebih lanjut penggunaannya pada materi PHP. berikut hasilnya.

🌐 Form - File index.html tdfprogramming-form-part1-action.png

🌐 Hasil - File hasil.php tdfprogramming-form-result-action.png

2. Atrribute Target

Attribute ini sudah pernah kita bahas pada materi Hyperlinks. Secara fungsional cara kerjanya sama. Perbedaannya adalah saat tombol submit di klik, maka attribute target akan bekerja.

Contoh:

<form action="hasil.php" target="_blank">
    <label for="fname">Nama Awal:</label><br>
    <input type="text" id="fname" name="fname" value="Triadmoko"><br>
    <label for="lname">Nama Akhir:</label><br>
    <input type="text" id="lname" name="lname" value="Denny Fatrosa"><br><br>
    <input type="submit" value="Submit">
</form>

3. Atrribute Method

Attribute method berfungsi sebagai menentukan cara pengiriman data form. Tag ini sangat berkaitan dengan attribute action. Ada 2 value atau nilai di attribute methode yaitu:

  • GET - Mengirim data melalu URL (default)
  • POST - Mengirim data di balik layar (HTTP post transaction )

Pada attribute method dengan value GET sudah kita cobakan di bagian Attribut Action. Sekarang kita akan cobakan dengan file yang sama tadi. Kita hanya menambahkan attribute method pada tag <form> seperti berikut:

tdfprogrammin-form-method-post.png

🗒️ File index.html

<form action="hasil.php" method="POST">
    <label for="fname">Nama Awal:</label><br>
    <input type="text" id="fname" name="fname" value="Triadmoko"><br>
    <label for="lname">Nama Akhir:</label><br>
    <input type="text" id="lname" name="lname" value="Denny Fatrosa"><br><br>
    <input type="submit" value="Submit">
</form>

🗒️ File hasil.php

<?php 
$fname = $_POST_["fname"];
$lname = $_POST_["lname"];
 ?>

<p>nama awal anda : <?= "$fname"; ?></p>
<p>nama akhir anda : <?= "$lname"; ?></p>

Hasilnya :

🌐 Form - File index.html tdfprogramming-form-part1-action.png

🌐 Form - File hasil.html tdfprogramming-form-method-post-result.png

Kita bisa melihat perbedaannya bahwa menggunakan method="POST" data yang di kirim tidak menggunakan URL.

Harap perhatikan, jangan gunakan method="GET" untuk mengirim data penting seperti password, NIK, No.Rek, dan yang lainnya. karna data tersebut akan terlihat di URL. method="GET" juga memiliki keterbatasan karakter, karakter max-2048.

Gunakan method="POST" untuk karakter yang panjang, Karena tidak ada keterbatasan karakter. Menggunakan method ini dibilang aman, karena tidak di tampilkan di URL.

4. Attribute Autocomplete

Attribute ini berfungsi untuk mempermudah user dalam mengisi form. Karena browser akan menampilkan data secara otomatis ketika data tersebut pernah di isi dengan attribute name yang sama pada field. Attribute autocomplete lebih ke history pengisian form. Jika kursor di arahkan ke field, maka history pengisian akan terlihat.

Begitupun jika kita mematikan attribute autocomplete="off". History pengisian tidak terlihat.

contoh:

<form action="hasil.php" method="POST" autocomplete="on">
    <label for="fname">Nama Awal:</label><br>
    <input type="text" id="fname" name="fname" value="Triadmoko"><br>
    <label for="lname">Nama Akhir:</label><br>
    <input type="text" id="lname" name="lname" value="Denny Fatrosa"><br><br>
    <input type="submit" value="Submit">
</form>

hasil tdfprogramming-form-autocomplete.png

5. Attribute Novalidate

Attribute ini digunakan untuk menandakan bahwa data yang dikirim tidak harus di validasi. Jadi dengan menggunakan attribute ini user bisa saja melewati pengisian form.

<form action="hasil.php" method="POST" novalidate>
    <label for="fname">Nama Awal:</label><br>
    <input type="text" id="fname" name="fname" value="Triadmoko"><br>
    <label for="lname">Nama Akhir:</label><br>
    <input type="text" id="lname" name="lname" value="Denny Fatrosa"><br><br>
    <input type="submit" value="Submit">
</form>

Kesimpulan

Pelajari dan ulangi tag dan attribute yang telah digunakan pada materi ini, untuk materi selanjutnya kita akan membahas tentang field pada form, atau data seperti apa saja yang dapat kita inputkan menggunakan form di HTML.