1 MODUL PRAKTIKUM PEMROGRAMAN INTERNET PENANGANAN FORM DALAM HTML DAN STYLE SHEET (CSS) DISUSUN OLEH : Astrid Lestari Tungadi, S.Kom FAKULTAS TEKNOLOG...
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
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
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)
4. Tombol dan Fieldset
Bila tidak terlihat adanya border di sekeliling form input, browser Anda sudah terlalu lama.
5. Field Input dan Tombol Submit
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
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
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
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
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
Jika nama tampak seperti inputan text saja, Anda harus menjalankannya pada browser Chrome terbaru
11. URL dan Datalist
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 <style type=”text/css”> 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 <style> . 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 <style type=”text/css”> @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)