FORM HTML Oleh : Fajar Y. Zebua.

Presentasi berjudul: "FORM HTML Oleh : Fajar Y. Zebua."— Transcript presentasi:

1 FORM HTML Oleh : Fajar Y. Zebua

2 Objektif Mahasiswa dapat memahami penggunaan element-element untuk pembuatan form dan frame Mahasiswa mampu membuat form dan frame sederhana dengan HTML Fajar Y. Zebua

3 Fajar Y. Zebua

4 Element Form Berfungsi untuk mendefinisikan form interaktif.
Mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST) Fajar Y. Zebua

5 Element Form Sintaks : <form action="action" method="GET"|"POST">     </form> Fajar Y. Zebua

6 Element Input Berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Mempunyai attribute yaitu name, size, type, value, checked. Fajar Y. Zebua

7 Element Input Sintaks: <input           name="name"           size="number"           type="text"|"checkbox"|"radio"|"submit"|"reset"           value="value"           checked > Fajar Y. Zebua

8 Element Input Name mendefinisikan nama dari input kontrol form,
Size mendefinisikan ukuran teks pada input kontrol, Type mendefinisikan bentuk-bentuk input kontrol, Fajar Y. Zebua

9 Element Input Value mendefinisikan nilai awal/reset/submit,
Checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM Fajar Y. Zebua

10 Type Berguna untuk menentukan jenis dari inputan data yang akan digunakan pada dokumen HTML Type terdiri dari : Text, Checkbox, Radio, Password, Submit, Reset Fajar Y. Zebua

11 Type = Text Menghasilkan tampilan input data berupa kotak yang dapat menampung hanya sebaris tulisan. Jenis ini biasanya digunakan untuk memasukkan nama atau kata kunci. Contoh : <input type="text" name=“mi" /> Fajar Y. Zebua

12 Type = Checkbox Menghasilkan tampilan berupa pilihan yang dapat dipilih lebih dari satu, Tampilannya berupa kotak yang dapat diberi tanda centang/contreng. Biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain. Fajar Y. Zebua

13 Type = Checkbox Contoh : Fajar Y. Zebua

14 Type = Radio Digunakan untuk data berupa pilihan berganda, yang hanya dapat dipilih salah satu saja. Jenis ini biasa digunakan untuk memasukkan data seperti jenis kelamin, status pernikahan, dan lain-lain. Fajar Y. Zebua

15 Type = Radio Contoh : Fajar Y. Zebua

16 Type = Password Menampung sebaris tulisan, dimana semua tulisan yang diketikkan pada kolom tersebut tidak akan ditampilkan tetapi diganti menjadi tanda ● atau * Jenis ini ditujukan untuk penulisan data berupa password Contoh : <INPUT TYPE=PASSWORD NAME=“paswd"> Fajar Y. Zebua

17 Type = Submit Menampilkan berupa tombol yang berfungsi untuk mengirim data dari masukkan yang sudah ditulis oleh pengguna Ditampilkan pada akhir formulir ketika pengguna telah selesai memasukkan data Fajar Y. Zebua

18 Type = Submit Contoh : <FORM ACTION="tampil.html" METHOD=POST>
Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama"> <INPUT TYPE=SUBMIT> </FORM> Fajar Y. Zebua

19 Type = Reset Digunakan untuk mengosongkan kembali data yang telah dituliskan pengguna Contoh : <FORM ACTION="tampil.php" METHOD=POST> Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama"> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> Fajar Y. Zebua

20 Multiple Atribut yang digunakan untuk menampilkan lebih dari satu pilihan pada tampilan daftar pilihan. Penggunaan atribut MULTIPLE selalu diikuti dengan penggunaan atribut size, yang berguna untuk menentukan berapa banyak pilihan yang dapat ditampilkan secara sekaligus Fajar Y. Zebua

21 Multiple Contoh : Fajar Y. Zebua

22 Size Atribut dari tag SELECT yang digunakan untuk menampilkan jumlah pilihan pada daftar pilihan lebih dari satu. Tanpa penggunaan atribut ini, maka secara otomatis pilihan yang ditampilkan pada daftar pilihan hanya satu. Fajar Y. Zebua

23 Size Contoh : Fajar Y. Zebua

24 TextArea Berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris.  Mempunyai attribute yaitu name, cols, rows name  nama input kontrol form, attribute cols  jumlah kolom textarea yang terlihat, dan attribute rows  jumlah baris textarea yang terlihat Fajar Y. Zebua

25 TextArea Sintaks : <textarea name="textarea" cols="30"
rows="5" > </textarea> Fajar Y. Zebua

26 Frame Digunakan untuk membuat sebuah bingkai tunggal yang terdapat didalam tag FRAMESET. Cara kerja FRAME hampir sama dengan cara kerja tag TD Penggunaan tag FRAME selalu berada didalam tag FRAMESET yang akan menentukan berapa banyak FRAME yang terdapat dalam suatu FRAMESET Fajar Y. Zebua

27 Frame Contoh Fajar Y. Zebua

28 Frame Tag tersebut akan menghasilkan sebuah dokumen HTML yang terdiri dari empat buah FRAME, dua kolom dan dua baris. Banyaknya kolom dan baris beserta lebar masing-masing diatur oleh tag FRAMESET. Sedangkan tag FRAME berguna untuk mengambil sumber dari setiap FRAME yang akan ditampilkan. Fajar Y. Zebua

29 Frame 1 2 3 4 Fajar Y. Zebua

30 Frame FRAME A FRAME B FRAME C FRAME D Fajar Y. Zebua

31 Frame Fajar Y. Zebua

32 Frame Scrolling Berguna untuk menentukan apakah FRAME yang akan ditampilkan memiliki SCROLL atau tidak. Terdapat tiga pilihan dari atribut ini, yaitu : YES, NO, AUTO. Fajar Y. Zebua

33 Latihan 2 Bagaimana membuat ini? Fajar Y. Zebua

34 Latihan 1 Bagaimana membuat ini? Fajar Y. Zebua

35 Latihan 3 Bagaimana membuat ini? Fajar Y. Zebua

36 Latihan 4 Bagaimana membuat ini? Fajar Y. Zebua

37 Latihan 5 Bagaimana membuat ini? Fajar Y. Zebua

38 QUIZ Fajar Y. Zebua