28

KATA PENGANTAR

Puji syukur alhamdulillah penulis ucapkan kehadirat Allah SWT atas segala rahmat-
Nya sehingga penulis dapat menyelesaikan modul penunjang pembelajaran TEFA produk
jasa WEB developer jurusan TJKT SMK Negeri 2 Kudus tahun pelajaran 2022/2023.
Modul ini berisi tentang Form HTML yang penulis harapkan dapat dilaksanakan
selama melaksanakan tugas sesuai tugas pokok dan fungsi sebagai guru mata pelajaran TJKT
SMK Negeri 2 Kudus tahun pelajaran 2022/2023. Modul ini dirancang berdasarkan
Kurikulum Prototipe guna memperkuat kompetensi peserta didik dari sisi pengetahuan,
ketrampilan, dan sikap secara utuh.
Penulis mengucapkan terima kasih kepada Kepala SMK Negeri 2 Kudus yang telah
mengizinkan penulis membuat modul penunjang pembelajaran ini, kepada rekan-rekan guru
yang telah memberikan bantuan kepada penulis sehingga modul ini dapat diselesaikan.
Modul penunjang pembelajaran ini masih jauh dari sempurna. Oleh karena itu, saran
dan kritik yang membangun penulis harapkan demi penyempurnaan Modul ini di hari yang
akan datang.

Kudus, Juli 2022

Penulis
 DAFTAR ISI

Halaman Judul ...................................................................................................... i

Kata Pengantar ...................................................................................................... ii
Daftar Isi ............................................................................................................... iii
Tujuan Penggunaan Modul ................................................................................... vi
BAB I Tabel HTML ........................................................................................... 1
A. Tujuan Pembelajaran ......................................................................... 1
B. Uraian Materi ..................................................................................... 1
C. Tugas .................................................................................................. 5
D. Tes Formatif ....................................................................................... 5
BAB II Implementasi Tabel HTML ................................................................... 7
A. Tujuan Pembelajaran ......................................................................... 7
B. Uraian materi...................................................................................... 7
C. Tugas .................................................................................................. 9
D. Tes Formatif ....................................................................................... 10
BAB III Studi Kasus Tabel HTML ...................................................................... 12
A. Soal Praktek ....................................................................................... 12
B. Tugas .................................................................................................. 12
Daftar Pustaka ....................................................................................................... 13
 TUJUAN PENGGUNAAN MODUL

Modul ini berisi tentang Form HTML merupakan ringkasan materi yang disusun
untuk memudahkan siswa dalam mempelajari teori pendukung dalam membangun website
yang menjadi salah satu produk teaching factory TKJT SMK N 2 Kudus. Modul ini
bertujuan memberi bekal dasar kepada siswa tentang membuat sebuah website.
Modul ini disusun karena keterbatasan buku praktis penunjang yang dimiliki siswa.
Siswa rata-rata mendapatkan referensi dari internet dan buku paket penunjang dari
perpustakaan yang jumlahnya tidak sebanding dengan jumlah siswa dan kurang spesifik
dalam implementasinya.
Kompetensi yang harus dicapai dalam materi ini, siswa memahami Form HTML.
Modul ini disusun berdasarkan kurikulum Prototipe, dimana kurikulum Prototipe mempunyai
ciri khusus yaitu memberi kemerdekaan dalam belajar. Modul ini menggunakan sistem
pendidikan berbasis kompetensi. Pendidikan berbasis kompetensi adalah pendidikan yang
memperhatikan kemampuan, keterampilan dan sikap. Salah satu karakter yang paling penting
adalah penguasaan terhadap pengetahuan dan keterampilan secara nyata.
Setiap siswa diharapkan mampu memahami isi dari Modul ini. Setelah selesai
mempelajari modul ini dalam setiap kompetensi, siswa diberikan tugas untuk
mengembangkan diri. Kemudian untuk melihat tingkat pemahaman kompetensi, siswa diuji
dengan mengerjakan tes formatif.
Setelah siswa mempelajari dan memahami isi modul ini, dengan melalui proses
evaluasi diharapkan siswa kompeten dalam memahami materi Form HTML.
 BAB I
FORM HTML

A. Tujuan Pembelajaran
Setelah mempelajari Form HTML, diharapkan siswa mampu :
- Mengetahui pengertian Form HTML
- Mengetahui tag-tag Form HTML

B. Uraian Materi
Form dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>.
Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan
METHOD.
NO ATRIBUT FUNGSI
1 ACTION Menentukan URL yang akan dijalankan dan menerima semua
masukkan dari formulir. Jika ACTION tidak disebutkan,
informasi akan dikirim ke URL yang sama dengan Web itu
sendiri
2 METHOD Menentukan cara pengiriman informasi, yaitu dengan nilai
GET dan POST. GET digunakan jika informasi yang dikirim
menjadi satu dengan URL, sedangkan POST digunakan
jika informasi dikirim secara terpisah dengan URL

Berikut ini tas HTML yang biasa digunakan untuk form :

NO Tag FORM FUNGSI
1 <form> Mendefinisikan sebuah form HTML untuk input pengguna
2 <input> Mendefinisikan sebuah control input
3 <textarea> Mendefinisikan input control multiline (area teks)
4 <label> Mendefinisikan label untuk semua elemen <input>
5 <fieldset> Elemen grup terkait dalam bentuk
6 <legend> Mendefinisikan sebuah caption untuk elemen <fieldset>
7 <select> Mendefinisikan daftar drop-down
8 <option> Mendefinisikan pilihan daftar drop-down
 9 <button> Mendefinisikan sebuah tombol diklik
10 <datalist> Menentukan daftar pilihan yang telah ditetapkan untuk control
input
11 <output> Mendefiniskan hasil perhitungan

1. Tag <INPUT>
Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya berada
dalam pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan
data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta
tombol SUBMIT dan RESET. Tag <INPUT> memiliki sejumlah atribut. Atribut-
atributnya dapat dilihat pada tabel dibawah:
NO ATRIBUT FUNGSI
1 TYPE Menentukan tipe kotak masukan
2 NAME Menentukan nama data
3 SIZE Menentukan ukuran kotak masukan
4 MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan
dalam kotak isian
5 VALUE Menentukan nilai awal untuk kotak masukan
6 CHECKED Mengatur agar kotak cek dalam keadaan terpilih pada keadaan
awal

Dan Tipe yang ada dalam atribut TYPE antara lain :

NO TIPE FUNGSI
1 TEXT Sebagai kotak isian untuk memasukkan data
2 SUBMIT Membuat tombol. Jika tombol diklik maka URL yang
disebutkan pada atribut ACTION dalam tag <FORM>
akan dijalankan
3 RESET Mengembalikan nilai field teks ke default
4 PASSWORD Membuat teks yang diketikkan diganti dengan tanda *
5 CHECKBOX Membuat kotak cek
6 RADIO Membuat tombol radio dalam bentuk 2 pilihan atau lebih yang
mana user hanya dapat memilih satu pilihan
a. Type Text
Tipe text bermanfaat untuk memasukkan data seperti data seperti nama orang atau
alamat seseorang. Contoh pemakaian:

<input type=”text” name=”namaku” size=”30”>

Pada kode diatas, field teks yang dibentuk diberi nama namaku, dengan panjang
tampilan sebanyak 30 karakter dan jumlah karekter maksimal yang dapat diisi oleh
pemakai sebesar 30 buah.

b. Tombol SUBMIT dan RESET

Tipe Submit pada tag <INPUT> akan membentuk tombol Submit dan Reset, yaitu
tombol yang menyebabkan URL yang disebutkan pada Action pada tag <FORM>
akan dimuat. Contoh penulisan kode dengan tombol Submit dan Reset yang paling
sederhana adalah seperti berikut:

<input type=”submit” name=”tombolsubmit” value=”simpan”>

<input type=”reset” name=”tombolreset” value=”batal”>

Dari kode tersebut maka akan ada 2 tombol akan bertuliskan „simpan‟ dan „batal‟
sesuai yang ada di value nya.

c. Type Password
Tipe password yang disebutkan pada atribut TYPE pada tag <input> akan membuat
setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya
dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai).

<input type=”password” name=”password”>

d. Type Checkbox
Tipe checkbox berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk
masukkan yang memungkinkan pemakai mencentang atau tidak mencentang kotak
tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.

<input type=”checkbox” name=”nasi” value=”nasi”>

 e. Type Radio Button
Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan
pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan
dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”.
Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME
perlu diisi dengan nama yang sama. Seperti halnya kotak cek, salah satu tombol radio
bisa dilengkapi dengan atribut CHECKED yang menyatakan bahwa tombol itulah
yang menjadi nilai bawaan. Atribut VALUE untuk menentukan nilai terhadap nama
data sekiranya tombol tersebut diklik.

<input type=”radio” name=”jk” value=”laki-laki”>

<input type=”radio” name=”jk” value=”perempuan”>

2. SELECT BOX
Tag ini digunakan untuk menampilkan beberapa pilihan dengan menggunakan kotak
kombo (drop-down). Untuk menampilkan daftar pilihannya dapat menggunakan tag
<OPTION> dan menyertakan atribut VALUE untuk menyatakan nilai-nilai pilihan.
Sedangkan untuk menyatakan nilai default (nilai bawaan pada saat halaman ditampilkan)
dapat menggunakan atribut SELECTED. Seperti contoh berikut :

<select name =”peminatan”>

<option value=”WEB” selected> Web Programming </option>
<option value=”ISP”> ISP </option>
<option value=”Teknisi”> Teknisi </option>
</select>

3. TEXT AREA
Tag ini dibutuhkan untuk masukan teks yang panjang. Beberapa atribut yang terdapat
dalam tag <TEXTAREA>
NO TIPE FUNGSI
1 NAME Menentukan nama teks area
2 ROWS Menentukan panjang teks area
3 COLS Menentukan lebar teks area
 <textarea name=”alamat” rows=”10” cols=”30”></textarea>

C. TUGAS
Jawablah pertanyaan berikut ini dengan jelas dan benar!
1. Jelaskan jenis-jenis inputan dari Form!
2. Jelaskan kegunaan <legend> dan <fieldset>!

D. Tes Formatif
Pilihlah salah satu jawaban a, b, c, d, atau e yang dianggap paling benar!
1. Dalam tag <from> dalam HTML, tedapat dua jenis method yaitu...
a. GET & POST
b. HTTPS & POST
c. HTTP & HTTPS
d. POST dan SELF
e. HTTP dan SELF
2. Jika kita ingin membuat drop-down list, kita perlu menggunakan tag...
a. <drop-up>
b. <drop-down>
c. <select>
d. <input type='drop-down'>
e. <input type='drop-up'>
3. Untuk menerima masukan berupa pilihan, pilihan yang dapat dipilih bisa atau lebih
dari satu yaitu...
a. Text
b. Submit
c. Checkbox
d. Radio
e. Form
4. Atribut NAME digunakan sebagai...
a. Menamai kotak
b. Menandai lingkaran
c. Menandai teks
d. Menentukan panjang maksimun teks
 e. Mengatur ukuran
5. Tag <input> yang atribut TYPE-nya dapat digunakan untuk menerima masukan
berupa pilihan adalah...
a. Circle
b. Radio
c. Tabel
d. Submit
e. From
 BAB II
IMPLEMENTASI FORM HTML

A. Tujuan Pembelajaran
Setelah mempelajari Form HTML, diharapkan siswa mampu :
- Memahami format form HTML
- Membuat Form HTML yang berisi pilihan-pilihan

B. Uraian Materi
1. Membuat Tag <INPUT>
Buatlah skrip seperti berikut dan simpan dengan nama [Link]
 Hasilnya:

2. Membuat Tag <TEXTAREA>

Buatlah skrip seperti berikut dan simpan dengan nama [Link]

Hasilnya:

3. Membuat Tag <SELECT>

Buatlah skrip seperti berikut dan simpan dengan nama [Link]
 Hasilnya:

C. TUGAS
Jawablah pertanyaan berikut ini dengan jelas dan benar!
 1. Bagaimana cara membuat sintax no.4?
2. Bagaimana cara membuat sintax no 6?

D. Tes Formatif
Pilihlah salah satu jawaban a, b, c, d, atau e yang dianggap paling benar!
1. Tag yang berfungsi untuk membuat daftar pilihan pada drop-down adalah...
a. <option>
b. <label>
c. <input>
d. <form>
e. <select>
2. Tag yang digunakan untuk tombol yang dapat di klik adalah...
a. <option>
b. <label>
c. <input>
d. <button>
e. <select>
3. Input teks password adalah inputan teks dalam bentuk terenkripsi atau bentuk karakter
rahasia sehingga tidak bisa…
a. diakses
b. dikirim
c. terbuka
d. terbaca secara kasat mata
e. terinstal
4. Tag pada pembuatan form pada HTML yang berfungsi untuk mendefinisikan input
control multiline (area teks) input adalah …
a. <option>
b. <label>
c. <input>
d. <legend>
e. <textarea>
5. Sintak dibawah ini digunakan untuk membuat...

a. Radio button
b. List
c. Input
d. Pilihan
e. Tabel
 BAB III
STUDI KASUS FORM HTML

A. Soal Praktek
Buatlah file HTML seperti dibawah ini:

B. Tugas
- Simpan tugas diatas dengan nama “[Link]” dan simpan pada folder “Tugas”
 DAFTAR PUSTAKA

Rudyanto Arief. 2011. Pemrograman Web Dinamis Menggunakan PHP dan MySQL.
Yogyakarta: Penerbit Andi.