Modul 8 STMIK IKMI CIREBON Oleh Dita rizki amalia.

Presentasi berjudul: "Modul 8 STMIK IKMI CIREBON Oleh Dita rizki amalia."— Transcript presentasi:

1 Modul 8 STMIK IKMI CIREBON Oleh Dita rizki amalia

2 Pengenalan Markup Form pada HTML5
Materi Pokok 1. Materi Pokok Pengenalan Markup Form pada HTML5 Styling pada markup <form> <label> <input> <textarea> dll untuk menghasilkan Form yang menarik

3 2. Pengantar Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form tag ini memiliki dua atribut yaitu METHOD dan ACTION. Pengantar

4 3. Capaian Pembelajaran Mata Kuliah
Kemampuan mengkonstruksi form menggunakan markup <form> <input> <label> <textarea> <select> dll Kemampuan mengimplementasikan styling pada markup <form> <input> <label> <textarea> <select> menggunakan css Capaian Pembelajaran

5 4. Kemampuan Akhir Mahasiswa mampu mengkonstruksi form menggunakan markup <form> <input> <label> <textarea> <select> dll Mahasiswa mampu mengimplementasikan styling pada markup <form> <input> <label> <textarea> <select> menggunakan css Kemampuan Akhir

6 5. Kegiatan Belajar a. Uraian dan Contoh 1) FORM a) Text Input
Control input ini dapat diisi dengan teks yang memiliki kata yang tidak terlalu panjang/hanya satu baris, biasa digunakan dalam form pencarian, nama dan lain sebagainya. Kegiatan Belajar

7 1) FORM Contoh : Kegiatan Belajar

8 1) FORM Contoh (stylingnya):
Kegiatan Belajar

9 1) FORM Output: Kegiatan Belajar

10 NAME : Mendefinisikan nama textarea
b) Text Area Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multibaris. Tag ini mempunyai beberapa atribut, yaitu: NAME : Mendefinisikan nama textarea ROWS : Menentukan berapa jumlah baris textarea AREA : Menentukan lebar dari textarea Kegiatan Belajar

11 b) Text Area Contoh : Kegiatan Belajar

12 b) Text Area Stylingnya:
Kegiatan Belajar

13 b) Text Area Outputnya:
Kegiatan Belajar

14 NAME : Mendefinisikan nama objek select
c) Text Select Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut,yaitu: NAME : Mendefinisikan nama objek select DISABLED : Menentukan apakah dropdown list tidak diaktifkan SIZE : Menentukan berapa pilihan yang akan ditampilkan. REQIRED : Menyatakan bahwa user harus memilih sebelum form disubmit MULTIPLE : Mengizinkan untuk memilih lebih dari satu AUTOFOCUS : Memerintahkan browser agar drop-down list secara otomatis mendapatkan fokus pada saat halaman dimuat ke browser. Kegiatan Belajar

15 c) Text Select Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag <OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi nama item pilihan dan SELECTED yang menunjukkan pilihan default. Tag <OPTION> tidak perlu ditutup dengan </OPTION>. Kegiatan Belajar

16 c) Text Select Contoh : Kegiatan Belajar

17 c) Text Select Stylingnya:
Kegiatan Belajar

18 c) Text Select Output : Kegiatan Belajar

19 Tuliskan source code dari tampilan berikut:
b. Latihan Tuliskan source code dari tampilan berikut: Kegiatan Belajar

20 Ada tiga komponen utama pada html 5 khususnya dalam form yaitu:
c. Rangkuman Ada tiga komponen utama pada html 5 khususnya dalam form yaitu: Tag TextArea (3 atribut) Tag Input (6 Atribut) Tag Select (6 Atribut) Kegiatan Belajar

21 Dengan menggunakan css buatlah script untuk tampilan html berikut ini:
d. Tes formatif Dengan menggunakan css buatlah script untuk tampilan html berikut ini: Kegiatan Belajar

22 e. Umpan Balik dan Tindak Lanjut
Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang form baik itu dengan html dan css. Kegiatan Belajar

23 6. Kunci Jawaban tes formatif

24 6. Kunci Jawaban tes formatif

25 6. Kunci Jawaban tes formatif

26 7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT
7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi