Tabel, Hyperlink,

dan Formulir pada HTML

KODE MODUL
20201017-4-2.0
Modul Praktikum Desain Antarmuka Pengguna
PENYUSUN Program Studi Pendidikan Teknologi Informasi
Retno Indah Rokhmawati, S.Pd., M.Pd. Jurusan Sistem Informasi
Hanifah Muslim Az-Zahra S.Sn., M.Ds Fakultas Ilmu Komputer
Kharis Alfian Universitas Brawijaya
Nabila Leksana Putri © 2020

“Belajar tentang pikiran dan ilmu pengetahuan,

tanpa belajar untuk memperkaya hati sama
 dengan tak belajar apa-apa.”

(Aristoteles)

Element <table> berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom
dan baris. Element <table> mempunyai attribute seperti align, bgcolor, border, cellpadding,
cellspacing, width, height.
 Zaman dahulu, table digunakan untuk mengatur tata letak / Layouting, akan
tetapi untuk HTML5 tidak disarankan untuk menggunakan table sebagai
layouting

Elemen – elemen yang dimiliki oleh <table>, antara lain yaitu :

● Caption
Element <caption> digunakan untuk membuat judul dari tabel. Element ini harus
berada di dalam <table>. Berikut adalah attribut yang dimiliki <table> :
Attribut Value Deskripsi

Align Top Memberikan caption

diatas tabel

Bottom Memberikan caption di

bawah tabel

Contoh penggunaan caption :

<table border="1">
<caption align="bottom">
Daftar Mahasiswa PTI 2016
</caption>
<tr>

3
<th>NIM</th>
<th>NAMA</th>
</tr>
<tr>
<td>165150600111001</td>
<td>Ahmad Sudemo</td>
</tr>
</table>

● <thead>, <tfoot>, <tbody>

Contoh penggunaan dari <thead>, <tfoot>, <tbody> :
 <table border="1">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Infak</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th>80.000</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Rodiah</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td>Inayah</td>
<td>30.000</td>
</tr>
</tbody>
</table>

Tampilan di web browser :

4
● Table Row
Untuk membuat baris tabel dapat menggunakan elemen <tr>,
Contoh penggunaan table row :
 <table border="1">
<tr>
<td>Baris Ke 1</td>
</tr>
<tr>
<td>Baris Ke 2</td>
</tr>
</table>

Tampilan di web browser :

<tfoot> ditulis setelah <thead> (ditengah-tengah), bukannya setelah <tbody>
(terakhir). Meskipun demikian, <tfoot> akan terlihat pada baris akhir tabel
secara visual

● Table Heading dan Table Data

Untuk membuat table heading dapat menggunakan elemen <th>, sedangkan table
data dapat menggunakan <td>, <th> dan <td> berada di dalam elemen <tr>. Attribut
yang dimiliki antara lain :
Attribut Value Deskripsi

Rowspan Number Untuk menggabungkan

beberapa baris Colspan

Number Untuk Menggabungkan

beberapa kolom

Contoh penggunaan :
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Annisa</td>
</tr>
</table>

5
Tampilan di web browser :
6
A. Hyperlink
Untuk menghubungkan antar halaman, dalam HTML disediakan sebuah tag a
(anchor) yang memungkinkan user untuk melakukan sebuah navigasi dalam website.
Dalam pengimplementasiannya, tag a memiliki beberapa attribut seperti href yang
berisikan alamat halaman yang bisa berupa alamat absolut atau relatif.
Alamat absolut adalah sebuah alamat situs web lain dan ditulis secara
lengkap misalnya : http://www.filkom.ub.ac.id, sedangkan alamat relatif
menghubungkan sebuah halaman web ke halaman web lain dalam satu
alamat url, contohnya : profile.html

Attribut yang dimiliki element a :

Attribut Value Deskripsi

href Link , id, email, tel, mailto Untuk menunjukan lokasi

yang akan dituju.

target _blankMembuka link pada jendela tab baru

7
_self Membuka
linkpadajendela
yangsamapadasaatdiklik
(default)

_parent Membuka linkpadaframe

induk

_top Membuka linkpadasatu

halamanpenuh
rel alternate Halamanyangdituju
merupakanhalaman
alternatifyangserupaatau
memiliki tujuanyangsama
denganhalamanyangsaat
itu dikunjungi

author Halaman yang dituju

merupakan halaman
pribadi pemilik website

bookmark Halamanyangdituju
biasanyahalamanyang
secaraumumbanyakdi
bookmark

help Halamanyangdituju
merupakanhalaman‘help’,
yangberisi konten
informasi istilah, dan cara,
seputar website tersebut

license Halaman yang dituju

merupakan halaman
informasi lisensi atau hak
cipta website tersebut

next Dokumen lanjutan dari

halaman yang saat itu
sedang
dibaca/dikunjungi.
Biasanya digunakan
dalam konteks ‘read more’

nofollow Halaman yang dituju

tidak memiliki relasi
dengan halaman yang
saat itu dikunjungi.
Biasanya ini untuk link
eksternal

Noreferrer Memberitahu browser

bahwa halaman yang
akan dituju tidak
diharuskan mengirim
header HTTP
 prefetch Memberitahu browser
bahwa halaman yang
akan dituju harus
di-cache, atau disimpan
data-datanya dalam
memori browser. (Data
yang dimaksudkan disini
yaitu file javascript, css,
dan file gambar).

8
prev Halaman yang dituju
merupakan konten
sebelumnya dari halaman
yang saat itu dikunjungi.

search Halaman yang dituju

merupakan halaman fitur
pencarian.

Contoh penggunaan sederhana hyperlink untuk berpindah halaman :

<a href="http://filkom.ub.ac.id">Website FILKOM</a>

Hasil di web browser :

B. Form
Form berfungsi untuk mendefinisikan sebuah formulir. Form dapat dibuat dengan

menggunakan element form. Contohnya :

<form action="" method="">

...
</form>

Pada contoh diatas, diketahui bahwa element form memiliki dua attribut utama yang
sering digunakan, yaitu action dan method. Attribut action berisikan aksi terhadap form
yang dikirim dan attribut method berisikan metode form melakukan proses pengiriman
(GET/POST).

Dalam sebuah formulir HTML bisa terdiri dari beberapa jenis element input, yaitu :
● Element Input
Element input digunakan untuk mendefinisikan masukan yang akan dimasukkan oleh
pengguna. Element ini memiliki beberapa attribut yang sering digunakan, yaitu :
Attribut Value Deskripsi

Name Teks Menentukan nama

untuk sebuah control
yang akan dikirim
Button, checkbox,
bersamaan dengan data
color, date, datetime,
form
datetime-local, email,
Type Jenis kontrol
file, hidden, image,
masukan yang akan
month,
digunakan,
number, password,
secara default jika tidak
radio, range, reset,
memasukkan attribut
search,
type, maka bernilai text.
submit, tel, text, url, week

9
Size Angka Menentukan lebar
sebuah masukan dalam
satuan pixel.

Value Teks / Angka Menentukan nilai dari

sebuah masukan,
(wajib untuk type
radio dan
checkbox)

Accept File extension. Digunakan untuk tipe

(audio/*, image/*, masukan file) untuk 5
video/*) menentukan tipe file
yang diterima oleh
form.

Alt Teks Digunakan sebagai

teks alternatif.

Autocomplete On / off Digunakan untuk

menentukan apakah
masukan secara
otomatis melengkapi
konten yang
sebelumnya telah
ditulis atau tidak.

Autofocus - Menentukan apakah

masukan akan di
highlight ketika form
pertama kali dimuat
 oleh web browser.

Checked - Digunakan untuk

menentukan bahwa
pilihan tersebut
terseleksi
pertama kali ketika
halaman dimuat.
(khusus untuk tipe
radio dan
checkbox)

Disabled - Menonaktifkan
control agar tidak
bisa dipilih /
diseleksi.

Max Angka dan Tanggal Menentukan nomor atau

tanggal maksimum yang
boleh dimasukkan
(berlaku untuk tipe
number dan date)

Maxlength Angka Menentukan maksimum

jumlah karakter yang
boleh disisipkan pada
element input (untuk tipe
: text, email, search,
pasword, tel dan url).

Min Angka dan Tanggal Menentukan nomor

atau tanggal minimum
yang boleh
dimasukkan pada
sebuah element

Pattern RegEX (Regular Menentukan batasan

Expression) atau pola yang akan 6
dimasukkan pada
element masukan.

10
Placeholder Teks Menentukan teks
yang dijadikan
isyarat untuk user.

Readonly - Menentukan bahwa

element masukan
hanya dapat dibaca,
tidak dapat diedit
 Required - Menentukan bahwa
element masukan
wajib diisi / tidak
boleh
dikosongkan.

Contoh penulisan dan penggunaan field input :

<input type="text" name="info" placeholder="Masukkan Teks">

Macam-macam input type pada elemen input :

1. Input Type Text
Mendefinisikan satu baris teks input
<form>
<label for="fname">Nama Depan :</label><br>
<input type="text" id="fname"
name="fname"><br> <label for="lname">Nama
Belakang :</label><br> <input type="text"
id="lname" name="lname">
</form>

Hasil tampilan di web browser :

2. Input Type Password

Mendefinisikan field untuk password
<form>
<label for="username">Username :</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password :</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Hasil tampilan di web browser :

11
3. Input Type Submit
Mendefinisikan button untuk mensubmit data yang akan dikirimkan
 <form action="/action_page.php">
<label for="fname">Nama Depan :</label><br>
<input type="text" id="fname" name="fname"
value="Nabil a"><br>
<label for="lname">Nama Belakang :</label><br> <input
type="text" id="lname" name="lname" value="Putri
"><br><br>
<input type="submit" value="Submit">
</form>

Hasil tampilan di web browser :

4. Input Type Reset

Mendefinisikan button reset yang akan menghapus semua nilai suatu form
menjadi nilai default dari form itu sendiri
<form action="/action_page.php">
<label for="fname">Nama Depan :</label><br>
<input type="text" id="fname" name="fname"
value="Nabil a"><br>
<label for="lname">Nama Belakang :</label><br> <input
type="text" id="lname" name="lname" value="Putri
"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Hasil tampilan di web browser :

12
5. Input Type Radio
Mendefinisikan button radio yang memungkinkan user untuk memilih hanya salah
satu pilihan dari beberapa pilihan yang tersedia
 <form>
<input type="radio" id="male" name="gender"
value="male ">
<label for="male">Laki-laki</label><br>
<input type="radio" id="female" name="gender"
value="fe male">
<label for="female">Perempuan</label><br>
<input type="radio" id="other" name="gender"
value="oth er">
<label for="other">Prefer not to say</label>
</form>

Hasil tampilan di web browser :

6. Input Type Checkbox

Mendefinisikan button checkbox yang memungkinkan user untuk memilih satu atau
banyak pilihan dari pilihan yang tersedia
<form>
<input type="checkbox" id="vehicle1" name="vehicle1"
va lue="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" va
lue="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" va
lue="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Hasil tampilan di web browser :

13
7. Input Type Button
Mendefinisikan sebuah button atau tombol
<input type="button" onclick="alert('Hello
World!')" value="Click Me!">
 Hasil tampilan di web browser :

● Element Select
Element select digunakan untuk mendefinisikan sebuah kontrol masukan yang
berisikan opsi pilihan. Element select memiliki beberapa atrribut antara lain :
Attribut Value Deskripsi

Multiple - Digunakan untuk

menentukan bahwa user
boleh menyeleksi lebih
dari satu pilihan dari
daftar yang ada.

Selain attribut tersebut, ada juga attribut autofocus, disabled, name, size,
required. Contoh implementasi select :
<select name="">
<option value="menu1">Menu 1</option>
</select>

Hasil tampilan di web :

● Element Option
Element option mendefinisikan opsi pilihan pada menu select, element ini
mempunyai attribut selected dan value. Contoh implementasi select :
<option value="menu1">Menu 1</option>
<option value="menu2">Menu 2</option>

14
Hasil tampilan di web :

● Element Optgroup
Optgroup digunakan untuk mengelompokkan beberapa item pilihan (option) di dalam
 daftar pilihan (select). Kelompok daftar dapat diberi label dengan menggunakan
attribut label.
<optgroup label="Jurusan Sistem Informasi">
<option>Pendidikan Teknologi Informasi</option>
<option>Sistem Informasi</option>
<option>Teknologi Informasi</option>
</optgroup>

Hasil tampilan di web :

● Element Textarea
Textarea digunanakan untuk kontrol masukan teks lebih dari satu baris. Untuk mengatur
tinggi dan lebar dari area teks dapat menggunakan attribut row dan cols. Contoh
penggunaan textarea :
<textarea rows="5" col="10">
Tuliskan teks disini
</textarea>

Hasil tampilan di web :

● Element Button
Elemen button digunakan untuk membuat sebuah tombol yang dapat diklik untuk
menjalankan tindakan tertentu.Button memiliki beberapa attribut, contohnya :
Attribut Value Deskripsi
Menentukan tipe /
Type Button, reset, submit
jenis dari button.

Formtarget _blank, _self, _parent, _topMenentukan target tampilan setelah

data form

15
 dikirimkan. Berlaku
untuk attribut
type=”submit”

Selain itu, juga ada attribut formenctype, formmethod, formnovalidate, value, name.
autofocus, disabled. Untuk membuat button dapat menggunakan <button> … </button>
Konten/teks didalam element button merupakan label dari tombol tersebut.
Pada <button> element, dapat pula memasukkan gambar sebagai tampilan
dari tombol itu sendiri, ini yang membedakan antara tombol yang dibuat
dengan element <button> dan element <input>.

16

1. Buatlah file HTML dengan tampilan berikut, lalu simpan dengan nama
latihan_modul4.html
note: semua inputan bersifat required!

17
2. Gunakan Template code yang telah disediakan
 <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Layouting Tabel dan Form</title>
<style>
table {
border: solid 1px black;
/* Mengartikan bahwasannya border type solid dengan ketebalan 1px dan
color */
border-collapse: collapse;
/* Untuk merge border menjadi 1 line */
}

td, th {
width: 100px;
height: 70px;
text-align: center;
vertical-align: middle;
}

td {
font-size: 11px;
}
</style>
<!-- Jangan Tambah atau kurangi CSS yang ada! -->

</head>

<body>

<!-- Replace command di body ini dengan code-->

<!-- Tulis code sesuai format aturan table dan form pada HTML -->
<!-- selamat mengerjakan -->

</body>

</html>

3. Kumpulkan dalam bentuk file pada kelas maya (google classroom), sertakan
screenshot hasil web dengan note nama dan nim!

18
1. Buatlah sebuah website sederhana yang terdiri dari dua halaman, yaitu index.html dan
form_pendaftaran.html, yang disimpan dalam satu folder bernama Modul4_Nama_NIM
dengan struktur yang rapi. Halaman index.html harus memiliki judul "Home"dan
menampilkan sebuah tabel yang memuat informasi tentang tiga sekolah, masing-masing
berisi Nama Sekolah, Alamat, Akreditasi, dan Jumlah Jurusan. Tabel harus dibuat
menggunakan thead untuk header dan tbody untuk isi tabel. Di bawah tabel,
tambahkan sebuah hyperlink bergaya tombol/button yang mengarah ke halaman
form_pendaftaran.html.

Halaman form_pendaftaran.html harus memiliki judul "Pendaftaran" dan berisi formulir

pendaftaran siswa baru dengan berbagai input, termasuk Nama Lengkap (input teks),
Alamat (textarea), Tempat & Tanggal Lahir (input teks dan date), Jenis Kelamin (radio
button), Pilihan Jurusan (checkbox), Agama (dropdown/select), Email (input email), No
HP (input number), dan Foto Diri (input file), dan sekolah yang dipilih dari 3 sekolah di
tabel (dropdown/select). Formulir ini harus ditata menggunakan tabel agar tampilan
lebih rapi. Tambahkan dua tombol, yaitu "Kirim/Submit" untuk mengirim data dan "Reset"
untuk menghapus isian formulir. Selain itu, sertakan hyperlink untuk kembali ke
index.html, namun ketika diklik harus membuka halaman dalam tab baru.

19
2. Output yang harus ada dalam laporan praktikum adalah:

a. link github yang berisi folder source code dengan nama Modul5_Nama_NIM.
b. link youtube berisi video penjelasan source code dan hasil.

3. Kumpulkan Laporan praktikum (.pdf) pada kelas maya yang ada dengan format yang
sudah disediakan!
20