Belajar HTML : Cara Membuat Form di

HTML (Tag FORM)

Form atau formulir adalah suatu media yang umum digunakan untuk merekam data. Form
biasanya digunakan untuk media pendaftaran, mengisi suatu quisioner, dll.
Form dalam website tidak akan terlalu berguna jika hanya menggunakan HTML saja. Karena pada
prinsipnya, HTML adalah suatu kerangka interface dalam website, sehingga form HTML tidak bisa
berfungsi tanpa adanya bahasa pemrograman seperti PHP. Untuk lebih jelasnya tentang
membuat fungsi form, akan saya jelaskan pada Tutorial PHP.

Pengertian Tag <form>

Tag form adalah tag html yang berfungsi mengawali dan mengakhiri komponen-komponen form
yang ada didalamnya. Didalam tag form, terdapat beberapa attribut pendukung yang membantu
terbentuknya suatu form seperti attribut action yang berfungsi sebagai tujuan halaman setelah
user menekan tombol submit, dan attribut method yang berfungsi sebagai penentu metode
pengiriman data yang ada dalam form, method biasanya memiliki element post ataupun get.
Get adalah metode dimana pengiriman data dari suatu form dikirimkan melalui url. Data-data
yang sudah diisi dari form akan berbentuk variable serta nilai variable yang tertulis pada url.
sedangkan Post adalah metode dimana pengiriman data dari suatu form dikirim melalui http,
sehingga data-data tersebut tidak muncul di url sehingga lebih aman. metode ini biasanya
digunakan untuk menyembunyikan data seperti password, email, dll yang sekiranya tidak semua
orang boleh mengaksesnya. berikut adalah contoh implementasinya :

 
 

Kegunaan tag <label>

Label adalah tag yang biasanya digunakan untuk mendefinisikan suatu form input atau suatu
input data didalam tag form. Berikut adalah contoh penggunaan label :

Pengertian tag <input>

Tag input adalah tag yang digunakan untuk user dapat memasukkan suatu inputan di dalam
form. Inputan tersebut bisa bermacam-macam bentuk, bisa berupa text, tanggal, pilihan, centang,
dll. Secara umum, berikut adalah macam-macam tipe inputan di dalam form HTML :
 <input type=”text”> adalah tipe inputan yang dapat menginput data berupa text atau
tulisan yang terbatas, biasanya hanya berupa satu kata hingga satu kalimat.
 <input type=”password”> yaitu sesuai namanya, input tipe ini akan membuat inputan
berupa password atau tulisan yang otomatis tersembunyi biasanya berupa bintang(*) atau
titik-titik(.).
 <input type=”radio”> adalah tipe inputan yang berupa radio button atau pilihan yang
memiliki tampilan bulat-bulat dan bisa di klik untuk menentukan pilihan.
 <input type=”checkbox”> input ini hampir sama dengan radio button, namun yang
berbeda adalah tampilan checkbox berupa kotak kecil yang jika kita klik akan muncul tanda
centang dalam kotak tersebut.
 <input type=”submit”> sebenarnya input jenis ini sudah mulai ditinggalkan pada
html5, namun saya tetap mencantumkannya karena tetap bisa digunakan dengan
semestinya. Input ini digunakan untuk membuat suatu button atau tombol yang akan
mengirimkan hasil akhir semua data isian di dalam form ke proses selanjutnya.

Pengertian tag <textarea>

<textarea> merupakan suatu tag yang hampir mirip dengan input text, namun perbedaannya
adalah jika menggunakan input text kita hanya bisa memasukkan suatu kalimat dalam satu baris,
sedangkan <textarea> memungkinkan kita memasukkan text yang lebih banyak seperti satu
paragraf bahkan suatua artikel yang terdiri dari banyak paragraf.

Mengenal tag <select>

dalam suatu form biasanya terdapat suatu option atau pilihan yang disuguhkan kepada user
untuk dipilih. option yang dimaksud disini adalah option dropdown. Pilihan dropdown dalam
tag <select> menggunakan tag <option>

Pengertian Attribut Name

Attribut name digunakan di dalam suatu tag input yang bertujuan untuk menjadi suatu
codename yang nantinya bisa dikenali dan diproses oleh web server. Di halaman action yang
biasanya menggunakan bahasa pemrograman PHP, attribut name ini nantinya akan diubah
menjadi suatu variable sehingga value yang ada di dalam inputan tersebut bisa diproses lebih
lanjut.

 
Contoh Suatu Form Utuh
Berikut adalah contoh dari suatu form yang menggunakan semua tag, attribut, dan elemen yang
kita bahas diatas. kamu bisa meng copy nya lalu simpan dengan nama form.html :
[html]
 

Nama:  

Password:  
Jenis Kelamin :

 Laki – Laki

 Perempuan
Hobi:

 Membaca Novel

 Menulis

 Bersepeda
Alamat :
Semarang

Saran:

Submit

 
[/html]

Tampilan dari form diatas memang belum rapi dan terkesan berantakan karena tidak
menggunakan css, jika ingin membuatnya lebih bagus silahkan tambahkan css.