Scribd
Unggah
52 tayangan22 halaman

Tabel Dan Form Di HTML

Tabel merupakan salah satu cara menyajikan informasi secara terstruktur dalam web dengan menggunakan baris, kolom, sel dan garis. HTML menyediakan beberapa tag untuk membuat tabel seperti <table>, <tr>, <td>, <th> dan atribut seperti border, cellpadding untuk mengatur penampilan tabel."

Diunggah oleh

richsparlingmail.com Parlin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
52 tayangan22 halaman

Tabel Dan Form Di HTML

Tabel merupakan salah satu cara menyajikan informasi secara terstruktur dalam web dengan menggunakan baris, kolom, sel dan garis. HTML menyediakan beberapa tag untuk membuat tabel seperti <table>, <tr>, <td>, <th> dan atribut seperti border, cellpadding untuk mengatur penampilan tabel."

Diunggah oleh

richsparlingmail.com Parlin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 22

Salah satu cara atau format menampilkan informasi dalam web adalah dengan

tabel.

Tabel terdiri dari 4 unsur utama:

1. Baris
2. Kolom
3. Sel
4. Garis

Lalu, bagaimana cara membuat tabel di HTML?

Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.

Tag untuk Membuat Tabel di HTML


Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

1. Tag <table> untuk membungkus tabelnya


2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header

Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>.
Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh
tidak.

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>

<head>

<title>Belajar Membuat Tabel HTML</title>

</head>

<body>

<table>

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

</body>

</html>
Hasilnya:

Kok tidak ada garisnya?

Iya, karena kita tidak menambahkan atribut border pada tabelnya.

Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam


tag <table>.

Sehingga akan menjadi seperti ini:

<table boder="1">

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

Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya,
maka akan semakin besar pula ukuran garisnya.

Nilai "1" adalah ukuran garis yang palng kecil.


Hasilnya akan sepert ini:

Mengatur Jarak Sel dengan Cellpadding


Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di
dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh:

<table border="1" cellpadding="10">

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

Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan
garis.
Maka hasilnya:

Menambahkan Warna pada Sel dan Baris


Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan
atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

<table border="1" cellpadding="10">

<tr>

<td bgcolor="yellow">Baris 1 kolom 1</td>

<td>baris 1 kolom 2</td>

</tr>

<tr bgcolor="#00ff80">

<td>Baris 2 kolom 1</td>

<td>baris 2 kolom 2</td>

</tr>

</table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau
nama warna dalam bahasa inggris.
Maka hasilnya akan seperti ini:

Menggabungkan Sel Tabel


Atribut yang digunakan untuk menggabungkan sel tabel
adalah rowspan dan colspan:

 rowspan untuk menggabungkan baris;


 colspan untuk menggabungkan kolom.

Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Mari kita lihat contohnya:

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Tabel HTML</title>

</head>

<body>
<table border="1">

<tr>

<th rowspan="2" bgcolor="yellow">Bulan</th>

<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>

</tr>

<tr>

<th>Padi</th>

<th>Kacang</th>

</tr>

<tr>

<td>Januari</td>

<td>500 Kg</td>

<td>231 Kg</td>

</tr>

<tr>

<td>Februari</td>

<td>342 Kg</td>

<td>423 Kg</td>

</tr>

<tr>

<td>Maret</td>

<td>432 Kg</td>

<td>124 Kg</td>

</tr>
<tr>

<td>April</td>

<td>453 Kg</td>

<td>523 Kg</td>

</tr>

</table>

</body>

</html>

Hasilnya:

Menyisipkan Elemen yang Lain ke dalam Sel


Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain,
seperti gambar, link, video, list, dsb.

Contoh:

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Tabel HTML</title>


</head>

<body>

<table border="1">

<tr>

<th colspan="3" bgcolor="yellow">Produk Unggulan</th>

</tr>

<tr>

<td rowspan="4">

<img src="https://www.petanikode.com/img/bibit.png" width="200" />

</td>

</tr>

<tr>

<td>Nama</td>

<td>Benih Kode</td>

</tr>

<tr>

<td>Harga</td>

<td>Rp 192.000</td>

</tr>

<tr>

<td>Fitur</td>

<td>

<ul>

<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>

<li>Masa Tanam: 6 Bulan</li>

<li>Lisensi: MIT</li>

</ul>

</td>

</tr>

</table>

</body>

</html>

Hasilnya:

Apa Selanjutnya?
Bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel.
Karena kita harus teliti, berapa ukuran sel yang akan digabungkan
dengan rowspan dan colspan

Membuat Form di HTML


Web tidak hanya digunakan untuk menampilkan informasi saja…
…Web juga digunakan untuk mengambil informasi atau data dari pengunjung.

Salah satu cara untuk mengambil informasi dari pengunjung ialah


menggunakan form.

Form dalam web bisa disamakan dengan formuliar di dunia nyata.

Form dapat diisi, kemudian diproses dengan program tertentu.

Pada tutorial ini, kita akan belajar cara membuat form di HTML.

Hanya membuat saja tidak sampai memproses datanya.

Form di HTML dapat kita buat dengan tag <form>.

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

 action untuk menentukan aksi yang akan dilakukan saat data dikirim;
 method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">

<!-- form field di sini -->

</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL


dari endpoint yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh


file prosess.php untuk memproses data form.

Ini nanti akan kita pelajari pada PHP.

Kode HTML di atas, tidak akan menghasilkan apa-apa.

Karena kita belum membuat field-nya.

Apa itu Field?


Field adalah ruas yang dapat diisi dengan data.
Contoh field:

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

1. type merupakan type dari field.


2. name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam
program.

Latihan: Membuat Form Login


Sebagai latihan, mari kita buat form login.

Pada form login, terdapat beberapa field dan elemen:

1. Field untuk input username atau email;


2. Field untuk input password;
3. Checkbok untuk remember me;
4. Tombol untuk login.

Berikut ini kodenya:

<!DOCTYPE html>

<html>

<head>

<title>Form Login</title>

</head>

<body>

<form action="login.php" method="POST">

<fieldset>

<legend>Login</legend>

<p>

<label>Username:</label>

<input type="text" name="username" placeholder="username..." />


</p>

<p>

<label>Password:</label>

<input type="password" name="password" placeholder="password..." />

</p>

<p>

<label><input type="checkbox" name="remember" value="remember" /> Remember me</label>

</p>

<p>

<input type="submit" name="submit" value="Login" />

</p>

</fieldset>

</form>

</body>

</html>

Hasilnya:

Sekarang perhatikan!

Pada kode di atas, kita membuat empat buah filed:


1. input username dengan tipe text;
2. input password dengan tipe password;
3. input remember dengan tipe checkbox;
4. input submit dengan tipe submit;

Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>.

Nanti tag <fieldset> ini akan membuat sebuah garis.

Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks
pada fieldset.

Lalu, perhatikan juga atirbut yang digunakan pada setiap field.

 Atribut placeholder untuk menampilkan teks sementara (placeholder);


 Atribut value untuk membreikan nilai default pada field.

Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan
sebuah label dengan tag <label>.

Latihan: Membuat Form Contact


Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk
menghubungi atau kontak admin.

Silahakan ikuti kode berikut:

<!DOCTYPE html>

<html>

<head>

<title>Contact Us</title>

</head>

<body>

<form action="contact.php" method="POST">

<fieldset>

<legend>Contact</legend>

<p>

<label>Name:</label>
<input type="text" name="name" placeholder="your name..." />

</p>

<p>

<label>Subject:</label>

<input type="text" name="subject" placeholder="subject..." />

</p>

<p>

<label>Email:</label>

<input type="email" name="email" placeholder="your email..." />

</p>

<p>

<input type="submit" name="submit" value="Send" />

</p>

</fieldset>

</form>

</body>

</html>

Hasilnya:
Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed
ini harus diisi dengan email saja.

Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan
peringatan.

Latihan: Membuat Form Register


Semakin banyak latihan, semakin bagus.

Berikutnya kita akan coba membuat form registrasi.

Form ini berisi field untuk:

 Input nama lengkap;


 Input username;
 Input email;
 Input password;
 Input jenis kelamin;
 Input Agama;
 Input Biografi.
 dsb.

Mari kita buat…

<!DOCTYPE html>

<html>

<head>

<title>Registrasi</title>

</head>

<body>

<form action="contact.php" method="POST">

<fieldset>

<legend>Registrasi</legend>

<p>

<label>Nama:</label>

<input type="text" name="nama" placeholder="Nama lengkap..." />

</p>

<p>

<label>Username:</label>

<input type="text" name="username" placeholder="Username..." />

</p>

<p>

<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />

</p>

<p>

<label>Password:</label>

<input type="password" name="password" placeholder="Passowrd..." />

</p>

<p>

<label>Jenis kelamin:</label>

<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>

<label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>

</p>

<p>

<label>Agama:</label>

<select name="agama">

<option value="islam">Islam</option>

<option value="kristen">Kristen</option>

<option value="hindu">Hindu</option>

<option value="budha">Budha</option>

</select>

</p>

<p>

<label>Biografi:</label>

<textarea name="biografi"></textarea>

</p>
<p>

<input type="submit" name="submit" value="Daftar" />

</p>

</fieldset>

</form>

</body>

</html>

Hasilnya:

Apa saja field baru yang ada di form tersebut?

1. Field radio;
2. Field <select><option>;
3. Field <textearea>.

Apa bedanya radio dengan checkbox?

Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.

Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita
gunakan checkbox.

Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya
berbeda.

Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.

Latihan: Membuat Form Tingkat Lanjut


Field-field di atas merupakan jenis field yang sering digunakan dalam
pembuatan form.

Masih ada jenis field lagi yang belum kita coba,


seperti meter, color, url, number, date, datetime, dsb.

Mari kita coba beberapa:

<!DOCTYPE html>

<html>

<head>

<title>Form HTML</title>

</head>

<body>

<form action="contact.php" method="POST">

<fieldset>

<legend>Form</legend>

<p>

<label>Alamat Web:</label>

<input type="url" name="name" placeholder="Masukan URL Web..." />

</p>
<p>

<label>Tanggal Lahir:</label>

<input type="date" name="tanggal" />

</p>

<p>

<label>Umur:</label>

<input type="number" min="10" max="90" name="umur" />

</p>

<p>

<input type="submit" name="submit" value="Send" />

</p>

</fieldset>

</form>

</body>

</html>

Hasilnya:
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan
browser versi terbaru.

Apa Selanjutnya?
Apa yang kita pelajari pada tutorial ini adalah tag dan field dasar—dan sering
digunakan—dalam pembuatan form.

Masih terdapat banyak tipe field lagi yang belum kita coba.
Seperti: meter, color, time, dsb

Anda mungkin juga menyukai