Halo teman-teman semua selamat datang kembali di course HTML & CSS dari Nusantech Academy. Sebelum teman-teman melanjutkan membaca materi ini, teman-teman diharapkan sudah memahami mengenai tag, dan atribut pada HTML. Materinya bisa teman-teman lihat pada (link). Pada artikel kali ini saya akan membahas form pada HTML.
Apa itu Form?
Form digunakan untuk menginputkan data sebelum diproses oleh sistem. Hampir semua website memiliki form, form ini biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemrograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Contohnya adalah form login, form comment, form data user, dan lain sebagainya.
Dalam pembahasan kali ini kita akan membahas bagaimana cara membuat form menggunakan HTML.
Tag-tag Pada Form
Berikut ini tag-tag yang digunakan dalam pembuatan form.
| Nama Tag | Keterangan/Fungsi |
| <form> | Tag digunakan untuk membuat sebuah form HTML untuk input pengguna. |
| <input> | Tag digunakan untuk membuat sebuah kontrol input. |
| <textarea> | Tag digunakan untuk membuat sebuah kontrol input multi baris (text area). |
| <button> | Tag digunakan untuk membuat sebuah tombol yang dapat diklik. |
| <select> | Tag digunakan untuk membuat sebuah daftar drop-down. |
| <optgroup> | Tag digunakan untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down. |
| <option> | Tag digunakan untuk membuat sebuah pilihan dalam daftar drop-down. |
| <label> | Tag digunakan untuk membuat sebuah label untuk sebuah elemen <input>. |
| <fieldlist> | Tag digunakan untuk membuat grup unsur terkait dalam bentuk. |
| <fieldset> | Tag digunakan untuk merepresentasikan pengelompokkan daftar input pada sebuah form. |
| <legend> | Tag digunakan untuk membuat sebuah caption untuk sebuah elemen <fieldset, <figure>, atau <details>. |
| <datalist> | Tag digunakan untuk menentukan daftar pilihan yang ditetapkan untuk kontrol input, (Tag baru HTML5). |
| <keygen> | Tag digunakan untuk membuat key-pair generator kolom input, (Tag baru HTML5). |
| <output> | Tag digunakan untuk membuat hasil perhitungan, (Tag baru HTML5). |
sebuah form dalam HTML harus berada di dalam tag <form>, yang diawali dengan tag pembuka <form> dan diakhiri dengan tag penutup </form>. Dalam pembuatan sebuah form, tag <form> juga membutuhkan beberapa atribut yang digunakan sebagai pendukung dalam pembuatan form. Berikut ini beberapa atribut yang digunakan dalam pembuatan form.
- action, untuk menentukan alamat dari aksi yang akan dilakukan saat data dikirim.
- id, digunakan untuk mengatur style css dan javascript di masing – masing kotak inputan form menggunakan id.
- class, digunakan untuk mengatur style css dan javascript di masing – masing kotak inputan form menggunakan class.
- method, menentukan metode yang digunakan oleh browser untuk pengiriman data form. Ada dua nilai method yang digunakan.
- post: berkaitan dengan HTTP POST method. Metode ini digunakan untuk mengirim data form yang disisipkan pada body form dan dikirim pada server.
- get: berkaitan dengan HTTP GET method. Metode ini digunakan untuk mengirim data form yang disisipkan pada URI action attribute dengan tanda tanya (?) sebagai pemisah kemudian dikirim ke server. karakter yang digunakan adalah ASCII.
- name, merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.
- placeholder, untuk menampilkan teks sementara (placeholder)
- type, merupakan tipe dari field.
- value, untuk memberikan nilai default pada field.
Langsung saja kita mulai membuat formnya teman-teman.
Tag <input>
Tag <input> adalah tag yang digunakan dalam form pengisian dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya diatur pada tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
- <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa teks pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.
- <input type=”password” /> tampilan inputan teks pada typer password sama seperti type text, namun teks yang diinput tidak akan terlihat, tetapi akan berupa bintang atau titik. Textbox ini biasanya digunakan pada inputan password.
- <input type=”submit” /> tipe inputan ini akan menampilkan tombol (button) untuk memproses data inputan form.
- <input type=”checkbox” />
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Form Nusantech Academy</title>
<body>
<form action="latihan.html" method="get">
<p>Silahkan isi data berikut :</p>
Nama : <input type="text" name="nama"> <br />
Jenis Kelamin :
<input type="radio" name="jenkel" value="laki-laki">Laki-laki
<input type="radio" name="jenkel" value="perempuan">Perempuan
<br />
Username : <input type="text" name="username"> <br />
Password : <input type="password" name="password"> <br />
Course yang diikuti:
<input type="checkbox" name="html">HTML & CSS
<input type="checkbox" name="javascript">Javascript
<input type="checkbox" name="react">React JS
<input type="checkbox" name="node">Node Js
<br /><br />
<button type="submit" name="submit" value="simpan">Simpan</button>
</form>
</body>
</html>Hasilnya seperti ini:
Tag <textarea>
Tag <textarea> ini sama dengan input Type Text, namun ukurannya lebih besar dari form text biasa dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area bisa diatur melalui atribut Rows dan Cols, atau melalui CSS.
Contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Form Nusantech Academy</title>
<style>
#alamat{
font-size: 10px;
color: red;
font-style: normal;
}
</style>
<body>
<form action="latihan.html" method="get">
<p>Alamat:</p>
<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>
</form>
</body>
</html>Hasilnya seperti ini:
Dari hasil tersebut, saya menambahkan Style CSS pada inputan alamatnya, tetapi jika teman-teman tidak ingin menambahkan style CSS pada input nya, maka tidak usah memanggil atribut ID atau atribut id nya dihapus saja.
Tag <select>
Tag <select> ini digunakan untuk memberikan pilihan pada user dari data yang sudah tersedia. Dalam tag <select> terdapat tag <option> yang digunakan untuk membuat pilihan data.
Contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Form Nusantech Academy</title>
<body>
<form action="latihan.html" method="get">
<p>Pilih Course:</p>
<select name="select">
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="react">React JS</option>
<option value="node">Node JS</option>
</select>
</form>
</body>
</html>Hasilnya seperti ini:
Untuk lebih jelasnya lagi saya akan membuah sebuah form registrasi peserta course Nusantech Academy. Form ini berisi :
- Inputan nama lengkap.
- Inputan username.
- Inputan password.
- Inputan jenis kelamin.
- Inputan tanggal lahir.
- Inputan pilih course.
- Inputan agama.
- Inputan email.
- Inputan alamat.
Langsung saja kita buat form nya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Form Nusantech Academy</title>
<body>
<form action="latihan.html" method="POST">
<fieldset>
<legend><h1>Formulir Peserta Nusantech Academy</h1> </legend>
<p>
<label>Nama :</label>
<input type="text" name="nama" placeholder="Masukan nama lengkap">
</p>
<p>
<label>Username :</label>
<input type="text" name="username" placeholder="Masukan username">
</p>
<p>
<label>Password :</label>
<input type="text" name="password" placeholder="Masukan password">
</p>
<p>
<label>Jenis Kelamin :</label>
<input type="radio" name="jenkel" value="laki-laki">Laki-laki
<input type="radio" name="jenkel" value="perempuan">Perempuan
</p>
<p>
<label>Tanggal Lahir :</label>
<input type="date" name="tanggal">
</p>
<p>
<label>Agama :</label>
<select name="agama">
<option value="budha">Budha</option>
<option value="hindu">Hindu</option>
<option value="islam">Islam</option>
<option value="katholik">Kristen Katholik</option>
<option value="protestan">Kristen Protestan</option>
</select>
</p>
<p>
<label>Email :</label>
<input type="email" name="email" placeholder="Masukkan email">
</p>
<p>
<label>Pilih Course:</label>
<input type="checkbox" name="html">HTML & CSS
<input type="checkbox" name="javascript">Javascript
<input type="checkbox" name="react">React JS
<input type="checkbox" name="node">Node Js
</p>
<p>
<p>Alamat :</p>
<textarea name="alamat"cols="50" rows="10"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar">
</p>
</fieldset>
</form>
</body>
</html>Hasilnya seperti ini:
Dan ini hasil yang sudah diisi datanya :
Dari contoh-contoh diatas merupakan contoh form yang sederhana menggunakan HTML, jika teman-teman ingin membuat layout form yang lebih bagus harus menggunakan Style CSS yang bisa teman teman pelajari disini (link css).
Jadi tag form digunakan untuk menginputkan data sebelum diproses ke sistem. Di Dalam tag <form> ada dua method yang digunakan untuk mengirim data yaitu, get digunakan untuk mengirim data form yang disisipkan pada Body Form dan Post digunakan untuk mengirim data form yang disisipkan pada URl.
Baik, teman-teman, mungkin cukup untuk materi membuat form pada HTML. Tetap semangat mengikuti Course HTML & CSS dari Nusantech Academy.
Thank for reading and see you on the next blog!
