Advertisement
1) Format formulir secara horisontal
Untuk
membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya
digunakan elemen HTML <table> untuk memformat form tersebut. Secara umum
layout dari form adalah layout horizontal, yakni layout dimana setiap input
ditempatkan di samping dari label keterangan masing- masing input tersebut.
Berikut ini adalah contoh dari penggunaan elemen <table> untuk memformat
tampilan form secara horizontal :
|
<html>
<head><title>CONTOH
TAG FORM</title></head>
<body>
<form
method="Post">
<table
border=0 width="75%">
<tr>
<td
width="25%">NPM</td>
<td><INPUT TYPE="TEXT"
Name="NPM" MAXLENGTH="10"
SIZE="11"></td>
</tr>
<tr>
<td width="25%">Nama
Mahasiswa</td>
<td><INPUT TYPE="TEXT"
Name="NamaMHS" MAXLENGTH="25"
SIZE="25"></td>
</tr>
<tr>
<td
width="25%">Alamat</td>
<td><INPUT TYPE="TEXT"
Name="Alamat" MAXLENGTH="50"
SIZE="40"></td>
</tr>
<tr>
<td width="25%">Jenis
Kelamin</td>
<td><INPUT TYPE="RADIO"
Name="Jenkel" CHECKED VALUE="Laki2">Laki-laki
<INPUT TYPE="RADIO"
Name="Jenkel" VALUE="Perempuan">Perempuan
</td>
</tr>
<tr>
<tr>
<td
width="25%">Jurusan</td>
<td><SELECT
Name="Jurusan">
<OPTION
VALUE="KA">Komputer Akuntansi
<OPTION
VALUE="MI">Manajemen Informatika
<OPTION
VALUE="TK">Teknik Komputer
</SELECT>
</td>
</tr>
<tr>
<td
width="25%">Fasilitas</td>
<td><INPUT
TYPE="CHECKBOX">Flash Disk</td>
</tr>
<tr>
<td></td><td><INPUT
TYPE="CHECKBOX">Bakal Baju</td>
</tr>
<tr>
<td></td><td><INPUT
TYPE="CHECKBOX">Bakal Jas</td>
</tr>
<td></td>
<td><INPUT TYPE="SUBMIT"
VALUE="Simpan">
<INPUT TYPE="RESET"
VALUE="Batal">
</td>
</tr>
</table>
</form>
|
Note : Teks berwarna merah diatas bisa anda sesuaikan dengan keinginan.
Dan
berikut ini adalah tampilan dari form yang telah di tulis di atas :
2) Format formulir secara vertikal
Sejalan
dengan perkembangan teknologi mobile, halaman web yang berbasis mobile tentunya
sebuah halaman web di dalam perangkat mobile akan memerlukan form di dalam
menerima input dari pengguna. Untuk menyesuaikan dengan lebar layar dari
perangkat mobile, misalkan handphone ataupun ipad, maka layout dari sebuah
halaman web harus disesuaikan, termasuk juga untuk layout dari sebuah form. Umumnya
apabila sebuah form akan digunakan pada aplikasi mobile, layout yang diterapkan
adalah layout secara vertikal, sesuai dengan karakteristik layar yang tidak
terlalu besar. Berikut ini adalah contoh dari sebuah form dengan layout
vertikal.
|
<!DOCTYPE html>
<html>
<head>
<title>cek
form </title>
</head>
<body>
<FORM
METHOD="POST" ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM DATA SISWA</H4>
<INPUT TYPE="text"
NAME="var1" SIZE="30" VALUE="Masukan nama.">
<BR><BR>
<B>Apakah Anda Siswa?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>Berapa umur Anda?</B>
<BR>
<INPUT TYPE="radio"
NAME="var3" VALUE="r1">10 - 15
<BR>
<INPUT TYPE="radio"
NAME="var3" VALUE="r2">16 - 20
<BR>
<INPUT TYPE="radio"
NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<INPUT TYPE="submit"
NAME="var4" VALUE="Kirim">
<INPUT TYPE="reset"
NAME="var5" VALUE="Hapus">
</form
</body>
</html>
|
Note : Teks berwarna merah diatas bisa anda sesuaikan dengan keinginan.
Dan
hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut :
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon