Modul 8 STMIK IKMI CIREBON Oleh Dita rizki amalia

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

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

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

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

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

1) FORM Contoh : Kegiatan Belajar

1) FORM Contoh (stylingnya): Kegiatan Belajar

1) FORM Output: Kegiatan Belajar

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

b) Text Area Contoh : Kegiatan Belajar

b) Text Area Stylingnya: Kegiatan Belajar

b) Text Area Outputnya: Kegiatan Belajar

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

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

c) Text Select Contoh : Kegiatan Belajar

c) Text Select Stylingnya: Kegiatan Belajar

c) Text Select Output : Kegiatan Belajar

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

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

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

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

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif

6. Kunci Jawaban tes formatif

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