• Like
07 form
Upcoming SlideShare
Loading in...5
×

07 form

  • 48 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
48
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
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.KomSMA DARUL ULUM 2 RSBI JOMBANG
  • 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.  Untuk membuat sebuah form, Tag yangdigunakan adalah <FORM> … </FORM>. Sedangkan Atribut yang paling umumdipakai adalah METHOD= dan ACTION=.
  • 4. <FORM METHOD=”post | get”ACTION=”alamat _URL”>….….</FORM>
  • 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.  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.  Digunakan untuk mendapatkan informasi daripengunjung. Penulisan :<INPUT TYPE=”text” NAME=”nama” VALUE=”isi item”SIZE=”angka” MAXLENGTH=”angka”>
  • 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.  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. 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.  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. 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.  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. <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.  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.  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.  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.  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. <INPUT TYPE=”password” NAME=”nama”SIZE=”angka”>Di mana angka adalah ukuran lebar kotak password.
  • 20.  BUATLAH FORM DENGAN TAMPILAN SEBAGAIBERIKUT :