Tabel dan Form

Diposting oleh Unknown di 22.06


MEMBUAT TABEL DAN FORM

1.   Membuat Tabel

Untuk membuat halaman web atau halaman html yang yang baik dan rapi maka digunakan sebuah tabel dalam hlaman html.Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk membuat tabel digunakan tag <table>..... </table> untuk memulai membuat tabel.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).

            Komposisi utama dalam sebuah tabel :

1.      Tag <table> ….. </table>
Tag awal dan akhir membuat tabel di html.Tag tabel memiliki beberapa atribut seperti height, width, border lainnya untuk mengatur tinggi tabel, lebar tabel, dan tebal garis tepi, dan masih banyak lagi atribut table dalam html.

2.      Tag <th> ….. </th>
Tag <th> pengganti tag <td> digunakan untuk membuat header titel dari baris maupun kolom. Secara default teks pada tag <th> menggunakan teks tebal dan letaknya di tengah pada baris.

3.      Tag <caption> ….. </caption>
Tag caption digunakan untuk membentuk judul pada table .

4.      Tag <tr> ….. </tr>
Mendefinisikan baris dalam tabel. Kita dapat mengatur teks dalam satu baris banyak kolom menggunakan : atribut color (warna), letak teks,dll seperti rata kiri, rata kanan, warna teks, dll.
5.      Tag <td> ….. </td >
Tag td digunakan untuk membuat kolom tabel yang berisi data. Tag td memiliki beberapa atribut di antaranya color, background. Pada table kita bisa membuat banyak kolom dengan tag td.

6.      Atribut <colspan>
Atribut colspan pada html tabel digunakan untuk menggabungkan dua atau lebih kolom agar lebih menarik. Nilainya bisa bervariasi tergantung kebutuhan, misalnya <td colspan=”2″>…</td>. Yang artinya menggabungkan 2 kolom.

7.      Atribut <rowspan>
Dalam html sederhana atribut rowspan digunakan untuk menggabungkan dua atau lebih baris pada tabel html. contoh: <td rowspan=”2″> artinya menggabungkan 2 baris menjadi satu baris.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai     
kebutuhan bentuk tabel yang diinginkan.

·       Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
Contoh :
 
    <tr>
                   <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
    </tr>
    <tr>
                   <td style="width:50%">Baris 2 Kolom 1</td>
                   <td>Baris 2 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 3 Kolom 1</td>
                   <td>Baris 3 Kolom 2</td>
    </tr>
 
·         Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
Contoh :

    <tr>
                   <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2    
    pada Kolom 1</td>
                   <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 2 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 3 Kolom 1</td>
                   <td>Baris 3 Kolom 2</td>
    </tr>
 
·         Mengatur jarak kolom pada tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell,Contoh :

<table border="1" width="75%" cellpadding="8">
    <tr>
                   <td style="width:50%;">Baris 1 Kolom 1</td>
                   <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 2 Kolom 1</td>
                   <td>Baris 2 Kolom 2</td>
    </tr>

Cellspacing adalah pengaturan sisi dari bagian luar cell,Contoh :

<table border="1" width="75%" cellspacing="8">
    <tr>
                   <td style="width:50%">Baris 1 Kolom 1</td>
                   <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 2 Kolom 1</td>
                   <td>Baris 2 Kolom 2</td>
    </tr>
 
·         Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
 
<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
    <tr>
                   <th style="width:50%;">Header Kolom 1</th>
                   <th>Header Kolom 2</th>
    </tr>
    <tr>
                   <td>Baris 1 Kolom 1</td>
                   <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 2 Kolom 1</td>
                   <td>Baris 2 Kolom 2</td>
    </tr>
</table>
 
Hasil:
Disini adalah titel tabel ini
Header Kolom 1
Header Kolom 2
Baris 1 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom 1
Baris 2 Kolom 2

·         Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
    <tr>
                   <th style="background:red;width:50%;">Header Kolom 1</th>
                   <th style="background:red;">Header Kolom 2</th>
    </tr>
    <tr>
                   <td>Baris 1 Kolom 1</td>
                   <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
                   <td>Baris 2 Kolom 1</td>
                   <td>Baris 2 Kolom 2</td>
    </tr>
</table>
 
Hasil:
Header Kolom 1
Header Kolom 2
Baris 1 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom 1
Baris 2 Kolom 2


Salah satu scrip tabel dalam Html :


<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat tabel </title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>

Referensi :
http://htmlcssguides.com/tabel-table-html

2.   Membuat Form

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.

Tag dasar yang akan bisa digunakan untuk membuat form pada HTML adalah tag form, input, textarea, select dan option.Untuk membuat form diawali dengan tag  <form> dan diakhiri dengan </form>. 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.
·         Method berfungsi 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 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 dalam 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

10)      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

11)         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>

Salah satu scrip Form dalam 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>

Referensi :

http://www.impoint.info/2013/07/membuat-form-pada-html.html#axzz2xAI9EjdC












Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)