Catatan Kuliah Wiwi 11

MODUL PRAKTIKUM
PEMROGRAMAN INTERNET
PENANGANAN FORM DALAM HTML
DAN STYLE SHEET (CSS)
DISUSUN OLEH :
Astrid Lestari Tungadi, S.Kom
FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS ATMA JAYA
MAKASSAR
2014
FORM (FORMULIR)
Bila Anda suatu ketika ingin memasukkan informasi ke suatu situs web, maka anda
memerlukan fasiiltas khusus untuk keperluan tersebut. Dalam HTML Anda dapat membuat
tampilan halaman untuk menerima masukan dari pengunjung situs, kemudian menyimpannya
di situs Anda atau langsung dimunculkan kembali sebagai suatu halaman. Disinilah perlunya
menggunakan form.
Elemen form yang ditulis dalam bentuk tag <form>…</form> digunakan untuk
menangani pemasukan data dalam aplikasi web. HTML5 mendukung elemen-elemen form
yang tersedia pada versi sebelumnya dan sekaligus dilengkapi dengan fitur-fitur baru. Selain
itu, HTML5 juga menambahkan berbagai kontrol baru. Tabel 1 memperlihatkan seluruh
kontrol dalam form dan Tabel 2 menunjukkan browser-browser yang mendukung fitur baru
HTML5.
Tabel 1. Daftar Kontrol pada Form

Kontrol Deskripsi Keterangan
button tombol
checkbox kotak cek (pilihan bisa lebih dari satu)
color roda warna NEW
date tanggal tanpa zona waktu NEW
datetime tanggal dan waktu (beserta zona waktu) NEW
datetime-local tanggal dan waktu (tanpa zona waktu) NEW
email alamat email NEW
file pemilih file
hidden tidak terlihat
image gambar
month kontrol bulan (berisi bulan dan tahun, tanpa NEW
zona waktu)
number memasukkan data dalam bentuk spinner NEW
password pemasukan data password
radio tombol radio (pilihan hanya satu)
range kontrol slider NEW
reset tombol reset (mengosongkan form)
search field pencari NEW
submit tombol pengirim form
tel field nomor telepon NEW
text field teks
time kontrol waktu tanpa zona waktu NEW
url field pemasukan URL NEW
week kontrol tanggal yang berisi bilangan minggu- NEW
tahun dan bilangan minggu
Tabel 2. Browser dan Fitur Baru Kontrol Form yang Didukung
Chrome Internet Firefox Opera Safari
Kontrol
11 Explorer 9 4.0.1 11.10 5.0.5
color x x x x
date x x x
datetime x x x
datetime-local x x x
email x x
month x x x
number x x x
range x x
search x x x
time x x x
url x x
week x x x
Disini Anda akan berlatih membuat form dengan segala obyeknya, tetapi hanya sekedar form
untuk mengumpulkan data secara interaktif, tanpa memproses data tersebut. Di bagian ini
belum akan dibicarakan tentang pemrosesan data, oleh karena itu silakan mencoba-coba
setiap objek dalam form saja, dengan berbagai cara penempatannya yang memungkinkan.
1. Field Teks dan Password

<html>
<body>
<form>
Nama depan: <input type="text" name="namadepan">
<br>
Nama belakang: <input type="text"
name="namabelakang">
<br>
Password: <input type="password" name="password">
</form>
<p>
Perhatikan bahwa ketika Anda mengetikkan karakter-
karakter dalam suatu field password, browser akan menampilkan
asterisk atau bullet saja, bukannya karakter yang diketikkan.
</p>
</body>
</html>
2. Checkbox dan Tombol Radio

<html>
<body>
<form>
Saya memiliki sebuah sepeda: <input type="checkbox"
name="Sepeda">
<br>
Saya memiliki sebuah mobil: <input type="checkbox"
name="Mobil" value="ON">
<br>
Jenis kelamin Anda?
<br>
Pria: <input type="radio" name="Sex" value="pria">
<br>
Wanita: <input type="radio" name="Sex"
value="wanita" checked>
</form>
<p>
Ketika seorang pengguna memberikan klik mouse pada
sebuah tombol radio, tombol tersebut terlihat diberi tanda cek, dan
semua tombol lain yang berada dalam nama yang sama akan kehilangan
tanda cek-nya
</p>
</body>
</html>
3. Option (Kotak Pilihan Drop Down)

<html>
<body>
<form>
Mobil :
<select name="mobil">
<option value="volvo">Volvo
<option value="peugeot">Peugeot
<option value="fiat" selected>Fiat
<option value="jaguar">Jaguar
</select>
</form>
</body>
</html>
4. Tombol dan Fieldset

<html>
<body>
<fieldset>
<legend>
Informasi kesehatan:
</legend>
<form>
Tinggi : <input type="text" size="3">
Berat : <input type="text" size="3">
<br>
<input type="button" value="Ada tombol
disini">
</form>
</fieldset>
<p>
Bila tidak terlihat adanya border di sekeliling form
input, browser Anda sudah terlalu lama.
</p>
</body>
</html>
5. Field Input dan Tombol Submit

<html>
<body>
<form name="input"
action="http://www.w3c.org/form_action.asp" method="get">
Masukkan nama depan Anda: <input type="text"
name="namadepan">
<br>
Masukkan nama belakang Anda: <input type="text"
name="namabelakang" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
Bila Anda meng-klik tombol "Submit", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
<br>
Lihat pula perbandingan pada input typenya yang ada
value dan tidak
</p>
</body>
</html>
6. Email dan Date

<html>
<body>
<form name="input"
<fieldset>
<legend>Kontrol Email dan Date dalam
Form</legend>
Nama : <input type="text" name="nama">
<br>
E-mail : <input type="email" name="email">
<br>
Tanggal Lahir : <input type="date"
name="tgl_lahir">
<br>
<input type="submit" value="Simpan">
</fieldset>
</form>
<p>
Bila Anda meng-klik tombol "Simpan", Anda akan
<br>
Jika email Anda tidak divalidasi dan tampilan date
Anda secara kalender tidak jalan, Anda harus menjalankannya pada
browser Chrome terbaru
</p>
</body>
</html>
7. Range dan Number

<html>
<body>
<form name="input"
action="http://www.w3c.org/form_action.asp" method="get"
oninput="x.value=parseInt(a.value)">
<fieldset>
<legend>Kontrol Range dan Number dalam
Form</legend>
Bilangan : <input type="number"
name="bilangan">
<br>
Nilai : 0 <input type="range" id="a">100 =
<output name="x" for="a"></output>
<br>
Points: 0<input type="range" name="points"
min="1" max="10">10
<br>
</fieldset>
</form>
<p>
<br>
Jika bilangan, nilai, dan points tampak seperti
inputan text saja, Anda harus menjalankannya pada browser Chrome
terbaru
</p>
</body>
</html>
8. Tanggal dan Waktu

<html>
<body>
<form name="input"
<fieldset>
<legend>Kontrol Tanggal dan Waktu dalam
Form</legend>
Date : <input type="date" name="tipe_date">
<br>
DateTime : <input type="datetime"
name="tipe_datetime">
<br>
DateTime Local : <input type="datetime-local"
name="tipe_datetime_local">
<br>
Time : <input type="time" name="tipe_time">
<br>
Month : <input type="month" name="tipe_month">
<br>
Week : <input type="week" name="tipe_week">
<br>
</fieldset>
</form>
<p>
<br>
Jika semuanya tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
<br>
Khusus tipe datetime, hanya bisa jalan pada browser
opera dan safari
</p>
</body>
</html>
9. Color
<html>
<body>
<form>
<fieldset>
<legend>Kontrol Warna dalam Form</legend>
Warna : <input type="color" name="warna">
<br>
</fieldset>
</form>
<p>
<br>
Jika warna tampak seperti inputan text saja, Anda
</p>
</body>
</html>
10. Atribut Placeholder

<html>
<body>
<form>
<fieldset>
<legend>Menggunakan Placeholder</legend>
Nama : <input type="text" name="nama"
placeholder="Diisi yaa">
<br>
</fieldset>
</form>
<p>
Jika nama tampak seperti inputan text saja, Anda
</p>
</body>
</html>
11. URL dan Datalist

<html>
<body>
<form>
<fieldset>
<legend>Kontrol URL dan Datalist</legend>
Add your homepage : <input type="url"
name="homepage"><br>
<br>
Jenis Browsers : <input list="browsers"
name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
<input type="submit">
</fieldset>
</form>
<p>
Jika homepage Anda tidak divalidasi dan jenis
browsers Anda tampak seperti biasa saja, Anda harus menjalankannya
pada browser Chrome terbaru
</p>
</body>
</html>
STYLE SHEET (CSS)
Setelah semua yang Anda ketahui tentang dasar pembuatan
halaman web, kini tiba saatnya untuk membuat halaman web Anda
tampil lebih meyakinkan. Untuk keperluan tersebut, Anda dapat
menggunakan style sheet atau CSS. CSS tidak hanya dapat
membuat tampilan nampak lebih baik, tetapi dapat membuat
pengembangan halaman web menjadi jauh lebih efisien karena
menghilangkan semua kesulitan yang muncul pada halaman web
biasa tanpa style.
CSS (Cascading Style Sheet) merupakan fitur yang penting dalam
pembuatan Dynamic HTML (DHTML). Meskipun bukan
merupakan suatu keharusan dalam membuat web, akan tetapi
penggunaan style sheets merupakan kelebihan tersendiri.
Suatu style sheet merupakan feature yang digunakan untuk memformat & membuat layout
halaman web. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar.
Anda juga bisa menyebutnya sebagai template dari documents HTML yang
menggunakannya.
Cascading Style Sheets (CSS) dapat diinterpretasikan melalui 4 cara, yaitu sebagai berikut :
1. Secara Inline Style
Jika suatu perintah CSS diinterpretasikan secara inline maka akan tampak sebagai
berikut :
<html>
<head><title>My Personal Website</title></head>
<body>
<p style="text-align:center; letter-spacing:5em;
font:normal 20pt 'arial'">Welcome To My Website</p>
</body>
</html>
2. Secara Eksternal
Jika suatu perintah CSS akan direpresentasikan secara eksternal maka akan terlihat
sebagai berikut :
File style.css
h1
{
text-align : center;
letter-spacing : 5em;
background : green;
color : yellow;
font : normal 20pt ”Arial”;
}
File index.html
<html>
<head><title>My Personal Website</title></head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
3. Secara Embedding
Jika suatu perintah CSS akan direpresentasikan secara embeded maka akan terlihat
sebagai berikut :
<html>
<head>
<title>My Personal Website</title>
<style type=”text/css”>
p
{
text-align : left;
}
</style>
</head>
<body>
<p>Welcome to My Website</p>
</body>
</html>
Jika anda ingin menggunakan perintah CSS dalam file HTML anda, maka perintah
CSS selalu diawali dan diakhiri dengan tag <style> </style>.
4. Secara Import
Jika suatu perintah CSS akan direpresentasikan secara import maka akan terlihat
sebagai berikut :
File style.css
h1
{
text-align : center;
background : green;
color : yellow;
font : normal 20pt ”Arial”;
}
File index.html
<html>
<head>
<title>My Personal Website</title>
<style type=”text/css”>
@import url(”style.css”);
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
1. Buatlah kesimpulan dari video yang Anda pelajari tadi dalam
bentuk softcopy
2. Buatlah sebuah template sederhana dengan menggunakan HTML
dan CSS dengan bentuk tampilan dasar seperti di bawah ini dimana
4 menu tersebut terlink yang berisi atribut, elemen, tag terbaru
yang dimiliki oleh HTML dan CSS (Penggunaan warna tidak
terikat)

Catatan Kuliah Wiwi 11

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Catatan Kuliah Wiwi 11

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PRAKTIKUM

FAKULTAS TEKNOLOGI INFORMASI

Tabel 1. Daftar Kontrol pada Form

1. Field Teks dan Password

2. Checkbox dan Tombol Radio

3. Option (Kotak Pilihan Drop Down)

4. Tombol dan Fieldset

5. Field Input dan Tombol Submit

6. Email dan Date

7. Range dan Number

8. Tanggal dan Waktu

10. Atribut Placeholder

11. URL dan Datalist

Anda mungkin juga menyukai