Web Programming 3

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 17 ini Peserta Didik diharapkan dapat :

1) Memahami jenis-jenis link ke Bagian Dokumen HTML

2) Menyajikan link ke Bagian Dokumen HTML

b. Uraian Materi

Link ke Bagian Dokumen Tertentu

Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu

yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya

pada halaman web yang memiliki informasi yang panjang atau pada dokumen

yang memiliki daftar isi di bagian atasnya. Tujuannya yaitu agar para

pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk

menuju/kembali tertentu dalam dokumen bersangkutan.

Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di

atas dengan link ke setiap bab . Yang perlu digunakan yaitu atribut yang

disebut id (identifikasi) dan simbol “#”.

Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai

contoh:

<h1 id="heading1">heading 1</h1>

Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut

link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai

contoh:

<a href="#heading1"> Menuju ke heading 1</a>

Berikut ini contoh bila ada beberapa link internal

<html>

<body>

<a href="#heading1">Link ke heading 1</a>

192 |

<a href="#heading2">Link ke heading 2</a>

<h1 id="heading1">heading 1</h1>

<h1 id="heading2">heading 2</h1>

</body>

</html>

Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :

x Link ke bagian tertentu dalam dokumen yang sama

x Link ke bagian tertentu dalam dokumen lain

Link ke Bagian Tertentu dalam Dokumen yang sama

Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau

nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju.

Pemberian id tersebut dilakukan dengan cara menuliskan kode berikut :

<a id=”tujuanLink”>Teks atau gambar</a>

Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang

telah di namai tersebut yaitu dengan menuliskan kode seperti berikut :

<a href=”#Tujuanlink”>Teks atau gambar</a>

Tanda # di atas menunjukan bahwa tujuan link yaitu nama bagian, bukan

berupa file.

Link ke Bagian Tertentu Dalam Dokumen Lain

Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke

sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link

semacam ini, bagian tertentu dalam dokumen lain tersebut harus di tantai

dengan pemberian id seperti pada sub-bab sebelumnya. Perbedaan hanya

terletak pada penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu

menambahkan id bagian pada tujuan link, seperti berikut:

<a href=”namafile#idBagian”>Teks atau gambar</a>

c. Rangkuman

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :

ƒ Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada

dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman

web yang memiliki informasi yang panjang atau pada dokumen yang

memiliki daftar isi di bagian atasnya. Tujuannya yaitu agar para

193 |

pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk

menuju/kembali tertentu dalam dokumen bersangkutan

ƒ Caranya yaitu memberikan nama atau id pada bagian teks atau gambar

tertentu sebagai bagian yang akan dituju. Yang perlu digunakan yaitu

atribut yang disebut id (identifikasi) dan simbol “#”. Gunakan tag: <a id= “

tujuanLink”>Teks atau gambar</a>

ƒ Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink”>Teks atau

gambar</a>

d. Tugas

Membuat link ke bagian tertentu dalam satu Dokumen

9 Buatlah dokumen html dengan kode berikut:

<html>

<head>

<title>link>/title>

</head>

<body>

<h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2>

<p> pilih salah satu judul buku berikut untuk melihat deskripsi : </p>

<a href=”#c”> pemrograman C</a><br />

<a href=”#cpp”> pemrograman C++</a><br />

<a href=”#bcb”> pemrogaraman Borland C++Builder</a>

</p>

<p><a id=”c”><strong>pemrograman C</strong> </a></p>

<p>

C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan

banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk

194 |

pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap

menjadi bahasa populer dan beribawah dalam kanca pemrograman. Sejauh ini, C juga

telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++,

java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa

ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portebel,

sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada

umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat keras

(hardwere) agar dapat berkomunikasi satu sama lainnya. <br />

<a href=”atas”> kembali ke atas</ a>

</p>

<p><a id=”cpp”><strong>pemrograman C++</strong></a</p>

<p>

C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan

untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi,

embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ yaitu bahasa

ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di

kenal dengan OPP (object oriented programming). (cross platform), C++ juga telah

manjadi bagian hidup dari sebagian para pecinta linux.<br />

<a href=”#atas”>kembali ke atas</a>

</p>

<p>

<strong>pemrograman borland C++builder</strong>

</a>

</p>

<p>

C++builder yaitu sebuah perangkat lunak berbasis C++ yang digunakan untuk

melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas

platform microsoft windows. Selain itu, C++builder juga banyak di gunakan sebagai alat

195 |

untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan

dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh

para programmer profesional untuk pengembangan aplikasi yang beraneka ragam

jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak

lagi yang lainnya.<br />

<a href=”#atas”>kembali ke atas</a>

</p >

</body>

</html>

9 Simpan file dengan nama link-bagiandokumen1.html dan tempatkan ke

dalam direktori kerja

9 Jalan file tersebut melalui web browser

Pada latihan di atas kita membuat 4 bagian yang di jadikan sebagai tujuan link,

yaitu :

x Atas. Bagian ini yaitu bagian paling atas dari dokumen dan berguna

untuk kembali ke bagian menu (Jika penunjung sedang mengaktifkan

bagian bawah dokumen)

x C. Bagian ini yaitu bagian yang menerangkan tentang buku

pemrograman C

x Cpp. Bagian ini yaitu bagian yang menerangkan tentang buku

pemrograman C++.

x Bcb. Bagian ini yaitu bagian yang menerangkan tentang buku

pemrograman borland C++Builder.

Untuk menguji cara kerja dari link di atas, coba anda klik link kedua

(pemrograman C++), maka web browser akan menampilkan bagian yang di

pilih, seperti ditujukan oleh gambar berikut:

Klik link kembali ke atas jika anda ingin kembali ke tampilan semula (tampilan

awal).

Membuat Link ke Bagian Tertentu dalam Dokumen Lain

9 Jalankan aplikasi Text Editor

9 Buatlah dua file dan isikan kode berikut:

dokumen-1.html

196 |

<html>

<head>

<title>Daftar IsiLink</title>

</head>

<body>

<h2> Latihan Membuat ke Bagian Tertentu dalam Dokumen

lain</h2>

</body>

</html>

Dokumen-2.html

<html>

<head>

</head>

<body>

<h2>Latihan Membuat ke Bagian Tertentu dalam Dokumen

Lain</h2>

<p><a id=”c”><strong>pemrograman C</strong ></a></p>

<p><a id=”cpp”><strong>pemrograman C++</strong ></a></p>

<p><a id=”bcb”><strong> Pemrograman borlond C++Builder

</strong ></a></p>

</body>

</html>

197 |

e. Tes Formatif

1. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang

sama?

2. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang

berbeda?

3. Jelaskan maksud dari beberapa tag link berikut ini :

a. <a href="#top">Kembali ke atas</a>

b. <a href="visimisi.html#visi">VISI</a>

f. Lembar Jawaban Tes Formatif

LJ- 01 : Cara menyajikan link dalam dokumen tertentu pada file yang sama

.................................................................................................................................

LJ- 02 : Cara menyajikan link dalam dokumen tertentu pada file yang berbeda

.................................................................................................................................

LJ- 03 : Penjelasan :

.................................................................................................................................

198 |

.................................................................................................................................

g. Lembar Kerja Peserta Didik

199 |

18. Kegiatan Belajar 18 : Menyajikan Format Target Link, Email dan

Telepon

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 18 ini Peserta Didik diharapkan dapat :

1) Memahami Format target link, email dan telepon

2) Menyajikan Format target link, email dan telepon

b. Uraian Materi

1) Menentukan Target Link

Target atau tujuan yang dihubungkan melalui suatu link dapat ditentukan sendiri

oleh kita. Target yang di maksud di sini yaitu dimana dokumen akan

ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET

tidak di sertakan), dokumen baru yang ditampilkan pada saat link dipilih akan

menutup atau menimpa dokumen lama (dokumen yang mengandung link

bersangkutan). Untuk melakukan hal, kita hanya perlu menambahkan atribut

TARGET di dalam tag <a>, yang memiliki bentuk umum penulisan seperti

berikut:

<a href=”NamaDokumen” target=”NamaTarget”>Teks/Gambar<a/>

NamaDokumen yaitu namadokumen yang akan di tampilkan jika link

bersangkutan dipilih/diklik dan NamaTarget yaitu target atau tempat tujuan dari

dokumen yang akan ditampilkan. NamaTarget bisa bernilai _BLANK maupun

nama frame (jika layar web kita bagi dengan menggunakan frame)

2) Link Email

Selain menghubungkan antara halaman dan antara bagian-bagian dari satu

halaman, tag <a> memungkinkan kita untuk link ke alamat email. Ini yaitu cara

paling sederhana untuk memungkinkan pengunjung halaman web kita untuk

"mengirim pesan" kepada kita. Dengan memberikan link yang dapat diklik ke

alamat email kita, maka mudah bagi pengunjung untuk mengirim pesan dan

pengunjung tidak perlu mengetikkan alamat email.

Cara penulisan link HTML ke alamat email yaitu seperti berikut :

200 |

<a href="mailto:nama@yourdomain.com"> Kirim pesan email</a>

Kata-kata “Kirim pesan email” akan muncul seperti link <a> lainnya .

Jika kita ingin orang melihat alamat email kita yang sebenarnya ( sehingga

mereka dapat mencata atau mengirim pesan menggunakan program email yang

berbeda ), yaitu seperti ini :

<a href="mailto:nama@yourdomain.com">nama@yourdomain.com</a>

Dalam kebanyakan web browser, bila seseorang mengklik link tersebut , maka

terbuka sebuah jendela di mana dia dapat mengetik pesan email yang segera

dikirimkan kepada kita

Kita juga dapat memberikan beberapa informasi tambahan di link sehingga

subjek dan isi pesan juga langsung tertulis. Yaitu dengan menambahkan variabel

subject (perihal) dan body (isi pesan). Pisahkan variabel dari alamat email

dengan tanda tanya ( ? ) , Nilai dari variabel dengan tanda sama dengan ( = ) ,

dan kemudian memisahkan masing-masing variabel dan nilai pasangan dengan

ampersand ( & ). Berikut yaitu contoh menentukan subjek dan body untuk

contoh email sebelumnya :

<a href = "mailto:author@somedomain.com?subject=Pertanyaan &

body=Kapan edisi berikutnya keluar ?"> Author@somedomain.com

</a>

Ketika pengguna mengklik link ini , pesan email dibuat dengan

author@somedomain.com sebagai penerima, “Pertanyaan” sebagai

subject/perihal , dan Kapan edisi berikutnya keluar ? sebagai isi pesan .

3) Link Telepon

Kita juga dapat membuat link telepon di dokumen web kita. Hal ini karena banyak

pengunjung web menggunakan smartphone untuk mengakses website kita,

sehingga dapat digunakan untuk melakukan panggilan telepon ! Jadi kita dapat

menuliskan nomor telepon, sehingga pengunjung dapat langsung klik untuk

menghubungi nomor telepon terebut. Cara penulisannya yaitu seperticontoh

berikut .

<a href="tel:0123456789">Hubungi kami di (012) 3456789 </a>

Ketika pengguna ponsel menekan link tersebut, mereka mendapatkan kotak

peringatan meminta mereka untuk mengkonfirmasi bahwa mereka ingin

201 |

melakukan panggilan telepon ke nomor tersebut . Fitur ini didukung pada

perangkat mobile yang paling baru, termasuk iOS , Android , Blackberry ,

Symbian , Internet Explorer , dan Opera Mini .

iPad dan iPod Touch tidak dapat membuat panggilan , tetapi akan menawarkan

untuk membuat kontak baru dari nomor tersebut.

Sedangkan untuk pengguna desktop tidak terjadi apa-apa untuk link tersebut.

Ada beberapa cara terbaik untuk menggunakan link telepon :

ƒ Dianjurkan agar memasukkan nomor lengkap panggilan internasional ,

termasuk kode Negara, seperti +62 untuk Indonesia, karena tidak

diketahui di Negara mana pengguna akan mengakses web kita .

ƒ menuliskan nomor telepon ke dalam isi link sehingga jika link tidak

bekerja , nomor telepon masih terbaca .

ƒ Android dan iPhone memiliki fitur yang dapat mendeteksi nomor telepon

dan secara otomatis mengubah mereka menjadi link. Sayangnya ,

beberapa nomor 10 - digit yang bukan nomor telepon mungkin akan

berubah menjadi link juga. Jika dokumen kita memiliki string angka yang

mungkin akan dideteksi sebagai nomor telepon, kita dapat mengaktifkan

auto - deteksi off dengan memasukkan elemen meta berikut dalam kepala

dokumen kita .

ƒ Untuk perangkat Blackberry , menggunakan berikut:

c. Rangkuman

Dari penjelasan materi pada kegiatan belajar ini dapat dibuat rangkuman

sebagai berikut :

ƒ Atribut TARGET di dalam tag <a>, memiliki bentuk umum penulisan seperti

berikut:

<a href=”NamaDokumen”

target=”NamaTarget”>Teks/Gambar<a/>

ƒ Cara penulisan link HTML ke alamat email yaitu seperti berikut :

<a href="mailto:nama@yourdomain.com"> Kirim pesan email

</a>

ƒ Cara penulisan link telepon yaitu seperti berikut :.

202 |

<a href="tel:0123456789"> Hubungi kami di (012) 3456789

</a>

d. Tugas

9 Isikan kode berikut:

Link target :

<html>

<head>

</head>

<body>

<h2>Latihan Menampilkan Dokumen pada Window Baru</h2>

<p>Klik salah satu link berikut:</p>

W3 Schools</a><br />

</body>

</html>

9 Simpan file dengan nama link-target.html dan tempatkan ke dalam

direktori kerja

9 Bukalah file tersebut menggunakan web browser

Link Email

<html>

<head>

<title>Mailto</title>

</head>

<body>

kirim email ke humas SMK Bisa : <a

href="mailto:info@smk-kita.sch.id">info@smk-

bisa.sch.id</a>

</body>

203 |

</html>

e. Tes Formatif

1. Bagaimana cara menyajikan target link? Berikan contohnya!

2. Buatlah link untuk berikut ini :

a. Email : info@hotelku.com

b. Email : cs@tokobuku.com, Subject: Tanya Buku, Isi Pesan: Apa judul buku

baru?

c. Telepon : 0341-491239

d. Telepon : 0812-345-6789

f. Lembar Jawaban Tes Formatif

LJ- 01 : Cara menyajikan target link

.................................................................................................................................

LJ- 02 : Cara menyajikan link dalam :

a.Email :

.................................................................................................................................

................................................................................................................................

.................................................................................................................................

b.Email :

.................................................................................................................................

204 |

.................................................................................................................................

c.Telepon :

.................................................................................................................................

d.Telepon:

.................................................................................................................................

g. Lembar Kerja Peserta Didik

205 |

206 |

19. Kegiatan Belajar 19 : Mengidentifasi Anatomi dan Cara Kerja

Form

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 19 diharapkan Peserta Didik dapat:

1) Mengetahui penggunaan form HTML

2) Memahami anatomi form HTML

3) Mengetahui cara kerja form HTML

4) Memahami cara kerja form HTML

5) Mengidentifkasi anatomi dan cara kerja form

b. Uraian materi.

1) Definisi dan fungsi form

Form merupakan salah satu bentuk halaman web yang digunakan untuk

menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna

tersebut diolah menggunakan bahasa pemrograman web, baik secara server

side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript).

Form dapat digunakan untuk berbagai keperluan seperti keperluan login,

transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari

pengguna, menawarkan barang/jasa secara on-line dan sebagainya. Form

sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web.

2) Anatomi dari form

Standard atau format umum penulisan dari form yaitu sebagai berikut :

……

</form>

Berikut ini yaitu beberapa variasi yang dapat diterapkan pada atribut<form> :

207 |

form tags

</FORM> <FORM SCRIPT=URL> form tags </FORM>

Catatan : target window name diisikan berupa :

_blank

_self

_parent

_top

Di antara elemen <form> dan </form> digunakan elemen – elemen HTML

<input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan

oleh pengguna. Format umum dari penulisan elemen HTML <input> yaitu

sebagai berikut :

<input

name="name"

size="number"

type="text"|"checkbox"|"radio"|"submit"|"reset"

value="value"

checked >

Pada jenis masukan (input) dari halaman web minimal harus mempunyai

atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type,

masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa

208 |

atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh

yaitu elemen <input> yang atribut TYPE-nya yaitu text memiliki atribut

antara lain :

Name : untuk menamai kotak

Value : untuk menandai atau menampung teks

Size : mengatur ukuran teks pada kotak

maxlength : menentukan panjang maksimum teks

Masing-masing jenis input memiliki karakteristik yang berbeda, dan

pemilihan penggunaannya disesuaikan dengan kesesuaian nilai dari input data

yang dikelola.

Berikut yaitu salah satu contoh listing kode dari tag elemen form - input

Gambar 19.1 hidden input file

3) Cara Kerja Form

Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja

Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang

dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke

server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) ,

menggunakan protokol HTTP . Server menjawab requets dari form dengan

menggunakan protokol yang sama .

<form >

Nama : <input type=”text” name=”fnama”><br>

</form>

209 |

Gambar 19.2 client – server

A. Sisi Klien

Server akan memproses data dan kemudian mengirim respon kepada pengguna.

Disisi klien memastikan data mana yang dkirim melalui elemen form. Di sisi klien

, HTML untuk mengkonfigurasi permintaan HTTP untuk mengirim data ke server .

Hal ini memungkinkan pengguna untuk memberikan informasi yang akan

disampaikan dalam permintaan HTTP .

Atribut yang sangat peran saat pengiriman data yaitu action dan method.

Atribut – atribut dari elemen HTML <form> yaitu sebagai berikut :

Atribut Action

Atribut ini mendefinisikan mana data akan dikirim . Nilainya harus merupakan

URL yang valid . Jika atribut ini tidak menyediakan , data akan dikirim ke URL

halaman ini berisi formulir. Contoh penggunaan atribut action

1.data dikirim ke http://foo.com

2.Data dikirim ke server yang sama bahwa itu host halaman form , tapi ke URL

yang berbeda pada server :

Atribut Keterangan

Method Metode untuk pengiriman data ke tujuan yaitu :

a. Get : mengirim data ke server dengan cara meletakan

data pada bagian akhir dari Url yang dituju

b. Post : datanya dikirim terpisah

Action Aksi yang muncul ketika pengguna meneka tombol tertentu

210 |

3.Tanpa atribut , seperti di bawah , atribut <form> menyebabkan data yang akan

dikirim ke halaman yang meliputi bentuk:

<form>

4. Notasi berikut untuk menunjukkan bahwa data harus dikirim ke halaman yang

sama yang berisi formulir , ini diperlukan karena sampai HTML5 , atribut tindakan

yang diperlukan .

Atribut Method

Atribut metode untuk pengiriman data menggunakan post dan get. Atribut ini

mendefinisikan bagaimana data dikirim . Protokol HTTP menyediakan beberapa

cara untuk melakukan permintaan , data bentuk HTML dapat dikirim melalui

setidaknya dua dari mereka : metode GET dan metode POST . Permintaan

HTTP terdiri dari dua bagian : sebuah header yang berisi sekumpulan metadata

global mengenai kemampuan browser , dan body yang dapat berisi informasi

yang diperlukan ke server untuk memproses permintaan khusus .

Methode GET

Metode GET yaitu metode yang digunakan oleh browser untuk meminta

server untuk mengirim kembali resource yang dib erikan : " hey , server, kirimkan

resource ini . " Dalam hal ini , browser mengirimkan sebuah body kosong .

Karena body kosong , jika formulir dikirim menggunakan metode ini , data yang

dikirim ke server ditambahkan ke URL .

Contoh penerapan mehode get pada elemen <form>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

211 |

<button>kirimkan salam</button>

</form

</body>

</html>

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan

sebagai berikut

Gambar 19.3 penerapan methode get

Dari tampilan web pada gambar diatas, bila tombol ‘kirimkan salam” diklik

akan mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada

gambar dibawah.

Gambar 19.4 hasil button dengan method get

Dengan menggunakan method get, request HTTP aka terlihat sebagai

berikut:

GET /?say=Hi&to=Mom HTTP/1.1

Host: foo.com

Methode POST

Metode POST sedikit berbeda , POST mengirimkan server untuk meminta

respon yang memperhitungkan data yang tersedia dalam request. HTTP : " hey

212 |

Server , lihatlah data ini dan saya mengirimkan kembali hasil yang baik . " Jika

form yang dikirim dengan menggunakan data metod POST akan ditambahkan

dalam body dari HTTP yang request .

Contoh penerapan mehode POST pada elemen <form>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button>kirim POST</button>

</form>

</form

</body>

</html>

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan

sebagai berikut

Gambar 19.5 penerapan methode post

Dari tampilan web pada gambar diatas, bila tombol ‘kirim POST” diklik akan

mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada

gambar dibawah.

213 |

Gambar 19.6 hasil button dengan method post

Dengan menggunakan method post, request HTTP akan terlihat sebagai

berikut:

POST / HTTP/1.1

Host: foo.com

Content-Type: application/x-www-form-urlencoded

Content-Length: 13

say=Hall&to=Semua

Content-Length mengindikasikan ukuran dari body sedangkan Content-Type

merupakan type data resource dari si pengirim ke server.

B. Sisi Server

Apapun metode HTTP yabg digunakan (get atau post), server menerima

string yang akan di order untuk mendapatkan data list sebagai key atau nilai

pasangan. Cara mengakses list/daftar tergantung pada platform pengembangan

yang digunakan.

4) Elemen form html

Form HTML digunakan untuk memilih pelbagai macam inputan yang

disediakan. Data bisa diinputan dalam bentuk input teks , pilihan radio button,

check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam

tag-tag form. Berikut yaitu elemen-elemen yang disediakan oleh html

214 |

Tag Deskripsi Format umum tag

<form> Mendefinisikan

untuk form bagi

user

<form>

</form>

<input> Mendefinisikan

kontrol input pada

form

<form>

<input type="submit"

value="Submit">

</form>

<textare

Mendefinisikan

kontrol input berupa

area teks pada

form

teks yang akanditampilkan

</textarea>

<label> Mendefinisikan

label pada tag

elemen <input>

<input type="radio"

name="barang" id="buku"

value="buku"><br>

</form>

<fieldse

Group dengan

element yang

berhubungan satu

sama lain didalam

form

<form>

<legend>Personalia:</legend>

Name: <input type="text"><br>

Email: <input

type="text"><br>

Date of birth: <input

type="text">

</fieldset>

</form

<legend> Mendefinisikan

judul untuk elemen

<legend>Personalia:</legend>

Name: <input type="text"><br>

215 |

Email: <input

type="text"><br>

Date of birth: <input

type="text">

</fieldset>

</form

<select> Merupakan daftar

secara drop-down

<option

value="volvo">Volvo</option>

<option

value="mercedes">Mercedes</option

<option

value="audi">Audi</option>

</select

<optgrou

Mendefinisikan

group options yang

berhubungan satu

sama lain dalam

bentuk drop-down

list, merupakan

bagian dari tag

elemen <select>

<option

value="volvo">Volvo</option>

<option

value="saab">Saab</option>

</optgroup>

<option

value="mercedes">Mercedes</option

<option

value="audi">Audi</option>

</optgroup>

</select>

<option> mendefinisikan

option pilihan

dalam bentuk drop-

down list,

<option

value="volvo">Volvo</option>

216 |

merupakan bagian

dari tag elemen

<option

value="mercedes">Mercedes</option

<option

value="audi">Audi</option>

</select

<button> Merupakan tombol

yang dapat diklik

<button type="button">Klik

disini!</button>

Æ elemen

baru di

html5

Daftar/list khusus

yang didefinisikan

dalam elemen tag

<input>

<option value="Internet

Explorer">

</datalist>

Æ elemen

baru di

html5

Merupakan

generator key-pair

field untuk form

<form action="demo_keygen.asp"

method="get">

Username: <input type="text"

name="usr_name">

Encryption: <keygen

name="security">

</form>

Æ elemen

baru di

html5

Merupakan hasil

dari suatu

perhitungan

<form

oninput="x.value=parseInt(a.value

)+parseInt(b.value)">0

<input type="range" id="a"

value="50">100

+<input type="number" id="b"

value="50">

=<output name="x" for="a

217 |

b"></output>

</form>

5) Elemen form button

Format umum penulisan input button pada tag <form> yaitu sebagai berikut :

< button type=button>

< button type=button name=name>

< button type=button value=value>

Berikut contoh listing programnya

<!doctype html>

<html>

<body>

klik mulai !</button>

</body>

</html>

Dan contoh bentuk tampilannya yaitu sebagai berikut :

Gambar 19.7 tag form input button

6) Elemen form input submit

Format tag HTML-nya yaitu sebagai berikut :

Muncul

setelah diklik

218 |

Contoh bentuk tampilannya yaitu sebagai berikut :

<!doctype html>

<html>

<head>

<title>reset </title>

</head>

<body>

---- Indentitas diri ----

<form >

Nama : <input type="text"

name="nama"><br>

NIM: <input type="text" name="kelas" maxlength="8"><br>

</form>

</body>

</html>

Gambar 19.8 tag form input submit

7) Elemen form reset

Format tag HTML-nya yaitu sebagai berikut :

Berikut yaitu contoh form input yang dilengkapi tombol reset

<!doctype html>

<html>

<head>

<title>reset </title>

</head>

<body>

---- Indentitas diri ----

<form >

Nama : <input type="text" name="nama"><br>

NIM: <input type="text" name="kelas" maxlength="8"><br>

219 |

</form>

</body>

</html>

Gambar 19.9 tag form input reset

8) Contoh form sederhana

Berikut ini yaitu contoh dari sebuah halaman web yang berisi form yang sederhana :

<html>

<head>

</head>

<body>

Nama : <input type="text" name="nama"> <br><br>

Kelas: <input type="text" name="kelas" maxlength="2">

No : <input type="text" name="nomor" value="10">

Hobby: <input type="text" name="hobby" size="8">

Password: <input type="password" name="password">

<input type="submit" name="submit"

value="Submit">   <input type="reset"

name="reset" value="Reset">

</form>

</body>

</html>

220 |

Apabila dibuka di dalam browser, maka tampilan dari susunan kode

HTML di atas yaitu sebagai berikut :

Gambar 19.10 form sederhana

Apabila tombol “Submit” diklik, maka semua nilai yang sudah diinputkan oleh

pengguna akan di olah di dalam file PHP “inputdata.php”.

c. Rangkuman

Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut :

ƒ Form yaitu salah satu bentuk halaman web yang digunakan untuk

menerima masukan dari pengguna, untuk selanjutnya masukan dari

pengguna tersebut diolah menggunakan bahasa pemrograman web, baik

secara server side scripting(misalkan PHP, JSP) ataupun client-side

scripting (javascript).

ƒ Form dapat digunakan untuk berbagai keperluan seperti keperluan login,

transaksi penjualan, mengumpulkan informasi atau meminta umpan balik

dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya.

ƒ Disamping atribut type, masing-masing elemen input memiliki atribut-atribut

yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis

elemen input. Sebagai contoh yaitu elemen <input> yang atribut TYPE-

nya yaitu text memiliki atribut antara lain :

- NAME, digunakan untuk menamai kotak

- VALUE, digunakan untuk menandai atau menampung teks

- SIZE, digunakan untuk mengatur ukuran teks pada kotak

221 |

- MAXLENGTH, digunakan untuk menentukan panjang maksimum

teks

ƒ Form HTML digunakan untuk melewatkan data dari klien ke server.

ƒ Elemen – elemen tag form HTML , yaitu <form>, <input>, <texarea>,

<label>, <fieldset>, <legend>, <select>, <optgroup>, <option>, <button>,

<datalist>, <keygen>, <output>.

d. Tugas

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam

kegiatan ini masing-masing kelompok kerjakan tugas berikut :

3. Jelaskan tentang anatomi form

4. Jelaskan tentang cara kerja dari form

5. Jelaskan tentang macam-macam elemen tag <form> html

Kemudian secara bergantian masing-masing kelompok mempresentasikan

hasilnya didepan kelas.

e. Test Formatif.

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap

butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah

jawabannya pada lembar jawaban test formatif yang telah disediakan.

1. Tuliskan anatomi penulisan form/formulir pada html

2. Jelaskan secara singkat cara kerja dari form

3. Sebutkan 5 jenis elemen yang berhubungan dengan pada formulir

HTML.

4. Sebutkan dan jelaskan 3 elemen baru pada form html5

f. Lembar Jawaban Test Formatif (LJ).

LJ- 01 : anatomi penulisan form/formulir

.................................................................................................................................

222 |

.................................................................................................................................

LJ- 02 : cara kerja dari form

.................................................................................................................................

LJ- 03 : 5 jenis elemen <form> HTML

.................................................................................................................................

223 |

LJ- 04: elemen baru pada form html5

.................................................................................................................................

g. Lembar Kerja Peserta Didik.

224 |

20. Kegiatan Belajar 20: Menyajikan Hasil Pemformatan Form pada

Sebuah Halaman Web

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 20 diharapkan Peserta Didik dapat:

1) Memahami format formulir HTML

2) Menyajikan hasil dari format formulir pada sebuah halaman web

b. Uraian materi.

1) Format umum formulir

<Form> merupakan formulir yang digunakan sebagai perantara untuk

memasukan data inputan ke server. Form pada HTML dibuat dengan

menggunakan elemen form. Elemen form harus membungkus seluruh elemen-

elemen masukan form lain untuk memastikan masukan informasi pengguna

dapat dibaca oleh aplikasi web.

Setiap elemen form dalam suatu halaman web harus memiliki atribut name,

yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang

dimasukkan ke dalam elemen form, akan dikirimkan kepada server.

Browser web akan mengirimkan data dari form ke server dengan mengacu

kepada name dari elemen. Browser akan mengambil semua data dari elemen

input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka

data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.

Tag <form> digunakan untuk membuat form dalam document HTML.

Penulisan format umum penulisan dari form yaitu sebagai berikut :

……

</form>

Terlihat pada format umum formulir diatas, bahwa penulisan form dilengkapi

dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> yaitu :

225 |

ƒ Accept

ƒ Accept-charset

ƒ Action

ƒ Autocomplete

ƒ Enctype

ƒ Method

ƒ Name

ƒ Novalidate

ƒ target

Dari sembilan atribut diatas, atribut “accept” tidak support pada penerapan

HTML5. Pada HTML juga menyediakan atribut baru yaitu : “autocomplete” dan

“novalidate”.

Atribut “accept” mendefinisikan MIME yang di izinkan oleh server yang

memuat script untuk memproses form. Atribut “accept” tidak support pada

penerapan HTML5.

Penulisan atribut “accept” dapat dituliskan sebagai berikut :

MIME_type Æ satu atau lebih jenis MIME yang dapat diajukan / upload.

Untuk menentukan lebih dari satu tipe MIME, memisahkan jenis dengan

koma. Contoh penerapan Atribut “accept”

<!DOCTYPE html>

<html>

<head>

<title>atribut form</title>

</head>

<body>

Nama : <input type="text" name="nama"><br>

No.KTP: <input type="text" name="noKtp"><br>

File KTP: <input type="file" name="pic" id="pic"><br>

226 |

</form>

</body>

</html>

Pada listing kode diatas dituliskan <form accept="image/gif, image/jpeg">

hal ini berarti file gambar yang bisa diterima oleh server yaitu gif dan jpeg.

Bila Listing kode tersebut dijalankan maka akan menghasilkan outp ut

sebagai berikut :

Gambar 20.1 penerapan atribut accept

Accept-charset

Atribut “accept-charset” merupakan atribut untuk menentukan karakter

tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string

yang diterima yaitu "UNKNOWN", hal ini menunjukkan pengkodean sama

dengan pengkodean dokumen yang mengandung tag elemen <form>.

Format umum untuk penulisan atribut “accept-charset” yaitu

Nilai dari “character_set” , biasanya dituliskan dalam bentuk ;;

ƒ UTF-8 - Æ karakter encoding untuk Unicode

ƒ ISO-8859-1 - karakter encoding untuk alphabet

Secara teori setiap pengkodean karakter dapat digunakan, tetapi pada

kenyataanya tidak semua browser dapat membacanya. Semakin banyak

pengkodean karakter yang digunakan, semakin besar kesempatan bahwa

browser dapat membaca karakter tesebut.

<!DOCTYPE html>

<html>

227 |

<head>

<title>atribut form</title>

</head>

<body>

Nama : <input type="text" name="nama"><br>

Sekolah: <input type="text" name="sekolah"><br>

</form>

</body>

</html>

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan

sebagai berikut :

Gambar 20.2 penerapan atribut accept-charset

Action

Atribut action digunakan untuk mengirimkan data form ketika form disubmit,

atau dapat dikatakan Aksi yang muncul ketika pengguna menekan tombol

tertentu. Action menentukan lokasi dari script yang akan memproses data

dari form. Format umum penulisan atribut action yaitu

Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL

dapat dituliskan sebagai berikut :

ƒ URL absolut Æaction="http://www.example.com/example.htm")

ƒ URL relatif Æ action="example.htm"

Penulisan atribut action yaitu sebagai berikut :

228 |

<!DOCTYPE html>

<html>

<head>

<title>atribut form</title>

</head>

<body>

Nama : <input type="text" name="nama"><br>

Sekolah: <input type="text" name="sekolah"><br>

</form>

</body>

</html>

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan

sebagai berikut :

Gambar 20.3 penerapan atribut action

Autocomplete

Dengan atribut autocomplete , memungkinkan form dapat menentukan memiliki

autocomplete on atau off. Atribut autocomplete merupakan atribut baru di

HTML5. Format penulisanya yaitu sebagai berikut :

Nilai dari atribut autocomplate :

On Æmerupakan nilai default. Browser akan membaca data isian form sudah

lengkap berdasarkan data isian sebelumnya. Sehingga user tidak perlu

menuliskan semua data, bisa dibantu dengan atribut autocomplete

untuk meneruskan data yang akan ditulis.

229 |

Off Æ browser tidak secara otomatis membaca data isian form dari data

sebelumnya, sehingga user harus menuliskan data secara lengkap

pada tiap field form setiap kali user akan mengisikan data.

Penulisan atribut autocomplete yaitu sebagai berikut

<!DOCTYPE html>

<html>

<head>

<title>atribut form</title>

</head>

<body>

<form action="demo_form.asp" method="get"

autocomplete="on">

Nama:<input type="text" name="nama"><br>

Alamat: <input type="alamat" name="alamat"><br>

</form>

</body>

</html>

Bila listing kode diatas dengan atribut autocomplete = “on”

dijalankan maka akan menghasilkan tampilan sebagai berikut :

Gambar 20.4 penerapan atribut autocomplete, dengan data isian baru

Dari gambar diatas, pada fiels “nama” akan diisi nama “dayandra, user harus

melengkapi menuliskan nama sampai selesai, karena belum ada data

sebelumnya yang mengisikan nama : dayandra. Bila data di field “nama” dan

“Alamat” diisi dan dikemudian disubmit maka browser akan mengenali isian

datanya bila dilain waktu ada user yang mengisi dengan isian yang sama. Hal ini

terlihat pada tampilan berikut :

230 |

Gambar 20.5 penerapan atribut autocomplete, dengan data isian autocomplete

Dari gambar dapat dilihat, saat menuliskan kata “da” maka akan muncul pilihan

dayandra, data dayandra merupakan data yang telah diisika ke field sebelumnya.

Method

Atribut method yaitu atribut yang wajib dicantumkan saat penulisan <form>

karena atribut method merupakan metode untuk pengiriman data ke tujuan yaitu :

Get :

- mengirim data ke server dengan cara meletakan data pada bagian akhir

dari Url yang dituju

- metode yang digunakan oleh browser untuk meminta server untuk

mengirim kembali sumber daya yang diberikan

Post

- datanya dikirim terpisah

- metode browser mengirimkan server untuk meminta respon yang

memperhitungkan data yang tersedia dalam tubuh permintaan HTTP

Format penulisanya yaitu sebagai berikut :

Penulisan atribut autocomplete yaitu sebagai berikut

<!DOCTYPE html>

<html>

<head>

<title>atribut form</title>

</head>

<body>

<form action="demo_form.asp" method="get"

231 |

autocomplete="on">

Nama:<input type="text" name="nama"><br>

Alamat: <input type="alamat" name="alamat"><br>

</form>

</body>

</html>

Bila listing kode diatas dengan atribut dijalankan maka akan

method="get" menghasilkan tampilan sebagai berikut :

Gambar 20.6 penerapan atribut method=get

Enctype

Atribut enctype merupakan atribut yang menentukan bagaimana data form

dikirim ke server. Atribut enctype hanya digunakan saat form menggunakan

method=post.

Format penulisanya yaitu sebagai berikut :

Adapun nilai(value) yang dapat diisikan kedalam atribut anctype yaitu :

Value Description

application/x-www-form-

urlencoded

Merupakan nilai default. Semua karakter

dikodekan sebelum dikirimkan. Spasi

dikodekan dalam simbol +, dan spesial karakter

lainya di kodekan dalam nilai ASCII HEX

multipart/form-data Tidak ada karakter yang dikodekan.

text/plain Spasi dikodekan dalam simbol +. Spesial

karakter lainya tidak di kodekan dalam nilai

ASCII HEX

Penulisan atribut enctype yaitu sebagai berikut

232 |

<!DOCTYPE html>

<html>

<head>

<title>atribut form</title>

</head>

<body>

<form action="demo_post_enctype.asp"

method="post" enctype="multipart/form-data">

Nama:<input type="text" name="nama"><br>

Alamat: <input type="alamat" name="alamat"><br>

</form>

</body>

</html>

Bila listing kode diatas dengan atribut dijalankan maka akan

enctype="multipart/form-data"menghasilkan tampilan sebagai

berikut :

Gambar 20.7 penerapan atribut anctype

Name

Atribut “name” merupakan atribut untuk memberi nama pada form. Atribut

name digunakan untuk referensi elemen dalam JavaScript, atau untuk

referensi data formulir setelah formulir dikirimkan. Format umum penulisan

atribut name yaitu sebagai berikut :

Dimana nilai dari atribut name berupa text. Berikut yaitu penerapan dari

atribut name

<!DOCTYPE html>

<html>

233 |

<head>

function formSubmit()

{

document.forms["myForm"].submit();

}

</script>

</head>

<body>

Nama: <input type="text" name="nama"><br>

Alamat: <input type="text" name="alamat"><br><br>

</form>

</body>

</html>

Dari listing kode diatas dapat dilihat bahwa <form name="fromSaya"> yang

artinya form yang dibuat bernama “formSaya”.nama form = formSaya

tersebut akan diberitahukan ke elemen Javascript.Bila listing kode tersebut

dijalankan maka akan menghasilkan tampilan sebagai berikut :

Gambar 20.8 penerapan atribut name

Novalidate

Atribut “novalidate” memperintahkan bahwa data form tidak divalidasi saat di

submit. Atribut ini merupakan atribut baru pada HTML5 dan hanya berjalan di

browser Internet Explorer 10, Firefox, Opera, dan Chrome. Atribut “novalidate”

234 |

tidak support ketika dijalankan pada browser Internet Explorer versi 9 ke bawah

dan safari.

Format penulisan secara umum

Berkut yaitu salah satu penerapan dari atribut “novalidate”.

<!doctype html>

<html>

<head>

</head>

<body>

e-mail: <input type="email" name="user_email">

</form>

</body>

</html>

Bila listing kode di atas dijalan akan menampilkan output sebagai berikut

Gambar 20.9 penerapan atribut novalidate

235 |

target

Atribut “target” merupakan atribut yang dapat berjalan disemua browser.

Atribut “target” menentukan nama atau keyword yang mengindikasikan dimana

respon dari form akan ditampilkan, misanya tab, window, atau dalam frame

Catatan : target window name diisikan berupa :

Value Description

_blank Respon ditampilkan dalam new window or tab

_self Respon ditampilkan dalam frame yang sama (default)

_parent Respon ditampilkan dalam parent frame

_top Respon ditampilkan dalam window full body

framename Respon ditampilkan dalam iframe

Format umu dari penulisan atribut target

Berikut yaitu listing kode atribut target menggunakan value _blank

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Nama : <input type="text" name="fname"><br>

Alamat : <input type="text" name="lname"><br>

</form

</body>

</html>

Ketika listing kode dijalankan akan menampilkan hasil seperti berikut :

236 |

Gambar 20.10 hasil button submit

Setelah listing kode dijalankan maka akan terbuka window 1 yan berisi text

field untuk mengisi nama dan alamat. Setelah data nama - alamat diisikan

dan form disubmit maka akan terbuka window baru seperti pada window 2.

3) Format formulir secara horisontal

Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi,

umumnya digunakan elemen HTML <table> untuk memformat form tersebut.

Secara umum layout dari form yaitu layout horizontal, yakni layout dimana

setiap input ditempatkan di samping dari label keterangan masing- masing input

tersebut. Berikut ini yaitu contoh dari penggunaan elemen <table> untuk

memformat tampilan form secara horizontal :

<html>

<head><title>CONTOH TAG FORM</title></head>

<body>

<tr>

<td><INPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10"

SIZE="11"></td>

</tr>

<tr>

<td width="25%">Nama Mahasiswa</td>

<td><INPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="25"

SIZE="25"></td>

</tr>

237 |

<tr>

<td width="25%">Alamat</td>

<td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50"

SIZE="40"></td>

</tr>

<tr>

<td width="25%">Jenis Kelamin</td>

<td><INPUT TYPE="RADIO" Name="Jenkel" CHECKED

VALUE="Laki2">Laki-laki

<INPUT TYPE="RADIO" Name="Jenkel"

VALUE="Perempuan">Perempuan

</td>

</tr>

<tr>

<td width="25%">Jurusan</td>

<OPTION VALUE="KA">Komputer Akuntansi

<OPTION VALUE="MI">Manajemen Informatika

<OPTION VALUE="TK">Teknik Komputer

</SELECT>

</td>

</tr>

<tr>

<td width="25%">Fasilitas</td>

<td><INPUT TYPE="CHECKBOX">Flash Disk</td>

</tr>

<tr>

<td></td><td><INPUT TYPE="CHECKBOX">Bakal Baju</td>

</tr>

<tr>

<td></td><td><INPUT TYPE="CHECKBOX">Bakal Jas</td>

</tr>

</td>

</tr>

</table>

</form>

Dan berikut ini yaitu tampilan dari form yang telah di tulis di atas :

238 |

Gambar 20.11 tampilan form secara horisontal

4) Format formulir secara vertikal

Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis

mobile tentunya sebuah halaman web di dalam perangkat mobile akan

memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan

dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad,

maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk

layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada

aplikasi mobile, layout yang diterapkan yaitu layout secara vertikal, sesuai

dengan karakteristik layar yang tidak terlalu besar. Berikut ini yaitu contoh dari

sebuah form dengan layout vertikal.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<FORM METHOD="POST"

ACTION="mailto:teknisi@jardiknas.org">

<H4>FORM DATA SISWA</H4>

<INPUT TYPE="text" NAME="var1" SIZE="30"

239 |

VALUE="Masukan nama.">

<B>Apakah Anda Siswa?</B>

<B>Berapa umur Anda?</B>

<BR>

<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15

<BR>

<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20

<BR>

<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25

</form

</body>

</html>

Dan hasil dari halaman form yang telah ditulis di atas yaitu sebagai berikut :

Gambar 20.12 tampilan form secara vertikal

c. Rangkuman

Dari kegiatan belajar menyajikan form pada halaman web dapat dibuat

kesimpulan sebagai berikut :

ƒ <Form> merupakan formulir yang digunakan sebagai perantara untuk

memasukan data inputan ke server.

ƒ Browser web akan mengirimkan data dari form ke server dengan

mengacu kepada name dari elemen.

ƒ Beberapa atribut yang dimiliki oleh tag <form> yaitu :

- Accept

- Accept-charset

- Action

- Autocomplete

- Enctype

- Method

- Name

- Novalidate

- target

ƒ Untuk mengimbangi perkembangan teknologi mobile adakalanya form

dilayout secara vertikal

Web Programming 3

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

Web Programming 3

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form