MEMBUAT FORM Dan FRAME 1. Form Form Form

dokumen-dokumen yang mirip
1. FRAME. Frame digunakan untuk membagi suatu halaman web menjadi beberapa bagian. Beberapa bagian tersebut dapat digunakan untuk berbagai keperluan.

Praktikum Pemrograman Lanjut Dasar WEB(1)

[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]

Pemrograman Basis Data Berbasis Web

P - 6 Bab 4 : HTML (Hypertext Markup Language)

MENAMPILKAN FRAME FRAME

Pengantar E-Business dan E-Commerce

Muhamad Alif,S.Kom Teknik Informatika UTM

Bab 6 FRAME. A. Maksud dan Tujuan 1. Maksud : Mahasiswa dapat mendesain website dengan membagi jendela windows menjadi beberapa frame.

1) Gunakan peralatan sesuai dengan fungsinya. 2) Bekerjalah sesuai dengan cara kerja atau petunjuk yang telah ditentukan.

MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

MS Wulandari - HTML 1

Pemrograman Web DASAR HTML 2

Form Input HTML dan Frame. Siti Maesyaroh. M.Kom.

Pemrograman Basis Data Berbasis Web

BAB-12 MEMBUAT FORM HTML

Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML

Frame dan IFrame. Click to edit Master subtitle style. Pengenalan Web STMIK AKAKOM Yogyakarta

Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.

Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik

Soal Remedial Prakarya-1

KURSUS ONLINE JASA WEBMASTERS

Eko Purwanto WEBMEDIA Training Center Medan

MATERI: FRAME PADA HTML

FORMAT TEXT. Tag Attribut Value Keterangan. RGB(red,green,blue) Kode Warna. Memberikan warna terhadap background web mengatur posisi text rata kiri

Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

Tujuan: Siswa dapat membuat list item dan form untuk diterapkan dalam pembuatan halaman web

MODUL PRATIKUM - 05 PEMROGRAMAN BERBASIS WEB (CCP119)

1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file jawaban : b

IV. Form. A. Pengenalan Form. B. HTML Input Element

MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form

Pemrograman Basis Data Berbasis Web

SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT

Form identik dengan formulir

10/04/2014. Oleh: Fiftin Noviyanto, S.T., M.Cs. Form Server Side Scripting

PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML

HTML Dasar. PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya

Pertemuan V. Semester 1

P - 6 Bab 4 : HTML (Hypertext Markup Language)

Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form.

Pengenalan Perancangan Web 2017

MODUL 4 HTML. (HyperText Mark-Up Language) Sub : Frame

Sintak penulisan form adalah: <form method= post atau get action= program_pemroses > elemen-elemen FORM </form>

Bab 5 FORM. A. Maksud Dan Tujuan 1. Maksud

MODUL 3 INTERNET PROGRAMMING : PHP 3

Syntax HTML. Biasanya digunakan untuk menulis komentar, tidak akan timbul dihalaman web.

Pemrograman Basis Data Berbasis Web

BAB III FORMULIR. <input type='text' name='...' size='40' maxlength='..'>

HTML: Frame, Form #JOBSHEET 2 I. TUJUAN DASAR TEORI

MODUL TIK - HTML II KELAS XI SEMESTER I

MODUL PRATIKUM 03B PEMROGRAMAN BERBASIS WEB (CCP119)

HTML-FRAME. <FRAMESET BORDER=# {[ROWS COLS]}={#,[#[,...]]}> <FRAME SRC= url NAME= nama frame > </FRAMESET>

Ikbal jamaludin

Gambar 11.1 Contoh Frame

Pemrograman Web. HTML Lanjut. Indrato, S.Kom List. Ordered Lists (OL) Ordered List (OL) Ordered List (OL) PemrogramanWeb.

PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).

Pemrosesan form HTML

MODUL 1 PENGENALAN HTML

FRAME PADA HALAMAN WEB

Membuat Pengisihan Borang (Form) dengan Pemrograman WEB

HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.

Hypertext Markup Language (HTML)

Pertemuan IV. Semester 1

KURSUS ONLINE JASA WEBMASTERS

</select></font></p> </form> </body>... Hasil:

PHP Penanganan Form. Overview. 15-Jan Jenis-jenis Form Form Validation. Tag <FORM> Atribut ACTION Atribut METHOD SUBMIT BUTTON

Muhammad Zen Samsono Hadi, ST. MSc.

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

4. Type yang berfungsi untuk menerima masukan berupa teks dari pengguna adalah A. Checkbox B. Submit C. File D. Text E. Button

HTML FORM. Praktikum III

FORM DAN ELEMENNYA. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com

Berikut akan diberikan contoh program HTML yang sederhana :

BAB 1 PENGENALAN HTML

HTML (Hypertext Markup Language)

RIO ANDRIYAT KRISDIAWAN, M.KOM

Form dan Variabel Oya Suryana

Aplikasi Form Menggunakan HTML

PEMROGRAMAN WEB 1 (PART 2) Berbagai macam Tag HTML. Rio Andriyat Krisdiawan, M.Kom

Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )

Penanganan Form. Muhammad Zen Samsono Hadi, ST. MSc. T.TELEKOMUNIKASI - PENS

Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency

X/HTML5 Form. Auriza Akbar 25 Mei 2012

MODUL IX FORM. 9.1 Pendahuluan

Jika kita perhatikan gambar di atas, pada bagian yang berwarna biru adalah hasil dari coding

P - 11 Bab 8 : PHP & HTML (Manipulasi Form)

BAB I PERKENALAN HTML

Tabel dan Form HTML. Kuliah #2. Dept. Ilmu Komputer IPB 2016

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI

Pengenalan Perancangan Web 2016

MODUL PEMROGRAMAN WEB

MODUL 8 WEB PROGRAMMING : PHP 3

Tutorial HTML. Oleh: Willy Bayuardi Suwarno, SP, MSi. Dipublikasi di tanggal 7 Mei 2008

Dengan asumsi bahwa aplikasi masih menggunakan cookie, maka query untuk membuka profil adalah seperti berikut:

Membuat Form Mahasiswa dengan HTML [Part 1]

Pemrograman Web PRAKTIKUM 1 PENGANTAR

Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8

Transkripsi:

1. Form Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya. Perintah untuk membuat form yaitu : <FORM [METHOD= POST/GET ACTION= URL > <INPUT> <INPUT> </FORM>

2. Method Method digunakan untuk menentukan bagaimana form diberlakukan Method digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam action Nilai yang umum digunakan berupa GET dan POST POST digunakan untuk membuat informasi dikirim secara terpisah dengan URL GET digunakan membuat informasi dikirim menjadi satu dengan URL

3. Action Action sering diisi dengan URL tempat pemrosesan form selanjutnya. Jika action tidak disebutkan, informasi akan dikirim ke URL yang sama pada halaman web.

4. Elemen-Elemen Pada Form

<HTML><HEAD> <TITLE>Contoh Membuat Form</TITLE></HEAD><BODY> <H1 ALIGN="CENTER">FORM PENDAFTARAN ONLINE</H1> <HR size=3 color="black"> <FORM METHOD="POST" ACTION="contohform.htm"> <TABLE> <TR> <TD><B>Nama :</B></TD> <TD><INPUT TYPE="Text" NAME="varNama" SIZE="15"></TD></TR> <TR> <TD><B>Alamat :</B></TD> <TD><INPUT TYPE="Text" NAME="varAlamat" SIZE="30"></TD> </TR> <TR> <TD><B>Agama :</B></TD> <TD><SELECT NAME="agama" SIZE="1"> <OPTION>Islam</OPTION> <OPTION>Kristen</OPTION> <OPTION>Budha</OPTION> <OPTION>Hindu</OPTION> </SELECT> </TD> </TR> <TR><TD><B>Password :</B></TD> <TD><INPUT TYPE="Password" NAME="varPassword" SIZE="10"></TD> </TR> </TABLE> <B>Jenis kelamin: </B><INPUT CHECKED TYPE="Radio" NAME="Kelamin" VALUE="Pria">Pria <INPUT TYPE="Radio" NAME="Kelamin" VALUE="Wanita">Wanita <BR> <B>Hobi:</B><BR> <INPUT TYPE="Checkbox" NAME="Kelamin" VALUE="Soccer">Sepakbola <INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Badminton">Bulutangkis <INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Computer">Komputer <BR> <INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Game">Permainan video <INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Internet">Internet <BR> <B>Komentar</B><BR> <TEXTAREA Cols="30" Rows="5" Name="komentar"></TEXTAREA><BR> <INPUT TYPE="Submit" VALUE="Send info"> <INPUT TYPE="Reset" VALUE="Clear form"> </FORM></BODY> </HTML>

Tampilannya Sebagai Berikut:

5. FRAME Frame digunakan untuk membagi suatu halaman web menjadi beberapa bagian. Beberapa bagian tersebut dapat digunakan untuk berbagai keperluan. Adapun cara untuk membuat frame pada halaman web adalah dengan menggunakan perintah : <FRAMESET> Atribut Frame </FRAMESET>

6. Atribut-Atribut Frame Atribut fungsi ROWS COLS NAME SRC MARGINWIDTH MARGINHEIGHT SROLLING BORDER BORDERCOLOR FRAMEBORDER NORESIZE Menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat berupa pixel, % setelah nilai atau nilai relatif (*) Fungsi sama sepert ROWS hanya digunakan untuk kolom. Menentukan nama frame sehingga dapat berfungsi sebagai TARGET dari URL lain Berisi URL yang menjadi sumber dari frame Untuk menentukan margin frame bagian kanan dan kiri Menetukan margin frame bagian atas dan bawah. Menentukan scrollbar pada frame Diisi dengan YES selalu menampilkan scrollbar, NO tidak menapilkan srollbar Mengubah ketebalan pembatas frame Memberikan warna pada pembatas frame Pembatas frame. Dapat dihilangkan dengan memberi nilai NO Mencegah pengguna untuk mengubah ukuran dari frame

Untuk membuat halaman web yang memiliki frame biasanya akan dibuat satu halaman web utama yang memiliki frame ditambah dengan file-file HTML lainnya Yang digunakan sebagai sumber untuk frame tersebut. Berikut akan diberikan contoh penggunaan frame pada suatu halaman web. (Satu.html) <html> <body bgcolor="#008080"> <h1 align="center"><font face="arial"> Halaman Satu dari File Satu.Html </font> </h1> </body> </html>

(Dua.html) <html> <body bgcolor="#ff0080"> <h1 align="center"><font face="arial"> Halaman Dua dari File Dua.Htm l</font></h1></body></html> (Tiga.html) <html> <body bgcolor="#aa00ff"> <h1 align="center"><font face="arial"> Halaman tiga dari File tiga.html</font></h1> </body> </html>

File dengan framerows : <html> <frameset rows="80,*"> <frame src="satu.html" name="atas" scrolling="no" noresize> <frame src="dua.html" name="bawah"> </frameset><html>

File dengan framecols <html><frameset cols="200,*"> <frame src="satu.html" name="kiri" scrolling="no" noresize> <frame src="dua.html" name="kanan"> </frameset><html>

Contoh gabungan dari framecols dan framerows <html> <frameset rows=20%,* border=10 bordercolor="red"> <frame src="satu.html" name="atas" scrolling="no" noresize> <frameset cols=30%,*> <frame src="dua.html" name="bawah"> <frame src="tiga.html" name="bawah"> </frameset><html>

Sebagai tambahan, file-file sumber dapat dibuat hyperlink ke file-file lain dengan mengarah ke salah frame yang ada di halaman web tersebut. Berikut akan diberikan contoh file yang membuat target ke salah satu frame. (judul.html) <html> <body bgcolor="yellow"> <h1 align="center">zufa S WEBSIDE</h1></body></html> (home.html) <HTML> <HEAD> <TITLE>Membuat Frame- Home</TITLE> </HEAD> <BODY BGCOLOR="#000ddd"> <H1 ALIGN=center>Halaman Utama.</H1> <p>selamat datang di homepage saya! Homepage ini pasti menarik dan mudah diikuti karena guru saya, selain SANGAT menarik dan menyenangkan, telah mengajarkan cara yang benar dalam membuat Frame!</P> <CENTER><img src="work.gif"><br>selamat menikmati!</center> </BODY> </HTML>

(Daftar.html) <HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#aaaFFF"> <H3>---Daftar---</H3> <A HREF="home.html" TARGET="bawahkanan">Home</A><P> <A HREF="satu.html" TARGET="bawahkanan">Ke File-1</A><BR>atau <A HREF="dua.html" TARGET="bawahkanan">ke File-2</A><P> atau kunjungi<br> <A HREF= http://www.unikom.ac.id/ TARGET="_top">UNIKOM WESITE</A> <BR> <A HREF="http://tutorial.pts.co.id/" TARGET="_top">Web Tutorial</A> </BODY> </HTML>

(Master.html atau biasanya bernama Index.html) <html> <frameset rows=20%,* border=0> <noframes> maaf hanya bisa tampil pada web yang mendukung frame </noframes> <frame src="judul.html" name="atas" scrolling="no" noresize> <frameset cols=20%,*> <frame src="daftar.html" name="bawahkiri" noresize> <frame src="home.html" name="bawahkanan"> </frameset> </frameset> <html>

Tampilannya sebagai berikut: