KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmad, karunia, serta taufik dan hidayah-Nya lah kami dapat menyelesaikan makalah “Memahami Format Pada Halaman Web” ini sebatas pengetahuan dan kemampuan yang dimiliki. Dan juga kami berterima kasih pada guru mata pelajaran Pemprograman Web.
Kami sangat berharap web ini dapat bermanfaat , yaitu : Materi Web Html. Kami juga menyadari sepenuhnya bahwa didalam tugas ini terdapat kekurangan dan jauh dari apa yang kami harapkan. Untuk itu kami harap dan kritik dan saran demi perbaikan di masa yang akan datang.
Semoga Web sederhana ini dapat dipahami bagi siapapun yang membacanya. Sekiranya makalah ini disusun ini dapat bergunabagi kami sendiri maupun orang yang membacanya. Sebelum kami mohon maaf apabila terdapat kesalahaan kata-kata maupun ejaan yang kurang benar mohon kritik atau saran semoga dapat di perbaiki di masa depan.
Karanganyar, 08 Mar 2014
HALAMAN JUDUL 1
KATA PENGANTAR 2
DAFTAR ISI 3
BAB I PENDAHULUAN 4
A. Latar Belakang Masalah 4
B. Batasan Masalah 4
BAB II ISI 6
1. Anatomi dan cara kerja form 6
2. Format formulir 14
3. Komponen entri teks (input teks password, dan input multiline) pada formulir halaman web
4. Komponen entri pilihan (input file, radio, checkbox, select dan datalist) pada formulir halaman web
BAB III PENUTUP 21
LAMPIRAN GAMBAR 22
DAFTAR PUSTAKA 24
BAB I
PENDAHULUAN
A. Latar Belakang Masalah
komponen check box, sering digunakan untuk input yang berupa check list dari pilihan option yang ada. Barang kali ada kesalahan dalam java script yang menyebabkan tidak bisa. Dan dengan makalah ini, dapa lebih mengerti tentang komponen check box, sering digunakan untuk input yang berupa check list.
Untuk mempermudah penyusunan makalah dan pemahaman siswa dalam pelaksanaan perakerin, di berlakukan batasan masalah, sehingga siswa dapat mempelajari hal-hal yang berkaitan dengan bidangnya secara lebih terfokus. Dalam makalah ini, masalah yang akan di batasi hanya seputar tentang penanggulangan masalah pada computer seperti halnya terjadi hang, tidak masuk windows, harddisk tidak terdeteksi, dll.
BAB I
ISI
1. Anatomi dan cara kerja form
Penggunaan Form pada HTML
biasanya berupa identitas diri. Identitas tersebut diinputkan melalui form kemudian dikirim ke database web server.
Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form
memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Elemen kontrol yang dapat digunakan untuk membuat form yaitu :
a. Teks baris tunggal
b. Teks baris jamak
c. Teks password
d. Tombol submit dan reset
e. Checkbox
f. Radio button
g. Menu pop-up
Sebelum mempelajari cara membuat elemen-elemen kontrol di atas, anda sebaiknya mengetahui terlebih dahulu struktur tag yang digunakan untuk membuat
form. Berikut strukturnya :
(Gambar-1.Lampiran)
</form>, kemudian ditambahkan dengan atribut tag METHOD dan ACTION.
Fungsi atribut METHOD adalah untuk menentukan metoda apa yang digunakan untuk mengirim data ke script tujuan. Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan POST. Keduanya tentu memiliki perbedaan dari cara
mengirimkan data. Sedangkan untuk fungsi dari atribut ACTION adalah untuk menentukan URL tujuan dari script yang akan menerima data dari form.
Sebagai contoh perhatikan tag berikut : <form method="post" action="identitas.php"> ... elemen kontrol ...
</form>
Dari tag di atas dapat diketahui bahwa pada form tersebut, data yang diinputkan oleh user akan dikirimkan dengan cara post ke sebuah file PHP dengan nama identitas.php yang letaknya ada di direktori tempat dimana file HTML (yang berisi form tersebut) berada.
Setelah mengetahui struktur dari tag form, selanjutnya akan dibahas mengenai elemen kontrol pada form. Ada 3 tag yang digunakan untuk membuat elemen kontrol pada form yaitu :
a. Tag <input>, untuk membuat elemen text, checkbox, radio button, tombol submit, dan tombol reset.
b. Tag <select>, untuk membuat menu pop-up.
c. Tag <textarea>, untuk membuat kolom isian teks panjang
TAG <input>
text, password text, hidden text), checkbox, radio button, tombol submit, dan tombol reset. Dalam penggunaannya, tag ini tidak dapat berdiri sendiri, tag ini membutuhkan atribut tag
pendukung sehingga dapat menampilkan form pada HTML. Atribut tersebut adalah TYPE, NAME, dan VALUE. Berikut strukturnya :
<input type="..." name="..." value="...">
Fungsi dari atribut TYPE adalah untuk menentukan tipe elemen kontrol yang akan digunakan. Berikut daftar nilai atribut TYPE yang dapat digunakan beserta fungsinya :
(Gambar-2.Lampiran)
2. Format formulir
Dasar Penggunaan Formulir
Didalam sebuah halaman web terkadang kita menjumpai adanya buku tamu bagi pengunjung, umpan balik dan pendaftaran anggota. Diantara ketiga bentuk tampilan tersebut pasti telah menggunakan komponen formulir. Untuk membentuk sebuah formulir diperlukan pasangan tag <form> dan </form>. Dan menggunakan atribut pendukung form yaitu action dan method.
ACTION digunakan untuk menentukan tujuan apabila sebuah tombol pada formulir dijalankan.
menggunakan get berarti informasi yang ditampilkan akan diperoleh pada halaman itu sendiri dalam hal ini url pada action. Sedangkan post informasi tersebut akan dikirimkan terpisah dari url.
Untuk lebih jelasnya penggunaan action dan method dapat dilihat pada potongan program berikut ini :
< form action=”kirim.html”
method=”post”>………….</form> Tag Input Pada Formulir
Untuk menginputkan sebuah data atau teks diperlukan sebuah area yang jelas. Area tersebut bermacam-macam bentuknya ada yang berupa kotak isian ada juga yang berupa kotak kecil atau lingkaran yang cara mengisinya cukup dengan mengklik pada area tersebut serta masih ada bentuk-bentuk yang lainnya. Untuk membentuknya pada formulir diperlukan tag <input> dan beberapa atribut pendukung dan letaknya berada dalam pasangan tag <form> dan </form>. Tag input memiliki sejumlah atribut. Atribut-atributnya seperti yang terlihat pada tabel berikut :
(Gambar-3.Lampiran)
Contoh berikut ini memperlihatkan penggunaan formulir yang melibatkan field teks, tombol submit dan reset.
Formulir.html
<input type = “text” name = “Nama_mahasiswa” size = “20” maxlength = “20”>
<br> Hobby :
<input type = “text” name = “hobby” size = “25” maxlength = “40”>
<br>
<input type = “submit” value = “Kirim”> <input type = “reset” value = “Clear”> </form>
</body> </html>
Berkas program info.html Info.html
<html>
<head><title></title> </head>
<body>
Informasi yang anda butuhkan ada di sini </body>
</html>
Untuk menujukan bahwa jika tombol submit diklik maka berkas HTML yang disebutkan dalam atribut action pada tag <form> akan dimuat.. Setelah anda mempelajari PHP, ASP atau database web lainya, anda akan mengetahui bagaimana cara menangkap nilai-nilai yang dimasukan pada kedua field teks di atas
Passwor merupakan kata sandi yang digunakan untuk membuka atau mengakses suatu informasi. Password umumnya merupakan karakter baik itu angka maupun huruf. Cara memasukan password biasanya telah disediakan area khusus dan karakter yang dituliskan tidak terlihat seperti kata aslinya. karakter yang telah dimasukan tersebut umumnya diterjemahkan dalam kode tertentu dan yang sering dijumpai berbentuk karakter “ * ”. Berikut adalah contoh kode htmlnya :
Password.html
<input type = “text” name = “Nama” size = “20” maxlength = “20”>
<br>
Password :
<input type = “password” name = “kata_kunci” size = “8” maxlength = “8”>
<br>
<input type = “submit” value = “Kirim”> <input type = “reset” value = “Clear”> </form>
</body> </html>
a. Radio
Penggunaan Tipe Radio
Tipe radio umumnya sama penggunaanya dengan
checkbox. Hanya saja kalau checkbox berbentuk kotak dan tandanya berupa karakter centang, kalau pada radio
berbentuk bulatan dengan ditandai karakter titik berwarna hitam apabila kita telah memilihnya. Berikut ini diberikan contoh untuk penggunaan tipe radio :
Radio.html <input type = "radio"
Name = "sex" checked>pria<br> <input type = "radio"
Name = "sex">wanita<br> <br> <hr>
Agama :<br>
<input type = "radio"
Name = "agama" value "i">islam<br> <input type = "radio"
Name = "agama" value "k">kristen<br> <input type = "radio"
Name = "agama" value "t">katolik<br> <input type = "radio"
<input type = "radio"
Name = "agama" value "h">hindu<br> <input type = "radio"
Name = "agama" value "l">lain-lain<br><br> </form>
</body> </html>
b. Checkbox
Penggunaan Tipe Checkbox
Memilih sebuah informasi dengan cara mengklik kotak tertentu dan selanjutnya terdapat karakter khusus yang menandai kotak tersebut, pada formulir inilah yang dinamakan tipe checkbox. Karakter tersebut umumnya berbentuk tanda checklist/centang.
Berikut ini adalah contoh penggunaan tipe checkbox Checkbox.html
Sayur Kesukaan Anda :<br>
<input type = “checkbox” name = “bayam” checked>Bayam<br>
</body> </html>
c. Select dan Data List
Untuk menentukan pilihan dengan cara memilih sendiri terhadap yang ditampilkan pada daftar tertentu dapat dibuat dengan menggunakan pasangan tag <select> dan </select>, istilah lain dari select adalah kotak kombo (drop-down) atau daftar pilihan.contoh penggunaan select diperlihatkan pada contoh berikut ini :
Select.html <html> <head>
<title>textarea</title> </head>
<body> <form>
A. KEIMPULAN.
DAFTAR PUSTAKA
http://pemprograman-web/ 09/02/2009
