Fungsi form secara umum banyak digunakan untuk proses input ke
database, dimana dapat menyimpan nilai-nilai yang diisi pengguna. Selain itu form memungkinkan user dapat berkomunikasi dengan user lain,
hal ini tetap didasari komunikasi antara server dengan client biasanya
diolah menggunakan bahasa pemrograman server-side entah itu php, phyton
dan lain-lain. Seperti kita jumpai pada situs jejaring sosial seperti
facebook dan twitter semua berbasis form untuk pengolahan data mulai
dari pendaftaran, login, update dan lain-lain.
Di sini saya akan membuat salah satu contoh coding formulir pada HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulir</title>
</head>
<body background="amik.jpg">
<form>
<table bgcolor="A9C5EB" align="center" height="200" width="800" cellpadding="20">
<tr><th colspan="3"><h1><center> PINJAMAN BUKU PERPUSTAKAAN</center></h1>
<h1><center>KAMPUS AMIK ROYAL KISARAN </center></h1></th></tr>
<table bgcolor="A9C5EB" align="center" height="700" width="800" cellpadding="20">
<tr> <td>Nama</td> <td>:</td>
<td> <input type="text" name="Nama" size="50"></td></tr>
<tr> <td> Alamat </td> <td>:</td>
<td> <input type="text" name="Alamat" size="50"></td></tr>
<tr> <td>T. Tanggal Lahir</td><td>:</td>
<td><input type="text" name="Tempat" size=15>
<select name="Tgl">
<option name="Tgl">Tgl
<option name="Tgl">3
<option name="Tgl">4
<option name="Tgl">5
<option name="Tgl">6
<option name="Tgl">7
</select>
<select name="Bln">
<option name="Bln">Bln
<option name="Bln">Mei
<option name="Bln">Juni
<option name="Bln">Juli
<option name="Bln">Agustus
<option name="Bln">September
</select>
<select name="thn">
<option name="thn">thn
<option name="thn">1993
<option name="thn">1994
<option name="thn">1995
<option name="thn">1996
<option name="thn">1997
</select>
</td></tr>
<tr> <td> Jenis Buku </td> <td>:</td>
<td> <select name="genre"td>
<option value="" selected="selected">--Pilih
<option value="Horor">Horor
<option value="Detective">Detective
<option value="Romance">Romance
<option value="Teen Leet">Teen Leet
<option value="Erotic">Erotic
</select></td></tr>
<tr> <td> No. Buku </td> <td>:</td>
<td><input type="radio" name="no buku" value="1">001
<input type="radio" name="no buku" value="2">002
<input type="radio" name="no buku" value="3">003
<input type="radio" name="no buku" value="4">004
<input type="radio" name="no buku" value="5">005
</td>
</select></td></tr>
<tr> <td>Judul Buku</td> <td>:</td>
<td><input type="checkbox" name="pengarang" value="KH" checked="checked">Kata Hati<br>
<input type="checkbox" name="pengarang" value="GD">Ghost Dormitory<br>
<input type="checkbox" name="pengarang" value="JJ">Just Friends<br>
<input type="checkbox" name="pengarang" value="FF">Fifty Shades of Grey<br>
<input type="checkbox" name="pengarang" value="TS">The Silkworm<br>
</td>
<tr> <td> Pengarang </td> <td>:</td><br>
<td><input type="checkbox" name="pengarang" value="RG" checked="checked">Robert Galbraith<br>
<input type="checkbox" name="pengarang" value="BB">Bernard Batubara<br>
<input type="checkbox" name="pengarang" value="EJ">EL. James<br>
<input type="checkbox" name="pengarang" value="SR">Sucia Ramadhani <br>
<input type="checkbox" name="pengarang" value="BT">Billy Taylor<br>
</td></tr>
<tr> <td>Penerbit</td> <td>:</td>
<td> <select name="penerbit"td>
<option value="" selected="selected">--Pilih
<option value="GPU">Gramedia Pustaka Utama
<option value="M">Mizan
<option value="VB">Vintage Books
<option value="B">Bukune
<option value="DP">Delacorte Press
</td></tr>
<tr> <td>Lama Pinjaman</td> <td>:</td>
<td> <select name="lama pinjaman"td>
<option value="" selected="selected">--Pilih
<option value="1">1 hari
<option value="2">2 hari
<option value="3">3 hari
<option value="4">4 hari
<option value="5">5 hari
</td></tr>
<tr><td><p align="center">
<input type="submit" value="kirim">
<input type="reset" value="batal">
</p></td></tr>
</table>
</form>
</body>
</html>
Saya menggunakan Adobe Dreamweaver CS6.
 |
| Gambar 1.1 |
 |
| Gambar 1.2 |
 |
| Gambar 1.3 |
 |
| Gambar 1.4 |
Hasilnya akan seperti gambar di bawah ini:
 |
ps: saya menggabungkan dua capture jendela firefox agar
tampilan hasil coding html terlihat semua. |
Semoga bermanfaat. :)
1 komentar:
Terimakasih untuk postingannya.
Dan
Ditunggu postingan selanjutnya.
^_^
Posting Komentar