Unit 3

HTML: iFrame dan Form

A. Capaian Pembelajaran
1. Sub-CPMK
Membuat dan mengaplikasikan form, frame serta CSS

2. Tujuan Pembelajaran
Melalui diskusi, tanya jawab, serta penugasan menggunakan bahan ajar ini,
mahasiswa dapat
a. Mengenal dan memahami fungsi iframe
b. Mendesain layout halaman website dengan iframe
c. Mengenal dan memahami fungsi form
d. Membuat formulir online menggunakan form
e. Mengaplikasikan iframe dan form dalam pembuatan website sekolah

B. Materi Pembelajaran
1. iFrame
Inline frame atau lebih dikenal sebagai iframe merupakan komponen pada
HTML yang digunakan untuk menampilkan frame berupa tampilan website lain atau
halaman lain pada website yang dikembangkan. Penggunaan iframe memberikan
keleluasaan bagi pembuat website untuk menyematkan video, dokumen dan file lain
pada halaman website tanpa kuatir terkena pelanggaran hak cipta. Selain itu,
penggunaan iframe juga dapat menghemat penggunaan media penyimpanan.
iframe pada html ditandai dengan adanya tag <iframe>. Secara umum kode
iframe pada html adalah <iframe src:”https://www.contoh.com”></iframe>. Kode
iframe tersebut dapat juga ditambahkan atribut lain seperti width dan height atau
atribut lainnya sesuai dengan desain yang ingin ditampilkan.
Contoh penggunaan iframe untuk menampilkan video youtube pada halaman
website.
Script

Minatun Nadlifah|Desain Web

Output

2. HTML Form
Form atau formulir merupakan daftar isian yang digunakan untuk
meminta informasi dari user untuk kemudian diolah dan ditampilkan apada file
action seperti PHP. Tag-tag yang diperlukan untuk membuat sebuah form
meliputi:
• Tag Form Element
Tag <form> merupakan perintah utama dalam pembuatan formulir pada html.
Script umum yang digunakan adalah tag <form> ….</form>. Ada dua atribut
yang digunakan dalam tag <form>, yakni
1. METHOD : menentukan metode pengolahan form, yakni GET atau
POST
2. ACTION : menentukan URL atau lokasi dari file yang digunakan
untuk mengelola form

• Tag Text Area Element

Tag <textarea> digunakan untuk membuat sebuah kotak teks multi baris atau
membuat formulir dengan input teks panjang. Tag ini memiliki beberapa
atribut, yakni
1. NAME : mendefinisikan nama text area
2. ROWS : menentukan jumlah baris text area
3. COLS : menentukan jumlah lebar text area
4. STYLE : menentukan panjang dan lebar kolom

Minatun Nadlifah|Desain Web

Contoh textarea menggunakan rows dan cols
Script

Output

Contoh textarea menggunakan style

Script

Output

Minatun Nadlifah|Desain Web

• Tag Select Element
Tag <select> digunakan untuk membuat sebuah daftar pilihan atau
menampilkan pemilihan item sesuai dengan pilihan yang sudah ditentukan.
Atribut pada tag <select> meliputi;
1. NAME : mendefinisikan nama objek select
2. DISABLED : menentukan apakah dropdown list tidak diaktifkan
3. SIZE : menentukan berapa pilihan yang akan ditampilkan
4. REQUIRED : menyatakan bahwa user harus memilih sebelum form
disubmit
5. MULTIPLE : mengizinkan untuk memilih lebih dari satu
6. AUTO FOCUS : memerintahkan browser agar dropdown list secara
otomatis mendapatkan fokus pada saat halaman dimuat di browser.

Pilihan yang disediakan oleh tag <select> diberikan di dalam tag <option>.
Penggunaan tag <option> tidak perlu ditutup dengan tag </option>. Terdapat
dua atribut pada tag <option>, yakni
1. VALUE : untuk memberi nama item pilihan
2. SELECTED : untuk menunjukkan pilihan default

• Tag Button Element

Tag Button digunakan untuk menampilkan tombol pada formulir html.
Contoh kode programnya sebagai berikut.

Output Ketika button diklik

• Tag Input Element

Tag <input> digunakan untuk membuat elemen-elemen yang digunakan
untuk meminta informasi dari user. Tag <input> tidak memerlukan tag
</input> pada bagian penutup. Atribut yang dimiliki oleh tag <input>
meliputi:
1. NAME : mendefinisikan nama dari elemen input. Atribut ini harus
dituliskan kecuali untu tipe submit dan clear.
2. SIZE : menentukan lebar dar elemen input

Minatun Nadlifah|Desain Web

3. MAXLEGTH : menentukan jumlah maksimum karakter yang dapat
dimasukkan pada elemen input.
4. VALUE : untuk tipe teks atribut ini berfungsi menentukan teks yang
tertulis; untuk tipe check box atau radio berfungsi menen-
tukan nilai item yang dipilih, untuk tipe submit dan reset
berfungsi untuk menentukan teks tulisan pada tombol.
5. CHECKED : hanya digunakan untuk check box atau radio dan menen-
tukan pilihan default.
6. TYPE : menentukan tipe input yang dibuat.
Tipe input yang dapat dibuat meliputi:
o Text, digunakan untuk membuat kotak teks
o Password, digunakan untuk membuat kotak teks, tetapi semua karakter
akan ditampilkan dengan tanda *.
o Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat
dipilih lebih dari satu.
o Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat
dipilih satu saja.
o Reset, digunakan untuk membuat tombol yang fungsinya untuk
menghapus semua isian form yang telah diberikan.
o Submit, digunakan untuk membuat tombol yang fungsinya untuk
mengirimkan data form untuk diolah.
o Color Picker, digunakan untuk pemilihan warna.
o Date, digunakan untuk memasukkan data tanggal berupa tanggal, bulan
dan tahun.
o Email, digunakan untuk memasukkan data berupa alamat email.
o File, digunakan untuk layanan input file, baik office, gambar, foto,
aplikasi, dan lain-lain.
o Month Field, digunakan untuk input bulan pada sebuah tahun tanpa
menampilkan tanggal.
o Number Field, digunakan untuk memasukkan angka numerik. Bidang
inputnya dibatasi oleh atribut min dan max.
o Search Field, digunakan untuk memasukkan teks berupa pencarian
layaknya pencarian Google.
o URL Field, digunakan untuk memasukkan data berupa alamat website
dengan ciri khas menggunakan domain.
Perintah yang digunakan di html untuk masing-masing tipe mengikuti format
<input type=”nama tipe”>. Contoh: <input type=”color”>. <input
type=”numer’>, dan sebagainya.

Implementasi input element dapat dilihat pada kode pemrograman berikut:

Minatun Nadlifah|Desain Web

Script

Output

Minatun Nadlifah|Desain Web

• Tag Output Element
Elemen output dapat digunakan untuk menampilkan hasil proses pada
dokumen html. Contoh pada pembuatan kalkulator sederhana dan
menampilkan rentang nilai
Script Kalkulator Sederhana

Output

Script tampilan rentang nilai

Output

Minatun Nadlifah|Desain Web

C. Aktivitas Pembelajaran
1. Buatlah sebuah iframe untuk menampilkan dua halaman website dengan
mengikuti langkah berikut.
• Buat 2 halaman website dengan nama web1.html dan web2.html
Script web1.html

Script web2.html

• Buat tampilan website ketiga yang memuat iframe dengan menggunakan script
berikut kemudian simpan dengan nama iframeweb1_2.html
Script iframeweb1_2.html

Tampilkan output dari script iframeweb1_2.html dan berikan penjelasan

terkait cara kerja output yang dihasilkan melalui script tersebut.

Minatun Nadlifah|Desain Web

2. Perhatikan empat buah kode pemrograman berikut.
Kode 1

Kode 2

Kode 3

Minatun Nadlifah|Desain Web

 Kode 4

Identifikasilah perbedaan perintah pada script yang diberikan pada keempat kode
di atas dan jelaskan fungsi masing-masing perintah tersebut ditinjau dari output
yang dihasilkan oleh keempat kode yang diberikan!

3. Buatlah sebuah formulir html yang memenuhi kriteria berikut:

a. nama lengkap, dengan ukuran maksimal 30 karakter
b. alamat rumah, dengan ukuran maksimal 90 karakter
c. alamat kantor, dengan ukuran maksimal 90 karakter
d. nomer Telpon/Hp, dengan ukuran maksimal 12 karakter
e. Hobi, 5 pilihan hobi yang disediakan dan pengguna boleh memilih lebih dari
satu hobi
f. Golongan darah, tampilkan dalam bentuk dropdown-list
g. Komentar, boleh menggunakan style ataupun kolom dan baris

Minatun Nadlifah|Desain Web