Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore 9-C2-Pemrograman Web-X-1

9-C2-Pemrograman Web-X-1

Published by manz2002, 2019-07-14 05:57:28

Description: 9-C2-Pemrograman Web-X-1

Keywords: RPL,TKJ

Search

Read the Text Version

Pemrograman Web Semester 1 <tr> <td width=\"25%\">Alamat</td> <td><INPUT TYPE=\"TEXT\" Name=\"Alamat\" MAXLENGTH=\"50\" SIZE=\"40\"></td> </tr> <tr> <td width=\"25%\">Jenis Kelamin</td> <td><INPUT TYPE=\"RADIO\" Name=\"Jenkel\" CHECKED VALUE=\"Laki2\">Laki-laki <INPUT TYPE=\"RADIO\" Name=\"Jenkel\" VALUE=\"Perempuan\">Perempuan </td> </tr> <tr> <tr> <td width=\"25%\">Jurusan</td> <td><SELECT Name=\"Jurusan\"> <OPTION VALUE=\"KA\">Komputer Akuntansi <OPTION VALUE=\"MI\">Manajemen Informatika <OPTION VALUE=\"TK\">Teknik Komputer </SELECT> </td> </tr> <tr> <td width=\"25%\">Fasilitas</td> <td><INPUT TYPE=\"CHECKBOX\">Flash Disk</td> </tr> <tr> <td></td><td><INPUT TYPE=\"CHECKBOX\">Bakal Baju</td> </tr> <tr> <td></td><td><INPUT TYPE=\"CHECKBOX\">Bakal Jas</td> </tr> <td></td> <td><INPUT TYPE=\"SUBMIT\" VALUE=\"Simpan\"> <INPUT TYPE=\"RESET\" VALUE=\"Batal\"> </td> </tr> </table> </form> Dan berikut ini adalah tampilan dari form yang telah di tulis di atas : 237 | P a g e

PEMROGRAMAN WEB SEMESTER 1 Gambar 20.11 tampilan form secara horisontal 4) Format formulir secara vertikal Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis mobile tentunya sebuah halaman web di dalam perangkat mobile akan memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad, maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai dengan karakteristik layar yang tidak terlalu besar. Berikut ini adalah contoh dari sebuah form dengan layout vertikal. <!DOCTYPE html> <html> <head> <title>cek form </title> </head> <body> <FORM METHOD=\"POST\" ACTION=\"mailto:[email protected]\"> <H4>FORM DATA SISWA</H4> <INPUT TYPE=\"text\" NAME=\"var1\" SIZE=\"30\" 238 | P a g e

Pemrograman Web Semester 1 VALUE=\"Masukan nama.\"> <BR><BR> <B>Apakah Anda Siswa?</B> <INPUT TYPE=\"checkbox\" NAME=\"var2\"> <BR><BR> <B>Berapa umur Anda?</B> <BR> <INPUT TYPE=\"radio\" NAME=\"var3\" VALUE=\"r1\">10 - 15 <BR> <INPUT TYPE=\"radio\" NAME=\"var3\" VALUE=\"r2\">16 - 20 <BR> <INPUT TYPE=\"radio\" NAME=\"var3\" VALUE=\"r3\">21 - 25 <BR><BR> <INPUT TYPE=\"submit\" NAME=\"var4\" VALUE=\"Kirim\"> <INPUT TYPE=\"reset\" NAME=\"var5\" VALUE=\"Hapus\"> </form </body> </html> Dan hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut : 239 | P a g e

PEMROGRAMAN WEB SEMESTER 1 Gambar 20.12 tampilan form secara vertikal c. Rangkuman Dari kegiatan belajar menyajikan form pada halaman web dapat dibuat kesimpulan sebagai berikut :  <Form> merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke server.  Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen.  Beberapa atribut yang dimiliki oleh tag <form> adalah : - Accept - Accept-charset - Action - Autocomplete - Enctype - Method - Name - Novalidate - target  Untuk mengimbangi perkembangan teknologi mobile adakalanya form dilayout secara vertikal 240 | P a g e

Pemrograman Web Semester 1 d. Tugas Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut : 1. Fungsi dari form 2. Buatlah contoh penyajian form dengan menggunakan ke 9 atribut dari elemen form 3. Buatlah form sederhana yang disajikan secara horisontal 4. Buatlah form sederhana yang disajikan secara vertikal Kemudian secara bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas. e. Test Formatif. Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan. 1. Tuliskan dan jelaskan tentang format umum penulisan elemen form 2. Sebutkan 2 atribut baru dari elemen form yang di HTML5 3. Jelaskan fungsi masing-masing atribut dari elemen form 4. Buatlah form sederhana dengan format f. Lembar Jawaban Test Formatif (LJ). LJ- 01 : penulisan form/formulir ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. LJ- 02 : 3 atribut baru di HTML5 ................................................................................................................................. ................................................................................................................................. 241 | P a g e

PEMROGRAMAN WEB SEMESTER 1 ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. LJ- 03 : fungsi masing-masing atribut dari elemen form ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. 242 | P a g e

Pemrograman Web Semester 1 ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. ................................................................................................................................. g. Lembar Kerja Peserta Didik. 243 | P a g e

PEMROGRAMAN WEB SEMESTER 1 DAFTAR PUSTAKA - Betha Sidik, Ir., Husni I. Pohan, Ir., M.Eng. (Juni 2012) , Pemrograman Web Dengan HTML Revisi Keempat, Penerbit Informatika Bandung - Budi Raharjo (September 2011), Belajar Pemrograman Web, Penerbit Modula, Bandung, - Jennifer Niederst Robbins (2012), Learning Web Design 4th Edition, Penerbit O'Reilly Media, Inc.: Kanada - Purnama Pupung Budi (2004), Kiat Praktis menjadi Desainer Web Profesional, PT Elex Media Komputindo, Jakarta - Simarmata Janner (2010), Rekayasa Web, Penerbit Andi, Yogyakarta - Wahana Komputer (2013), Teknik Singkat dan Cepat Menguasai CSS3, Penerbit Andi, Yogyakarta 244 | P a g e

Pemrograman Web Semester 1 245 | P a g e


manz2002

9-C2-Pemrograman Web-X-1
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS