Perancangan Web ( Pertemuan 4 ) Membuat Form dan Tabel

Posted by : Unknown Friday, March 21, 2014


FORM HTML

Form HTML merupakan tag yang paling penting khususnya dalam
membuat aplikasi berbasis web. Form menyediakan properti masukan
yang dapat berupa textbox, checkbox, radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form>.....</form>.
Di dalam tag ini akan mendefinisikan elemen-elemen form seperti yang
telah disebutkan di atas. Selain tag elemen, form juga dapat menuliskan
sembarang teks, tag, image.
Monday, August
Atribut Elemen Form
action = lokasi dan nama file (file yang menangani form)
method = [ get | post ] (metode HTTP untuk men-submit form)

Properti Masukan Pada Elemen Form
  • Text box <input type=”text”>
Digunakan untuk memasukkan input berupa text.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
value = akan menampilkan isinya sebagai nilai default
  • Password <input type=”password”>
Digunakan untuk memasukkan password.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
  • Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
  • Check box <input type=”checkbox”>
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
checked (checkbox yang ditandai)
  • Radio button <input type=”radio”>
Radio button digunakan untuk dapat memilih hanya salah satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
checked (radio button yang ditandai)
  • Push button <input type=”button”>
Elemen ini biasanya digunakan untuk JavaScript, VBScript, atau script lain untuk
menghasilkan suatu aksi.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = label teks di atas tombol
  • Submit <input type=”submit”>
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama variabel dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = label teks di atas tombol
  • Image submit button <input type=”image” src=”URL”>
Digunakan untuk menggantikan tombol standar submit dengan image.
name = nama dari variabel yang dikirim ke suatu aplikasi
  • Reset <input type=”reset”>
Digunakan untuk mereset (menghapus) semua masukan dalam form dengan cepat.
value = label teks di atas tombol.
  • Text area <textarea> . . . </textarea>
Elemen untuk memasukkan teks secara leluasa seperti pada notepad.
name = nama dari variabel yang dikirim ke suatu aplikasi
rows = panjang baris dalam karakter
cols = tinggi (jumlah baris)
  • Select <select> . . . </select>
Daftar isi dalam properti select menggunakan tag <option>
name = nama dari variabel yang dikirim ke suatu aplikasi
size = jumlah pilihan yang dapat terlihat
  
Contoh script :

<html>
<head>
<title bgcolor="#FFFFCC">Latihan-Membuat Form</title>
</head>
<body>
<form action=# method=get>
<p>Nama : <input type=text name=nama>
<p>Alamat : <textarea name=alamat cols=25 rows=4></textarea>
<p>Jenis kelamin:
<input type=radio name=gender value=Pria>Laki-laki
<input type=radio name=gender value=Wanita>Perempuan
<p>Tgl. Lahir:
<select name=tgl>
<option value="1">01
<option value="2">02
<option value="3">03
<option value=31>31
</select> -
<select name=bln>
<option value="1">01
<option value="2">02
<option value="3">03
<option value="12">12
</select> -
<select name=thn>
<option value="1901">1901
<option value="1902">1902
<option value="1903">1903
<option value="2000">2000
</select>
<p>Pekerjaan :
<select name=pekerjaan>
<option value="Pelajar">Pelajar/Mahasiswa
<option value="Pegawai Negeri">Pegawai negeri
<option value="Karyawan">Karyawan
<option value="Wiraswasta">Wiraswasta
</select>
<p>Hobby :
<input type=checkbox name=hobby value="Membaca">Baca buku
<input type=checkbox name=hobby value="Kesenian">Kesenian
<input type=checkbox name=hobby value="Olahraga">Olah raga
<input type=checkbox name=hobby value="Belanja">Shopping
<p>Komentar : <textarea name=komentar cols=25 rows=4></textarea>
<p><input type=submit value=Kirim data><input type=reset value=Ulangi>
</form>
</body>
</html>



Membuat Tabel

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer
sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen
HTML.
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>.
Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya
terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<tr>
<td> data baris 1 kolom 1 </td>
<td> data baris 1 kolom 2 </td>
</tr>
<tr>
<td> data baris 2 kolom 1 </td>
<td> data baris 2 kolom 2 </td>
</tr>
</table>

Contoh sederhana

<html>
<head>
<title>Pendaftaran Member Fans JAF</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,td,th {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: large;
    color: #0F3;
}
body {
    margin-left: 100px;
    margin-top: 0px;
    margin-right: 50px;
    margin-bottom: 0px;
    background-image: url(apik.jpg);
    background-repeat: repeat;
}
</style>
</head>
<body>
<table width="652" height="471" align="center" cellpadding="1" cellspacing="1">
<tr>
  <td colspan="3" align="center" valign="middle"><strong>FORM PENDAFTARAN MEMBER FANS JAFriends></strong></td>
  </tr>
<tr>
  <td width="100">Nama</td>
  <td width="9">:</td>
  <td><input type=text name=nama></td>
</tr>
<tr>
  <td>Alamat</td>
  <td>:</td>
  <td><textarea name=alamat2 cols=40 rows=4></textarea></td>
</tr>
<tr>
  <td>Jenis Kelamin</td>
  <td>:</td>
  <td><input type=radio name=gender value=Pria>
    Laki-laki</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td><input type=radio name=gender value=Wanita>
    Perempuan</td>
</tr>
<tr>
  <td>Tanggal Lahir</td>
  <td>:</td>
  <td><select name=tgl>
    <option value="1">01
      <option value="2">02
        <option value="3">03
        <option value=31>31
        </select>    -
    <select name=bln>
      <option value="1">01
        <option value="2">02
        <option value="3">03
        <option value="12">12
        </select>    -
    <select name=thn>
      <option value="1901">1901
        <option value="1902">1902
        <option value="1903">1903
        <option value="2000">2000
        </select></td>
  </tr>
<tr>
  <td>Pekerjaan</td>
  <td>:</td>
  <td><select name=pekerjaan>
    <option value="Pelajar">Pelajar/Mahasiswa
      <option value="Pegawai Negeri">Pegawai negeri
        <option value="Karyawan">Karyawan
        <option value="Wiraswasta">Wiraswasta
</select></td>
  </tr>
<tr>
  <td>Hobby</td>
  <td>:</td>
  <td><input type=checkbox name=hobby value="Membaca">Baca buku
    <input type=checkbox name=hobby value="Kesenian">Kesenian</td>
  </tr>
<tr>
  <td></td>
  <td></td>
  <td><input type=checkbox name=hobby value="Olahraga">Olah raga
    <input type=checkbox name=hobby value="Belanja">Shopping</td>
  </tr>
<tr>
  <td>Komentar</td>
  <td>:</td>
  <td><textarea name=komentar cols=40 rows=4></textarea></td>
  </tr>
<tr>
  <td></td>
  <td></td>
  <td><input type=submit value=Kirim data><input type=reset value=Ulangi></td>
  </tr>
</table>
</body>
</html>


{ 2 comments... read them below or Comment }

Search Me

Blog Archive

Powered by Blogger.

- Copyright © Tutorial Multimedia -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -