Your SlideShare is downloading. ×
07 form
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

07 form

1,508
views

Published on

Published in: Technology

1 Comment
0 Likes
Statistics
Notes
  • thanks mba ilmunya ....bagi2 tipsnya cara belajar bahasa pemrograman yang efektif.....maturnuwun sanget......mba
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,508
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
95
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AMIROH, S.KomSMKN 3 JOMBANG
  • 2. PENGERTIAN• Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif , karena akan mendaptakan umpan balik dari pengunjung situs web.• Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.
  • 3. Cara Membuat Form Untuk membuat sebuah form, Tag yang digunakan adalah <FORM> … </FORM>. Sedangkan Atribut yang paling umum dipakai adalah METHOD= dan ACTION=.
  • 4. Penulisan :<FORM METHOD=”post | get”ACTION=”alamat _URL”>….….</FORM>
  • 5.  Di mana METHOD adalah atribut yang digunakan untuk menunjukkan metode pengiriman informasi ke web server. Dalam hal ini ada 2 pilihan, POST yang digunakan untuk mengirimkan data yang dimasukkan oleh user dan GET digunakan untuk mendapatkan data dari halaman lain. Metode GET ini hampir tidak pernah digunakan.
  • 6. • Sedangkan atribut ACTION digunakan untuk menentukan ke mana informasi form akan diserahkan. Jika Anda menggunakan CGI SCRIPT pada web server, maka tentukanlah URL-Script nya.• Pada bab ini semua contoh akan menggunakan metode POST ke sebuah alamat e-mail. Ini adalah cara yang paling mudah karena kita tidak perlu mempelajari script apapun.
  • 7. TAG INPUT• Digunakan untuk mendapatkan informasi dari pengunjung.• Penulisan : <INPUT TYPE=”text” NAME=”nama” VALUE=”isi item” SIZE=”angka” MAXLENGTH=”angka”>
  • 8. Keterangan Atribut Atribut FungsiType = “text | hidden | Digunakan untuk memilih tipecheck box | radio | image | informasi yang ingin didapatkansubmit | reset “ dari pengunjung.Name=”nama” Untuk memberi nama item informasi.Value= “isi item” Untuk mengisi item informasi default.Size=” Angka” Untuk menentukan panjang kolom.Maxlength=”angka” Untuk menentukan panjang isian yang dapat diketik oleh pengunjung.
  • 9. TEXT BOX (KOTAK TEKS) Untuk mendapatkan informasi-informasi kecil dari pengunjung, misalnya nama, dan alamatnya, kita dapat menggunakan tipe input text. Penulisan : <INPUT TYPE=”text” NAME=”nama” SIZE=”angka”>
  • 10. SOURCE CODE NYASource HTML gambar 8.1.<html><head><title>Form dengan Text</title><body><FORM METHOD="postt" ACTION="mero@plasa.com">Nama Anda : <INPUT TYPE="text" NAME="nama"SIZE="35"><br></FORM></body></html>
  • 11. Submit dan Reset Tombol Submit dan Reset biasanya selalu kita sertakan dalam sebuah form. Tombol submit ini digunakan untuk mengirimkan informasi yang telah dimasukkan. Sedangkan tombol Reset digunakan untuk mambatalkan seluruh pengisian. Jika tombol ini ditekan maka semua data atau informasi yang telah diisikan akan dihapus semua. Penulisan : <INPUT TYPE=”submit” VALUE=”isi item”> <INPUT TYPE=”reset” VALUE=”isi item”>
  • 12. LAYOUT
  • 13. SOURCE CODESource HTML gambar 8.2.<html><head><title>Form dengan Submit dan Reset</title><body><FORM METHOD="postt" ACTION="mero@plasa.com"><INPUT TYPE="Submit" value="kirim"><INPUT TYPE="reset" value="batal"SIZE="35"></FORM></body></html>
  • 14. Radio Button dan CheckkBox• Dalam form, pengunjung juga diberi kesempatan untuk memilih dalah satu dari sejumlah pilihan dengan menggunakan tombol radio button atau check box.• Penulisan: <INPUT TYPE=”radio” NAME=”nama” VALUE=”isi item”>Teks <INPUT TYPE=”checkbox” NAME=”nama” VALUE=”isi item”>Teks• Di mana VALUE adalah nilai yang akan dikirim ke server bersama dengan NAME. Sedangkan Teks adalah teks yang ditampilkan pada browser.
  • 15. CONTOH
  • 16. SOURCE CODE<html><head><title>Form dengan Radio Button dan Checkbox</title><body><FORM METHOD="postt" ACTION="mero@plasa.com">Jenis Kelamin : <br><INPUT TYPE="radio" NAME="jenis">Pria<br><INPUT TYPE="radio" NAME="jenis">Wanita <br><br>Hobby Anda :<br><INPUT TYPE="checkbox" NAME="hobby">Makan<br><INPUT TYPE="checkbox" NAME="hobby">Belajar<br><INPUT TYPE="checkbox" NAME="hobby">Chatting<br><INPUT TYPE="checkbox" NAME="hobby">Browsing<br></FORM></body></html>
  • 17. MENU DROP DOWN
  • 18. Menu Drop Down• Dengan menu drop down, pemakai memilih informasi dari sekumpulan pilihan yang telah ditentukan.• Pada saat pemakai memilih menu, daftar pilihan akan muncul sebagai menu drop down. Menu dinyatakan dalam Tag <SELECT>…</SELECT> sedangkan daftar pilihannya dinyatakan dengan <OPTION> yang diletakkan di antara kedua tag tersebut. Penulisan : <SELECT NAME=”nama” SIZE=”angka”> <OPTION SELECTED>… <OPTION>… <OPTION>… </SELECT>
  • 19. SOURCE CODE
  • 20. KETERANGAN• Atribut SIZE pada tag <SELECT> di atas digunakan untuk mengatur ukuran tampilan menu drop down-nya.• Sebagai contoh, jika kita mengisikan angka 3 pada atribut SIZE, maka akan ditampilkan ke layar secara default adalah tiga pilihan pertama.• Sedangkan atribut SELECTED pada tag <OPTION> digunakan untuk memilih suatu item yang akan ditampilkan secara default.
  • 21. HASILNYA
  • 22. Mendapatkan Komentar / Text Area• Untuk mendapatkan suatu komentar dari pengunjung, kita harus menyediakan suatu area yang cukup untuk menulis komentar. Untuk keperluan ini digunakan tag <TEXTAREA>…</TEXTAREA>. Penulisan: <TEXTAREA NAME=”nama” ROWS=”jumlah_baris” COLS=”jumlah_kolom”>
  • 23. CONTOH
  • 24. Password Boxes (Kotak Password)• Kita dapat menggunakan kotak password untuk mengumpulkan informasi dari seseorang. Pada saat pemakai memasukkan informasi ke dalam kotak password, informasi disembunyikan dari pemakai dan akan diganti dengan asteriks (*) atau bullet. Fasilitas ini digunakan dalam web site yang memerlukan password untuk memasukkan kode-kode tertentu seperti Credit Card dan lain-lain.
  • 25. Penulisan <INPUT TYPE=”password” NAME=”nama” SIZE=”angka”>Di mana angka adalah ukuran lebar kotak password.
  • 26. CONTOH
  • 27. Source code
  • 28. TUGAS• BUATLAH FORM DENGAN TAMPILAN SEBAGAI BERIKUT :