PENANGANAN FORM DALAM HTML DAN STYLE SHEET (CSS)
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 … 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.
Kontrol
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Tabel 1. Daftar Kontrol pada Form
Deskripsi
tombol
kotak cek (pilihan bisa lebih dari satu)
roda warna
tanggal tanpa zona waktu
tanggal dan waktu (beserta zona waktu)
tanggal dan waktu (tanpa zona waktu)
alamat email
pemilih file
tidak terlihat
gambar
kontrol bulan (berisi bulan dan tahun, tanpa
zona waktu)
memasukkan data dalam bentuk spinner
pemasukan data password
tombol radio (pilihan hanya satu)
kontrol slider
tombol reset (mengosongkan form)
field pencari
tombol pengirim form
field nomor telepon
field teks
kontrol waktu tanpa zona waktu
field pemasukan URL
kontrol tanggal yang berisi bilangan minggutahun dan bilangan minggu
Keterangan
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
Tabel 2. Browser dan Fitur Baru Kontrol Form yang Didukung
Kontrol
color
date
datetime
datetime-local
email
month
number
range
search
time
url
week
Chrome
11
x
Internet
Explorer 9
x
x
x
x
x
x
x
x
x
x
x
x
Firefox
4.0.1
x
x
x
x
x
x
x
x
x
x
Opera
11.10
Safari
5.0.5
x
x
x
x
x
x
x
x
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
Nama depan:
Nama belakang:
Password:
Perhatikan bahwa ketika Anda mengetikkan karakterkarakter dalam suatu field password, browser akan menampilkan
asterisk atau bullet saja, bukannya karakter yang diketikkan.
2. Checkbox dan Tombol Radio
Saya memiliki sebuah sepeda:
Saya memiliki sebuah mobil:
Jenis kelamin Anda?
Pria:
Wanita:
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
3. Option (Kotak Pilihan Drop Down)
Mobil :
Volvo
Peugeot
Fiat
Jaguar
4. Tombol dan Fieldset
Informasi kesehatan:
Tinggi :
Berat :
Bila tidak terlihat adanya border di sekeliling form
input, browser Anda sudah terlalu lama.
5. Field Input dan Tombol Submit
Masukkan nama depan Anda:
Masukkan nama belakang Anda:
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.
Lihat pula perbandingan pada input typenya yang ada
value dan tidak
6. Email dan Date
Kontrol Email dan Date dalam
Form
Nama :
E-mail :
Tanggal Lahir :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika email Anda tidak divalidasi dan tampilan date
Anda secara kalender tidak jalan, Anda harus menjalankannya pada
browser Chrome terbaru
7. Range dan Number
Kontrol Range dan Number dalam
Form
Bilangan :
Nilai : 0 100 =
Points: 010
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika bilangan, nilai, dan points tampak seperti
inputan text saja, Anda harus menjalankannya pada browser Chrome
terbaru
8. Tanggal dan Waktu
Kontrol Tanggal dan Waktu dalam
Form
Date :
DateTime :
DateTime Local :
Time :
Month :
Week :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika semuanya tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
Khusus tipe datetime, hanya bisa jalan pada browser
opera dan safari
9. Color
Kontrol Warna dalam Form
Warna :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika warna tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
10. Atribut Placeholder
Menggunakan Placeholder
Nama :
Jika nama tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
11. URL dan Datalist
Kontrol URL dan Datalist
Add your homepage :
Jenis Browsers :
Jika homepage Anda tidak divalidasi dan jenis
browsers Anda tampak seperti biasa saja, Anda harus menjalankannya
pada browser Chrome terbaru
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 :
My Personal Website
Welcome To My Website
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
My Personal Website
Welcome to My Website
3. Secara Embedding
Jika suatu perintah CSS akan direpresentasikan secara embeded maka akan terlihat
sebagai berikut :
My Personal Website
p
{
text-align : left;
letter-spacing : 5em;
}
Welcome to My Website
Jika anda ingin menggunakan perintah CSS dalam file HTML anda, maka perintah
CSS selalu diawali dan diakhiri dengan tag .
4. Secara Import
Jika suatu perintah CSS akan direpresentasikan secara import 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
My Personal Website
@import url(”style.css”);
Welcome to My Website
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)
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 … 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.
Kontrol
button
checkbox
color
date
datetime
datetime-local
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Tabel 1. Daftar Kontrol pada Form
Deskripsi
tombol
kotak cek (pilihan bisa lebih dari satu)
roda warna
tanggal tanpa zona waktu
tanggal dan waktu (beserta zona waktu)
tanggal dan waktu (tanpa zona waktu)
alamat email
pemilih file
tidak terlihat
gambar
kontrol bulan (berisi bulan dan tahun, tanpa
zona waktu)
memasukkan data dalam bentuk spinner
pemasukan data password
tombol radio (pilihan hanya satu)
kontrol slider
tombol reset (mengosongkan form)
field pencari
tombol pengirim form
field nomor telepon
field teks
kontrol waktu tanpa zona waktu
field pemasukan URL
kontrol tanggal yang berisi bilangan minggutahun dan bilangan minggu
Keterangan
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
NEW
Tabel 2. Browser dan Fitur Baru Kontrol Form yang Didukung
Kontrol
color
date
datetime
datetime-local
month
number
range
search
time
url
week
Chrome
11
x
Internet
Explorer 9
x
x
x
x
x
x
x
x
x
x
x
x
Firefox
4.0.1
x
x
x
x
x
x
x
x
x
x
Opera
11.10
Safari
5.0.5
x
x
x
x
x
x
x
x
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
Nama depan:
Nama belakang:
Password:
Perhatikan bahwa ketika Anda mengetikkan karakterkarakter dalam suatu field password, browser akan menampilkan
asterisk atau bullet saja, bukannya karakter yang diketikkan.
2. Checkbox dan Tombol Radio
Saya memiliki sebuah sepeda:
Saya memiliki sebuah mobil:
Jenis kelamin Anda?
Pria:
Wanita:
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
3. Option (Kotak Pilihan Drop Down)
Mobil :
Volvo
Peugeot
Fiat
Jaguar
4. Tombol dan Fieldset
Informasi kesehatan:
Tinggi :
Berat :
Bila tidak terlihat adanya border di sekeliling form
input, browser Anda sudah terlalu lama.
5. Field Input dan Tombol Submit
Masukkan nama depan Anda:
Masukkan nama belakang Anda:
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.
Lihat pula perbandingan pada input typenya yang ada
value dan tidak
6. Email dan Date
Kontrol Email dan Date dalam
Form
Nama :
E-mail :
Tanggal Lahir :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika email Anda tidak divalidasi dan tampilan date
Anda secara kalender tidak jalan, Anda harus menjalankannya pada
browser Chrome terbaru
7. Range dan Number
Kontrol Range dan Number dalam
Form
Bilangan :
Nilai : 0 100 =
Points: 010
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika bilangan, nilai, dan points tampak seperti
inputan text saja, Anda harus menjalankannya pada browser Chrome
terbaru
8. Tanggal dan Waktu
Kontrol Tanggal dan Waktu dalam
Form
Date :
DateTime :
DateTime Local :
Time :
Month :
Week :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika semuanya tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
Khusus tipe datetime, hanya bisa jalan pada browser
opera dan safari
9. Color
Kontrol Warna dalam Form
Warna :
Bila Anda meng-klik tombol "Simpan", Anda akan
mengirim input yang dimasukkan lewat form di atas ke pemroses yang
bernama form_action.asp di situs w3c.
Jika warna tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
10. Atribut Placeholder
Menggunakan Placeholder
Nama :
Jika nama tampak seperti inputan text saja, Anda
harus menjalankannya pada browser Chrome terbaru
11. URL dan Datalist
Kontrol URL dan Datalist
Add your homepage :
Jenis Browsers :
Jika homepage Anda tidak divalidasi dan jenis
browsers Anda tampak seperti biasa saja, Anda harus menjalankannya
pada browser Chrome terbaru
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 :
My Personal Website
Welcome To My Website
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
My Personal Website
Welcome to My Website
3. Secara Embedding
Jika suatu perintah CSS akan direpresentasikan secara embeded maka akan terlihat
sebagai berikut :
My Personal Website
p
{
text-align : left;
letter-spacing : 5em;
}
Welcome to My Website
Jika anda ingin menggunakan perintah CSS dalam file HTML anda, maka perintah
CSS selalu diawali dan diakhiri dengan tag .
4. Secara Import
Jika suatu perintah CSS akan direpresentasikan secara import 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
My Personal Website
@import url(”style.css”);
Welcome to My Website
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)