Cara Membuat Form Menggunakan HTML di Pemrograman Web Dasar

Selamat datang kembali sobat !

Setelah beberapa minggu tidak berbagi rasanya ada yang kurang. Saling berbagi ilmu dan memberikan manfaat kepada orang lain adalah hal yang sangat-sangat mulia. Tentunya sobat tahu terutama yang beragama Islam bahwa sebaik-baik manusia adalah manusia yang memberikan manfaat kepada orang lain. Walau sobat hanya mempunyai sedikit ilmu, tapi manfaatkanlah dengan cara berbagi ilmu kepada teman sobat. 

Sesuai dengan judul di atas, pada postingan saya kali ini kita akan membahas tentang bagaimana Cara Membuat Form Menggunakan HTML di Pemrograman Web Dasar. 

Definisi Form :

Form identik dengan formulir dimana mengijinkan pengguna untuk memasukkan nilai atau data, misalnya menulis komentar ke dalam postingan website. Form juga bisa digunakan ketika kita ingin membuat pilihan daftar suatu kelompok barang atau item tertentu. Kemampuan form hanya sebatas menyediakan sebuah entry data dan mengirimkannya. Hal ini berarti form tidak difungsikan untuk menerima dan mengolah data. Bagian yang berfungsi untuk menerima dan mengolah data secara lanjut adalah web scipting yang bersiifat server side.

Pembuatan Form diawali dengan tag <form> dan diakhiri tag </form>. Tag <form> memiliki beberapa atribut, diantaranya adalah name, method, dan action. Atribut name adalah optional nama untuk form yang berlaku, digunakan untuk form handling. Atribut method terdapat dua nilai yaitu "GET" dan "POST". Kemudian atribut action berisi URL atau file yang digunakan untuk menangkap dan mengolah nilai atau data yang dikirimkan.

Tag, Atribut, dan Nilai dalam Form :

Tag	Atribut	Deskripsi
<form>	method : ·         GET ·         POST	Data dikirim melalui URL address Data dikirim bersama HTTP header
	action	URL atau file yang digunakan untuk menangkap dan mengolah nilai atau data yang dikirimkan
	name	Optional nama untuk form yang berlaku, digunakan untuk form handling
<input>	type : ·         text ·         password ·         hidden ·         radio ·         checkbox ·         submit ·         image ·         reset name size maxlenth	Digunakan untuk isian teks seperti nama atau alamat seseorang Digunakan untuk isian password dengan karakter * atau  ● Digunakan untuk membuat variabel hidden Bentuk masukan yang memungkinkan user memilih satu pilihan Bentuk masukan yang memungkinkan user dapat memilih satu atau beberapa pilihan Mengirimkan data yang telah diberikan pada form Berupa gambar dan value yang dikirim oleh type IMAGE Mengembalikan keadaan form seperti semula saat dijalankan Mendefinisikan nama dari tag input yang dibuat Mengatur ukuran besar dari tampilan tag input Mengatur berapa jumlah maksimal karakter yang bisa dimasukkan oleh user
<select>	name	Mendefinisikan nama dari sebuah pilihan
	size	Mendefinisikan besar dari tampilan tag select
	multiple	Memilih lebih dari satu pilihan pada tag select
<option>	selected	Menentukan nilai awal yang tampil saat form ditampilkan
	name	Mendefinisikan nama dari sebuah pilihan
	value	Mendefinisikan nilai dari sebuah pilihan
<textarea>	name	Mendefinisikan nama dari textarea yang telah dibuat
	cols	Menentukan ukuran isian kolom pada textarea
	rows	Menentukan ukuran isian baris pada textarea
	wrap	Menentukan bagaimana teks di textarea harus wrapping di akhir dari baris (soft, hard, off)

Contoh-contoh membuat isian form :

1. Membuat isian form nama dan alamat.
   
   
   Keterangan :
   Pada isian nama menggunakan tag <input> dengan type text,  besar ukuran 50 , dan maksimal 30 karakter yang bisa dimasukkan oleh user. Sedangkan untuk isian alamat menggunakan tag <textarea> dengan besat kolom 47, besar baris 3, dan non-wrapping.
   
2. Membuat isian form tanggal lahir.
   
   Keterangan :
   Pada isian tanggal lahir menggunakan tag <select> dan tag <option> sebagai daftar pilihan dari tag <select>. Pada tag <option> terdapat atribut name yang mendefinisikan nama atau jenis dari daftar pilihan tersebut. Sobat bisa melihat nilai atribut name dari ketiga isian di atas yaitu tanggal, bulan, dan tahun. Masing-masing nilai mendefinisikan jenis pilihan mereka sendiri.
   Selanjutnya, pada tag <option> juga terdapat atribut selected yang berfungsi untuk menentukan nilai awal yang tampil pada saat form ditampilkan pertama kali. Pada isian tanggal, atribut selected ditentukan di tanggal 1. Pada isan bulan, atribut selected ditentukan di bulan januari. Pada isian tahun, atribut selected ditentukan di tahun 1990.
   
   Gambar dari hasil isian tanggal lahir adalah sebagai berikut :
   
   
   
3. Membuat isian form pilihan jenis kelamin dan hoby.
   
   
   Keterangan :
   Pada isian jenis kelamin menggunakan tag <input> dengan nilai radio pada atribut type sehingga menghasilkan daftar pilihan bertipe radio. Pada tipe ini memungkinkan user hanya dapat memilih satu pilihan tidak boleh lebih. Seperti contoh di atas, user harus memilih antara Laki-laki atau Perempuan.
   Pada isian hoby menggunakan tag <input> dengan nilai checkbox pada atribut type sehingga menghasilkan daftar pilihan bertipe checkbox. Pada tipe ini memungkinkan user memilih satu atau beberapa pilihan. User dapat memilih hanya satu saja misalnya Sepak Bola. User juga bisa memilih beberapa pilihan misalnya Membaca, Menyanyi, dan Tenis.
   
4. Membuat isian form password, clear, dan submit.
   
   
   Keterangan :
   Pada isian password menggunakan tag <input> dengan nilai password pada atribut type sehingga ketika user menulis di kolom password karakternya akan berubah menjadi (* atau  ●). Pada tombol clear menggunakan tag <input> dengan nilai button pada atribut type dan nilai Clear pada atribut value yang menyebabkan tombolnya bernama Clear. Kemudian pada tombol submit menggunakan tag <input> dengan nilai button pada atribut type dan nilai Submit pada atribut value yang menyebabkan tombolnya bernama Submit.

Sampai disini dulu sob materi hari ini tentang Cara Membuat Form Menggunakan HTML di Pemrograman Web Dasar. Jika ada materi yang kurang jelas atau kurang bisa dipahami silahkan bertanya di kolom komentar di bawah. Dan juga jika ada kritikan atau masukkan yang membangun silahkan disampaikan sob. Semoga bermanfaat dan terimakasih atas kunjungannya. :)

Mungkin anda tertarik membaca Cara Membuat Linking Halaman Menggunakan HTML di Pemrograman Web Dasar.