Membuat Link ke Bagian Tertentu dalam Dokumen Lain Jalankan aplikasi Text Editor
1) Format form secara horizontal
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
123 | P a g e
<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>
124 | P a g e 2) Format form 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.
<html> <head>
<title>Contoh Layout Form Vertikal<title> </head>
<body>
<FORM METHOD="POST" ACTION="mailto:[email protected]">
<H4>FORM</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="Enter your name here.">
<BR><BR>
<B>Are you a student?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>How old are you?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
<BR>
125 | P a g e
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Send">
<INPUT TYPE="reset" NAME="var5" VALUE="Clear"> </FORM>
</body> </html>
126 | P a g e c. Rangkuman
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. 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.
d. Tugas :
e. Test Formatif.
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan.
1. Jelaskan fungsi dari elemen-elemen table untuk memformat tampilan form
2. Jelaskan perbedaan dari format horizontal dan format secara vertikal dari sebuah form
f. Lembar Jawaban Test Formatif (LJ).
LJ- 01 : fungsi dari elemen tabel untuk form
... ... ...
127 | P a g e ... ... ... ... ... ... ...
LJ- 01 : perbedaan formt horisontal dan vertikal form
... ... ... ... ... ... ... ... ...129 | P a g e
DAFTAR PUSTAKA
- Betha sidik, Ir., Husni I. Pohan, Ir., M.Eng. (Juni 2012) , Pemrograman
Web Dengan HTML Revisi Keempat, Penerbit Informatika Bandung
- Budi Raharjo (September 2011), Belajar Pemrograman Web, Penerbit
Modula, Bandung, Penerbit O'Reilly Media, Inc.: Kanada
- Jennifer Niederst Robbins , Learning Web Design 4th Edition
- Purnama Pupung Budi (2004), Kiat Praktis menjadi Desainer Web Profesional, PT Elex Media Komputindo, Jakarta
- Simarmata Janner (2010), Rekayasa Web, Penerbit Andi, Yogyakarta
- Wahana Komputer (2013), Teknik Singkat dan Cepat Menguasai CSS3, Penerbit Andi, Yogyakarta