4.html Form

HTML HTML FORM
5.1. HTML FORMS
Form adalah salah satu penampilan interaktif yang paling populer pada World Wide Web (www). Form memungkinkan pengguna berinteraksi dengan teks, graphic atau yang lain yang ditampilkan pada browser. Anda bisa membuat form yang sederhana dengan pertanyaan yes atau no saja sampai form yang berisi komentar atau umpan balik pengguna. Suatu form dapat mempunyai lebih dari satu kontrol. Kontrol-kontrol ini merupakan elemen-elemen user interface yang dipakai pembaca untuk berinteraksi dengan halaman web Anda.
Teks baris tunggal, yang digunakan untuk memasukkan data angka dan teks. Teks banyak baris, yang digunakan pembaca untuk memasukkan beberapa baris teks yang dapat digulung naik atau turun. Teks password, untuk memasukkan password yang ditampilkan dengan tanda bintang. Teks tersembunyi, untuk menyembunyikan teks dari yang diketikkan dari pandangan pembaca. Tombol Submit dan Reset, untuk mengirimkan data yang di masukkan pembaca ke web atau membatalkannya. Checkbox, memungkinkan pembaca untuk menggunakan kotak cek. Radio button, memungkinkan pembaca untuk memilih salah satu pilihan dari sekelompok pilihan yang tersedia. Daftar menu, memungkinkan pembaca memilih satu atau lebih pilihan dari daftar menu.
TAG <FORM>. Sebuah form dibentuk dengan menggunakan pasangan tag <FORM> ... </FORM>. Setiap elemen FORM harus mempunyai dua buah atribut METHOD dan ACTION.
ACTION. Adalah URL dari script yang dipanggil oleh form tersebut. METHOD. Adalah cara mengirimkan data yang dimasukkan pembaca ke web server. Form ini mempunyai dua metode yaitu GET dan POST. Metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL. Metode POST mengirim seluruh data dari form yang terpisah dari URL.
Berikut ini adalah suatu sample dari tag <FORM>
<form action=http://coba.com/adduser method=post> .......................... </form>
TAG <TEXTAREA>. Secara default tag <TEXTAREA> ditampilkan dengan panjang 4 baris dan lebar 40 karakter dalam keadaan kosong. Anda dapat mengubah ukuran tersebut dengan atribut ROWS dan COLS. Anda dapat menampilkan default teks untuk memudahkan pengisian.
Tabel 5.1 Atribut tag <TEXTAREA>
Atribut name rows cols default teks Memberi nama pada textarea
Fungsi
Mengatur panjang baris/tinggi textarea Mengatur lebar kolom textarea Default teks yang ditampilkan sebagai default pada teks area
Contoh Penggunaan Tag <TEXTAREA>

<html> <head> <title>Penggunaan Tag TEXTAREA</title> </head> <body> <form action="http://coba.com/addueser" method="post"> <textarea name="comment" rows="5" cols="100">Isi Komentar Anda di Sini</textarea> </form> </body> </html>
TAG <SELECT>. Tag ini digunakan untuk membuat menu-menu pilihan dalam suatu daftar pop-up. Anda bisa mendefenisikan sejumlah pilihan dengan menggunakan atribut SIZE. Beberapa pilihan untuk tag <SELECT>:
NAME. Untuk mendefenisikan nama untuk daftar pilihan. SIZE. Menyatakan jumlah baris yang muncul pda form. Jika SIZE adalah 1 (satu), sebuah kotak daftar pull-down yang akan muncul pada browser. Jika SIZE lebih besar dari satu, dan jumlah pilihan yang tersedia lebih kecil atau sama dengan nilai SIZE, maka sebuah kotak daftar sederhana akan ditampilkan. Jika SIZE lebih besar dari satu, tetapi jumlah pilihan yang tersedia melebihi nilai SIZE, maka suatu scroll bar akan ditampilkan.
MULTIPLE. Memungkinkan menu bertindak seperti Checkbox, sehingga pembaca dapat memilih lebih dari satu pilihan.
Daftar pilihan dalam menu pull-down dinyatakan dengan tag <OPTION>. Jika suatu item diinginkan menjadi pilihan default, gunakan atribut SELECTED pada tag <OPTION>. Berikut adalah beberapa pilihan untuk tag <OPTION>:
VALUE: menyatakan nilai yang akan dikembalikan jika suatu item dipilih. SELECTED: menyatakan pilihan deafult. Jika tidak ditentukan, pilihan pertama yang dijadikan default.
Contoh Penggunaan Tag <SELECT>

<html> <head> <title>Penggunaan tag SELECT</title> </head> <body> <form action="http://coba.com/addueser" method="post"> <select name="topologi"> <option value="star">STAR</option> <option value="bus" selected>BUS</option> <option value="ring">RING</option> <option value="mesh">MESH</option> </select> <br> <br> <select name="topologi1" multiple> <option value="star1">STAR1</option> <option value="bus1">BUS</option> <option value="ring1">RING1</option> <option value="mesh1" selected>MESH1</option> </select> </form> </body> </html>
TAG <INPUT>. Tag ini digunakan untuk membuat kontrol kotak teks yang terdiri dari satu baris check box, radio button, tombol submit dan reset, teks tersembunyi dan password.
Tabel 5.2 Atrbut Tag INPUT
Atribut checked
Keterangan Digunakan pada TYPE=CHECKBOX dan TYPE=RADIO yang menyatakan suatu item dipilih atau tidak.
maxlenght name
Menyatakan jumlah maksimal karakter yang dapat dimasukkan. Memberikan nama dari kontrol pada form, NAME diberikan kepada semua field input kecuali CLEAR dan SUBMIT.
size type
Menyatakan ukuran dari kontrol (dalam karakter). Menyatakan jenis kontrol yang digunakan sseperti TEXTAREA, CHECKBOX, TEXTBOX, dan sebagainya.
value
Menyatakan nilai default untuk suatu kontrol. Untuk checkbox atau radio button nilai yang dikirm pada server adalah box atau button yang dipillih sedangkan button Submit dan Reset akan mengirimkan data yang berada dalam button tersebut.
Tabel 5.3 Nilai Atribut TYPE
Nilai text password
Keterangan Memungkinkan pembaca memasukkan dalam data teks Untuk memberikan keamanan dalam pemasukkan data dengan menggantikan karakter-karakter yang dimasukkan menjadi karakter lain (tanda *). Kotak kecil yang menampilkan tanda jika kotak tersebut diklik Kontrol yang hanya dapat mempunyai satu nilai dari beberapa kemungkinan nilai lainnya
checkbox radio
reset submit
Digunakan jika pembaca ingin menghapus atau mengulangi pemasukkan data. Digunakan jika pembaca ingin mengirimkan pemasukan data.
Contoh Penggunaan Tag <INPUT>

<html> <head> <title>Penggunaan tag INPUT</title> </head> <body> <form action="http://coba.com/addueser" method="post"> <table> <tr> <td width="90" valign="top">Nama</td> <td valign="top" width="5">:</td> <td><input type="text" name="nama" maxlength="20"></td> </tr> <tr> <td valign="top">Jenis Kelamin</td> <td valign="top">:</td> <td> <input type="radio" name="kelamin" value="pria">Pria<br> <input type="radio" name="kelamin" value="wanita">Wanita </td> </tr> <tr> <td valign="top">Hobi</td> <td valign="top">:</td> <td> <input type="checkbox" name="hobi1" value="baca">Membaca<br> <input type="checkbox" name="hobi2" value="tulis">Menulis </td> </tr>
<tr> <td valign="top">Password</td> <td valign="top">:</td> <td><input type="password" name="password"></td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </body> </html>
5.2. HTML MAP
Image map adalah suatu gambar yang terbagi-bagi dalam beberapa bagian tertentu dimana setiap bagian dihubungkan dengan suatu link tertentu. Jika bagian tertentu dari gambar diklik, pemakai akan dibawa ke link yang dihubungkan dengan bagian gambar tersebut. Ada dua tipe image map:
Client-side: ketika pengguna melakukan klik pada bagian client-side image map dengan mouse akan dikirimkan kepada browser. Browser akan melanjutkan link ke bagian yang berhubungan dengan gambar.
Server-side: ketika pengguna klik bagian dari server-side image map dengan mouse, koordinat posisi penunjuk mouse akan ke server-side yang ditunjuk dengan atribut href dalam elemen A. Server-side akan mengurus link tersebut.
Yang perlu diperhatikan saat memutuskan untuk menggunakan image map:
Ketika Anda ingin menampilkan link yang mempunyai hubungan fisik dengan yang lain. Ketika Anda ingin memudahkan pemakai untuk menunjuk point yang penting dal web site Anda (seperti penggunaan toolbar). Anda ingin web site Anda mempunyai konsintensi. Kapanpun Anda ingin menambah halaman baru pada website, Anda mungkin ingin menambah navigasi image map untuk halaman baru tersebut.
Alasan tidak menggunakan image map:
Server-side image map tidak bisa dites tanpa web server. Anda harus mempertimbangkan adanya browser yang tidak bisa menampilkan gambar. Jika Anda berkonsentrasi pada performance website, hindari penggunaan image map karena image map berupa gambar (grafik) yang tentu waktu download lebih lambat dari website yang berisi teks saja.
Beberapa hal yang perlu dipertimbangkan dalam membuat gambar image map:
Simpan gambar image map dalam format GIF, karena format ini paling banyak digunakan oleh pendukung browser. Simpan gambar dalam bentuk Interlanced GIF. Hal ini membuat gambar ditampilkan secara tahap demi tahap samapai semua tampil. Transparent GIF dapat digunakan sebagai image map. Gunakan resolusi gambar untuk tidak melebihi resolusi komputer terendah saat ini. Kurangi pemakaian warna dalam jumlah besar, jumlah warna yang banyak akan memperbesar ukuran file gambar.
Gunakan gambar yang sederhana sehingga mudah untuk dibagi-bagi. Gambar image map dibagi-bagi menjadi suatu persegi panjang, lingkaran, poligon, atau titik. Jadi usahakan untuk menggunakan gambar yang mudah untuk dibagi-bagi dengan menggunakan bentuk-bentuk ini.
Defenisi image map diawali dengan tag <MAP> dan diakhiri tag </MAP>. Isi diantara kedua tag adalah definisi image map. Tag AREA digunakan untuk mendefenisikan area image map.
Tabel 5.4 Atribut tag AREA
Atribut name shape
Keterangan Menyatakan nama dari map tersebut Menyatakan jenis dan bentuk area. Nilai-nilai yang mungkin digunakan adalah RECT, CIRCL, POLY, dan DEFAULT.
coords href nohref usemap
Menyatakan koordinat suatu area dengan x1, y1, x2, y2 sebagai titik koordinatnya Menyatakan tujuan yang dinyatakan oleh area tersebut Menyatakan tidak adanya suatu reaksi jika area tersebut diklik Untuk mengunpulkan image map dengan suatu elemen. Nilai atribut usemap harus sesuai dengan atribut name
Gambar 5.1 Gambar Image Map
Contoh Penggunaan Tag <MAP>

<html> <head> <title>Penggunaan Tag Map</title> </head> <body> <map name="Map"> <area shape="rect" coords="111,314,180,382" href="sakura.htm" title="sakura"> <area shape="circle" coords="240,269,39" href="naruto.htm" title="naruto"> <area shape="circle" coords="78,253,43" href="sasuke.htm" title="sasuke"> <area shape="poly" coords="116,139,116,182,134,211,154,222,181,202,197,171,156,134" href="kakasi.htm" title="kakasi"> </map> <img src="naruto.jpg" border="0" usemap="#Map"> </body> </html>
LATIHAN
Kerjakan tugas-tugas di bawah ini:
Desain sebuah form pendaftaran (anda bebas menentukan thema-nya) yang terdiri dari beberapa jenis form seperti yang tertera di bawah ini: o o o o o o
Teks baris tunggal, yang digunakan untuk memasukkan data angka dan teks. Teks banyak baris, yang digunakan pembaca untuk memasukkan beberapa baris teks yang dapat digulung naik atau turun. Checkbox, memungkinkan pembaca untuk menggunakan kotak cek. Radio button, memungkinkan pembaca untuk memilih salah satu pilihan dari sekelompok pilihan yang tersedia. Daftar menu, memungkinkan pembaca memilih satu atau lebih pilihan dari daftar menu. Tombol Submit dan Reset, untuk mengirimkan data yang di masukkan pembaca ke web atau membatalkannya.
Gunakan berbagai tag-tag yang telah dipelajari untuk menambah tampilan dari tugas yang dikerjakan.
Desain sebuah map yang menampilkan sebuah lokasi daerah yang terdiri dari minimal 3 links. Masingmasing links akan menunjukkan sebuah peta lokasi yang merupakan sub bagian dari lokasi utama. Untuk contoh, anda dapat melihat pada akses ini,
http://www.serdangbedagaikab.go.id/map/sergai.htm
Gunakan berbagai tag-tag yang telah dipelajari untuk menambah tampilan dari tugas yang dikerjakan.

4.html Form

Diunggah oleh

Informasi Dokumen

Judul Asli

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

4.html Form

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML HTML FORM

5.1. HTML FORMS

Berikut ini adalah suatu sample dari tag <FORM>

<form action=http://coba.com/adduser method=post> .......................... </form>

Tabel 5.1 Atribut tag <TEXTAREA>

Contoh Penggunaan Tag <TEXTAREA>

Contoh Penggunaan Tag <SELECT>

Tabel 5.2 Atrbut Tag INPUT

Tabel 5.3 Nilai Atribut TYPE

Nilai text password

Contoh Penggunaan Tag <INPUT>

5.2. HTML MAP

Yang perlu diperhatikan saat memutuskan untuk menggunakan image map:

Alasan tidak menggunakan image map:

Tabel 5.4 Atribut tag AREA

Atribut name shape

coords href nohref usemap

Gambar 5.1 Gambar Image Map

Contoh Penggunaan Tag <MAP>

Kerjakan tugas-tugas di bawah ini:

Anda mungkin juga menyukai