07 form

83
-1

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
83
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

07 form

  1. 1. AMIROH, S.KomSMA DARUL ULUM 2 RSBI JOMBANG
  2. 2.  Form adalah suatu cara untuk mejadikanhalaman web menjadi lebih interaktif , karenaakan mendaptakan umpan balik daripengunjung situs web. Form dapat digunakan untuk membuat bukutamu, formulir pemesanan, survey, memintakomentar dan lain sebagianya.
  3. 3.  Untuk membuat sebuah form, Tag yangdigunakan adalah <FORM> … </FORM>. Sedangkan Atribut yang paling umumdipakai adalah METHOD= dan ACTION=.
  4. 4. <FORM METHOD=”post | get”ACTION=”alamat _URL”>….….</FORM>
  5. 5.  Di mana METHOD adalah atribut yangdigunakan untuk menunjukkan metodepengiriman informasi ke web server. Dalam hal ini ada 2 pilihan, POST yangdigunakan untuk mengirimkan data yangdimasukkan oleh user dan GET digunakanuntuk mendapatkan data dari halaman lain.Metode GET ini hampir tidak pernahdigunakan.
  6. 6.  Sedangkan atribut ACTION digunakan untukmenentukan ke mana informasi form akandiserahkan. Jika Anda menggunakan CGISCRIPT pada web server, maka tentukanlahURL-Script nya. Pada bab ini semua contoh akanmenggunakan metode POST ke sebuahalamat e-mail. Ini adalah cara yang palingmudah karena kita tidak perlu mempelajariscript apapun.
  7. 7.  Digunakan untuk mendapatkan informasi daripengunjung. Penulisan :<INPUT TYPE=”text” NAME=”nama” VALUE=”isi item”SIZE=”angka” MAXLENGTH=”angka”>
  8. 8. Atribut FungsiType = “text | hidden |check box | radio | image |submit | reset “Digunakan untuk memilih tipeinformasi yang ingin didapatkandari pengunjung.Name=”nama” Untuk memberi nama iteminformasi.Value= “isi item” Untuk mengisi item informasidefault.Size=” Angka” Untuk menentukan panjangkolom.Maxlength=”angka” Untuk menentukan panjang isianyang dapat diketik olehpengunjung.
  9. 9.  Untuk mendapatkan informasi-informasi kecil dari pengunjung, misalnyanama, dan alamatnya, kita dapat menggunakan tipe input text. Penulisan :<INPUT TYPE=”text” NAME=”nama” SIZE=”angka”>
  10. 10. Source 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. 11.  Tombol Submit dan Reset biasanya selalu kitasertakan dalam sebuah form. Tombol submit ini digunakan untuk mengirimkaninformasi yang telah dimasukkan. Sedangkan tombol Reset digunakan untukmambatalkan seluruh pengisian. Jika tombol iniditekan maka semua data atau informasi yangtelah diisikan akan dihapus semua.Penulisan :<INPUT TYPE=”submit” VALUE=”isi item”><INPUT TYPE=”reset” VALUE=”isi item”>
  12. 12. Source 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>
  13. 13.  Dalam form, pengunjung juga diberikesempatan untuk memilih dalah satu darisejumlah pilihan dengan menggunakan tombolradio button atau check box. Penulisan:<INPUT TYPE=”radio” NAME=”nama” VALUE=”isiitem”>Teks<INPUT TYPE=”checkbox” NAME=”nama” VALUE=”isiitem”>Teks Di mana VALUE adalah nilai yang akan dikirim keserver bersama dengan NAME. Sedangkan Teksadalah teks yang ditampilkan pada browser.
  14. 14. <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>
  15. 15.  Dengan menu drop down, pemakai memilih informasidari sekumpulan pilihan yang telah ditentukan. Pada saat pemakai memilih menu, daftar pilihan akanmuncul sebagai menu drop down. Menu dinyatakandalam Tag <SELECT>…</SELECT> sedangkan daftarpilihannya dinyatakan dengan <OPTION> yangdiletakkan di antara kedua tag tersebut.Penulisan :<SELECT NAME=”nama” SIZE=”angka”><OPTION SELECTED>…<OPTION>…<OPTION>…</SELECT>
  16. 16.  Atribut SIZE pada tag <SELECT> di atasdigunakan untuk mengatur ukuran tampilanmenu drop down-nya. Sebagai contoh, jika kita mengisikan angka 3pada atribut SIZE, maka akan ditampilkan kelayar secara default adalah tiga pilihanpertama. Sedangkan atribut SELECTED pada tag<OPTION> digunakan untuk memilih suatuitem yang akan ditampilkan secara default.
  17. 17.  Untuk mendapatkan suatu komentar daripengunjung, kita harus menyediakan suatuarea yang cukup untuk menulis komentar.Untuk keperluan ini digunakan tag<TEXTAREA>…</TEXTAREA>.Penulisan:<TEXTAREA NAME=”nama” ROWS=”jumlah_baris”COLS=”jumlah_kolom”>
  18. 18.  Kita dapat menggunakan kotak passworduntuk mengumpulkan informasi dariseseorang. Pada saat pemakai memasukkaninformasi ke dalam kotakpassword, informasi disembunyikan daripemakai dan akan diganti dengan asteriks (*)atau bullet. Fasilitas ini digunakan dalam website yang memerlukan password untukmemasukkan kode-kode tertentu sepertiCredit Card dan lain-lain.
  19. 19. <INPUT TYPE=”password” NAME=”nama”SIZE=”angka”>Di mana angka adalah ukuran lebar kotak password.
  20. 20.  BUATLAH FORM DENGAN TAMPILAN SEBAGAIBERIKUT :
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×