MODUL PRAKTIKUM PEMROGRAMAN INTERNET fileDisini Anda akan berlatih membuat form dengan segala...

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

zona waktu) NEW

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-

tahun dan bilangan minggu NEW

Tabel 2. Browser dan Fitur Baru Kontrol Form yang Didukung

Kontrol Chrome

11

Internet

Explorer 9

Firefox

4.0.1

Opera

11.10

Safari

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)

MODUL PRAKTIKUM PEMROGRAMAN INTERNET fileDisini Anda akan berlatih membuat form dengan segala...

Documents

Transcript of MODUL PRAKTIKUM PEMROGRAMAN INTERNET fileDisini Anda akan berlatih membuat form dengan segala...