Nama : Wahyu
Setiani
Npm : 13.02.8607
Kelas
: D3 MI 04
Materi Pemrograman Web
Form digunakan
untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk
login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap,
bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML:
cara membuat form di HTML ini kita akan membahas cara penggunakan tag form
di dalam HTML.
Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form
biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari
user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau
PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya
akan menjelaskannya pada tutorial tentang PHP dan JavaScript.
Tag dasar yang akan bisa digunakan untuk membuat form pada HTML adalah tag
form, input, textarea, select dan option.
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Seperti yang sudah dipelajari
mengenai penulisan kode pada HTML diawali dengan <Nama
Function Tag> ......( Isi sebuah tag )..... </Nama Function Tag>
Pada bagian terakhir kita harus menutup kode dengan menambahkan slash ( / ).
Bagian Isi Tag dapat dimasukkan oleh beberapa atribut untuk dapat berfungsi
dengan seharusnya.
Dua buah atribut yang digunakan adalah action dan method. Dianalogikan action
adalah sesuatu yang mengoperasikan fungsi dari pada form tersebut. Sedangkan
method adalah bagian-bagian cara yang mengumpulkan setiap data yang diperlukan
untuk diproses. Action berfungsi
menjelaskan lokasi data yang didapat form akan dikirimkan. Biasanya nilai dari
atribut action ini adalah alamat dari sebuah halaman PHP yang akan memproses
isi data form. Sedangkan fungsi dari Method,
adalah untuk menjelaskan bagaimana data isian form akan dikirim. Nilai dari
atribut method ini bisa berupa get atau post.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah
nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat
pada url browser. Method get ini biasanya digunakan untuk query pencarian.
Method post biasanya digunakan untuk data yang lebih sensitif seperti yang
berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada
browser.
Struktur dasar form akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Bagian script kode diatas yang berwarna biru dan ungu dapat ditambahkan
attribut lainnya seperti style, class, dan lain-lain. Karena berhubungan dengan
form login maka hanya menambahkan action dan method saja. Sisanya bisa
menggunakan kode HTML dngan meletakkannya pada satu baris diatas form :
<div id='pandauan-belajar-html' class='membuat-form'> dan kita dapat
menambahkan kode CSS
berdasarkan id dan class tersebut. Jangan lupa penutupnya di bagian bawah form
yaitu : </div>
Properti masukan pada elemen form
1. Text box<input
type="text">
Dignakan untuk memasukan input yang berupa teks.
Size
= ukuran dari textbox dalam karakter
Maxsize
= maksimal jumlah karakter yang dapat di input
Nama
= nama variable yang dikirim ke suatu aplikasi
Value
= akan menampilkan isinya sebagai nilai default
2. Password<input
type="password">
Di gunakan untuk memasukan password
Size
= ukuran textbox dalam karakter
Maxsize
= maksimal jumlah karakter yang dapat di input
Name
= nama variable yang dikirim ke suatu aplikasi
Ada lagi jenis input lainnya yaitu :
<input type=”checkbox” /> adalah inputan berupa checkbox
yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak
memilih checkbox ini. Type checkbox memiliki atribut checked yang
jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox
langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox
berupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan checkbox, namun user
hanya bisa memilih satu diantara pilihan group radio. Type radio
ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh
inputan type radio adalah jenis kelamin.
<input type=”submit” /> akan menampilkan tombol untuk memproses
form. Biasanya diletakkan pada baris terakhir dari form. Atribut value
jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
3. Hidden<input
type"hidden">
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk
dilihat oleh browser.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= nilai dari variable
4. Check Box<input
type="checkbox">
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= nilai dari variable
Checked (checkbox yang sudah ditandai)
5. Radio Button<input
type="radio">
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
Name
= nama veriabel yang dikirim ke suatu aplikasi
Value
= nilai dari variable
Checked (radio button yang sudah di tandai)
6. Push Button<input
type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan
suatu aksi.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= label teks di atas tombol
7. Submit<input
type="submit">
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya
ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
Name
= nama dari variable yang dikirim ke suatu aplikasi
Value
= label teks di atas tombol
8. Image Submit Button<input
type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
Name
= nama dari variable ayng dikirim ke suatu aplikasi
9. Reset<input
type="reset">
Digunakan untuk mereset semua masukan dalam form.
Value
= label teks di button
1. Text Area<textarea>…</textarea>
Elemen untuk memasukan teks secara leluasa seperti notepad.
Nama
= nama dari veriabel yang dikirim ke suatu aplikasi
Rows
= panjang baris dalam karakter
Cols
= tiggi kotak
1. Select<select>…</select>
Daftar isi dalam property select menggunakan tag <option>
Size
= jumlah pilihan yang dapat terlihat
Name
= nama dari veriabel yang dikirim ke suatu aplikasi
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>
Ketika form dikirim untuk diproses, nilai dari tag option akan dikirimkan.
Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan
tag value. Jika tag value berisi nilai, maka nilai value lah yang akan dikirim.
Sama seperti tag option type checkbox dan type radio, atribut checked dapat
ditambahkan agar tag select berisi nilai awal, contoh penggunaanya sebagai
berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga"
selected>Pilihan 3</option>
</select>
Contoh dari pembuatan Form pada HTML yaitu sebagai berikut :
<!DOCTYPE
html>
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">
Nama: <input type="text" name="nama"
value="Nama Kamu" />
<br />
Password: <input type="password"
name="password" />
<br />
Jenis Kelamin : <input type="radio"
name="jenis_kelamin" value="laki-laki" checked/> Laki -
Laki
<input type="radio" name="jenis_kelamin"
value="perempuan" /> Perempuan
<br />
Hobi: <input type="checkbox"
name="hobi_baca" /> Membaca Buku Javascript
<input
type="checkbox" name="hobi_nulis" checked /> Menulis
Code HTML, CSS, PHP
<input
type="checkbox" name="hobi_mancing" /> Menggambar Design
Banner Website
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota
Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota
Semarang" checked>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5"
cols="20">Silahkan berikan komentar anda</textarea>
<br />
<input type="submit" value="Proses" >
</form>
</body>
</html>
Mengenal tag input
Tag input merupakan tag
paling banyak digunakan di dalam form, dan memiliki banyak bentuk, mulai
dari isian text biasa, text password, checkbox, radio, sampai dengan tombol
submit, semuanya dalam bentuk 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 text pendek. Input type text
ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal
dari text
<input
type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak
akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan
untuk inputan yang sensitif seperti password.
<input
type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang
oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox
memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked,
akan membuat chexkbox langsung terpilih pada saat pertama kali halaman
ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user
dapat dipilih beberapa hobi.
<input
type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu
diantara pilihan group radio. Type radio ini berada dalam suatu grup
dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah
jenis kelamin.
<input
type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada
baris terakhir dari form. Atribut value jika diisi akan membuat text
tombol submit berubah sesuai inputan nilai value.
Perhatikan
juga bahwa seperti tag img dan br, tag input juga merupakan tag yang berdiri
sendiri dan tidak membutuhkan penutup tag.
Mengenal tag textarea
Tag textarea pada dasarnya
sama dengan input type text, namun lebih besar dan dapat berisi banyak
baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows
dan cols, atau melalui CSS.
Contoh
penggunaan textarea adalah sebagai berikut:
<textarea
rows="5" cols="20">
Text yang
diisi dapat mencapai banyak baris</textarea>
|
Elemen yang
berada diantara tag textarea akan ditampilkan sebagai text awal dari
form
Mengenal tag
select
Tag select digunakan
untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari
nilai yang tersedia. Tag select digunakan bersama dengan tag option
untuk membuat box pilihan.
Contoh
penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan
1</option>
<option>Pilihan
2</option>
<option
value="pilihan ketiga">Pilihan 3</option>
</select>
|
Ketika form
dikirim untuk diproses, nilai dari tag option akan dikirimkan. Nilai ini adalah
berupa text diantara tag option, kecuali jika kita memberikan tag value. Jika
tag value berisi nilai, maka nilai value lah yang akan dikirim.
Sama seperti tag
option type checkbox dan type radio, atribut checked
dapat ditambahkan agar tag select berisi nilai awal, contoh penggunaanya
sebagai berikut:
<select>
<option>Pilihan
1</option>
<option>Pilihan
2</option>
<option
value="pilihan ketiga" selected>Pilihan 3</option>
</select>
|
Mengenal atribut names
Setiap tag
inputan di dalam form harus ditambahkan atribut names agar bisa dikenal
berbeda antara satu dengan yang lain. Di dalam halaman proses (yang biasanya
berupa bahasa PHP atau ASP), nilai dari nama inilah yang akan
diproses. Contoh pemakaiannya sebagai berikut:
<input type="text"
name="username">
<input type="text"
name="email">
|
Kedua input
diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing
akan dibedakan menurut atribut name.
