Belajar HTML Dasar: #6 Membuat Form

Belajar HTML Dasar: #6 Membuat Form - Selamat datang di Codekami. Pada artikel kali ini kita akan melanjutkan materi tentang HTML. Pada artikel sebelumnya kita sudah membahas cara membuat tabel dengan HTML. Nah, kali ini kita akan belajar membuat form.. Let's go!!

Baca juga: Belajar pemrograman php dari dasar.

Form biasanya kita gunakan untuk mengumpulkan informasi yang diinputkan oleh user. Seperti form login kalao di facebook biasanya kita membuat status dengan form status, dll. Akan tetapi yang akan kita pelajari kali ini hanya membuat tampilan formnya saja tidak ada proses yang dilakukanya. Itu nanti kita akan bahas di tutorial PHP saja.

Cara Membuat Form di HTML

Dalam membuat form tag yang perlu kita gunakan yaitu <form>,<input>,<textarea>,<select>,<option>,<button>. Nanti kita akan pelajari satu persatu.

Tag <Form>

Dalam HTML, sebuah form harus berada di dalam tag <form> agar nanti data yang diinputkan bisa dieksekusi. Tag <form> ini membutuhkan beberapa attribut seperti action, method, dll.

Tag <input>

Tag <input> ini berfungsi sebagai media inputan data. Dalam tag input ini memiliki attribut diantaranya type(untuk menentukan type textnya), name(untuk identitas dari inputanya agar bisa diproses di backendnya), placeholder(untuk memberikan keterngan/tulisan transparan di inputannya), dll. Dalam attribut type memiliki banyak parameter diantaranya:

<input type="text" /> bertujuan untuk data yang diinputkan berupa text.
<input type="password" /> inputan yang diterima seperti text, akan tetapi data yang diinputkan tidak terlihat.
<input type="hidden" /> membuat kolom inputan tidak terlihat tapi ada.
<input type="checkbox" /> memubuat inputan checkbox.
<input type="radio" /> membuat inputan radio, agar user memilih salah satu diantara pilihan.
dll.

Tag <textarea>

Sama seperti tag input. Texarea ini juga berfungsi sebagai media untuk inputan data. Tapi bedanya untuk textarea kita bisa atur sendiri panjang dan lebar untuk kolom inputan, sedangkan tag input tidak. Textarea mempunyai attribut rows dan cols. Untuk attribut rows untuk mengatur panjang, dan attribut cols mengatur tingginya.

Tag <select>

Tag ini berfungsi untuk memberikan inputan pilihan pada user. Dalam tag select harus ada tag <option> yang bertujuan untuk memuat isi dari tag select.

Tag <button>

Tag ini berfungsi untuk mensubmit atau menjalankan data yang kita input agar bisa dikirim ke pemrosesnya. Untuk mengaktifkan tag button ini harus menggunakan attribut type dan dikasih parameter "submit".

Ada satu lagi yang perlu temen-teman ketahui tadi dalam tag <form> ada attribut action dan method. Untuk attribut action bertujuan mengirimkan data yang diinputkan agar bisa diproses kedalam backendnya(bisa PHP, Node Js, dll) dan dimasukkan ke database. Sedangkan untuk attribut method bisa diisi GET dan POST.

Untuk yang GET, data yang kita inputkan nantinya ada di url halaman. Biasanya digunakan untuk mengetahui data yang kita inputkan sudah benar atau tidak. Sebagai contoh saya akan merangkum dari tag-tag yang sudah saya jelaskan diatas:

<!DOCTYPE html>

<head> <title>Belajar Membuat Form</title> </head> <body> <h3>Data Diri</h3> <form action="" method="get"> Nama: <input type="text" name="nama" placeholder="Masukkan nama"><br> Email: <input type="email" name="email" placeholder="Masukkan email"><br> Password: <input type="password" name="password" placeholder="Masukkan password"><br> Hobi: <input type="checkbox" name="berenang"> Berenang <input type="checkbox" name="berenang"> Berenang <br> Cita-cita: <input type="radio" name="Programmer"> Programmer <input type="radio" name="Programmer"> Dokter <br> Jekel: <select name="jekel"> <option>Laki-laki</option> <option>Perempuan</option> </select><br> Alamat: <textarea name="alamat" cols="30" rows="10"></textarea> <button type="submit">Submit</button> </form> </body> </html>

Nanti hasilnya seperti ini:

Disini kita menggunakan method get. Cobo kita isi form nya:

Setelah kita submit data yang kita masukkan akan ditampilkan kedalam url halaman :

Lebih jelasnya seperti ini C:/Users/Dzulfikri/Desktop/membuat_form.html?nama=Dzulfikri&email=dzulfikrikh%40gmail.com&password=sjdvsjgdcvbsj&berenang=on&Programmer=on&jekel=Laki-laki&alamat=Pati%2C+Jawa+Tengah. Jadi kita bisa melihat data-data yang sudah kita input melalui url.

Beda lagi kalau kita menggunakan method POST data yang kita inputkan tidak terlihat di url tapi dieksekusi. Contohnya :

<!DOCTYPE html>

<head> <title>Belajar Membuat Form</title> </head> <body> <h3>Data Diri</h3> <form action="" method="post"> Nama: <input type="text" name="nama" placeholder="Masukkan nama"><br> Email: <input type="email" name="email" placeholder="Masukkan email"><br> Password: <input type="password" name="password" placeholder="Masukkan password"><br> Hobi: <input type="checkbox" name="berenang"> Berenang <input type="checkbox" name="Berlari"> Berlari <br> Cita-cita: <input type="radio" name="Programmer"> Programmer <input type="radio" name="Programmer"> Dokter <br> Jekel: <select name="jekel"> <option>Laki-laki</option> <option>Perempuan</option> </select><br> Alamat: <textarea name="alamat" cols="30" rows="10"></textarea> <button type="submit">Submit</button> </form> </body> </html>

Setelah kita jalankan di browser dan kita isi datanya :

Saat kita submit di url nya tidak muncul data yang kita inputkan. Tpi data berhasil kita eksekusi.

Gimana nih teman-teman, sulit gak?, asalkan kita bisa konsisten semuanya akan jadi mudah. Cukup sekian untuk artikel kali ini. Semoga bermanfaat, Terimakasih.