Scribd
Unggah
61 tayangan

Modul 5 Pemrograman Web

Modul ini membahas tentang formulir halaman web dan komponen-komponen dasarnya seperti input text, password, submit, radio, checkbox, select, dan textarea. Formulir digunakan untuk mengumpulkan data dari pengguna melalui berbagai komponen tersebut yang dapat diolah dengan bahasa pemrograman.

Diunggah oleh

M.Akhdan Baihaqi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
61 tayangan

Modul 5 Pemrograman Web

Modul ini membahas tentang formulir halaman web dan komponen-komponen dasarnya seperti input text, password, submit, radio, checkbox, select, dan textarea. Formulir digunakan untuk mengumpulkan data dari pengguna melalui berbagai komponen tersebut yang dapat diolah dengan bahasa pemrograman.

Diunggah oleh

M.Akhdan Baihaqi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Modul 5 Pemrograman Web

1. Materi Pokok
Formulir Halaman Web
2. Tujuan
a. Memahami format formulir pada halaman web
b. Menyajikan formulir pada halaman web
3. Pembahasan
1) Format formulir
Untuk menampilkan formulir pada halaman web, digunakan pasangan tag <form>
dan </form>. Tag-tag untuk menampilkan komponen form seperti label, textarea, input,
radio button, checkbox, dan lain sebagainya ditambahkan sebagai elemen dari tag <form>.
Berikut ini adalah format dasar menampilkan formulir dengan HTML.

Baris 7-12 adalah perintah HTML yang menjadi format dasar untuk menampilkan
formulir pada halaman web. Jika diperhatikan, terdapat dua atribut yang ditambahkan di
dalam tag <form> yaitu atribut action dan method. Kedua atribut ini berfungsi untuk
memproses data yang diinputkan oleh user. Namun, kedua atribut ini berhubungan dengan
bahasa pemrograman yang berfungsi untuk pengolahan data, sehingga pembahasan lebih
lengkap akan diuraikan pada materi pokok selanjutnya.

2) Komponen formulir
Seperti telah diuraikan sebelumnya, elemen dari tag <form> adalah tag-tag dari
berbagai macam komponen formulir. Berikut ini adalah macam-macam komponen formulir.
a) Input type text dan input type password
Kedua macam komponen ini pada dasarnya digunakan sebagai kolom isian teks dari
user dan paling sering digunakan pada form login. Selain itu, keduanya juga
ditampilkan menggunakan tag <input> yang disisipkan atribut type di dalamnya. Yang
membedakan adalah nilai dari atribut type yang ditambahkan serta tampilan dari teks
yang dimasukkan pada kolom isian.
Untuk menampilkan komponen input type text, nilai dari atribut type adalah “text”.
Sedangkan, untuk menampilkan komponen input type password, nilai dari atribut type
adalah “password”.
Jika listing kode tersebut dieksekusi di browser, maka hasilnya adalah sebagai
berikut.

Jika diperhatikan, teks yang diinput pada komponen input type text ditampilkan
seperti biasa. Sedangkan, teks yang diinput pada komponen input type password
ditampilkan dengan karakter khusus, yaitu asteriks (*), untuk menjaga kerahasiaan data
user.
Selain atribut type, terdapat macam-macam atribut lain yang dapat ditambahkan pada
tag <input>, seperti diuraikan pada tabel berikut.
Atribut Penjelasan
name Memberi identitas pada komponen input. Identitas
ini diperlukan ketika data yang dientri hendak
diproses
value Nilai isian awal yang ditampilkan ketika halaman
web dimuat
size Menentukan panjang (px) dari kolom isian
maxlength Menentukan batas jumlah karakter yang dapat
dientri pada kolom isian
disabled Menonaktifkan kolom isian

Agar lebih memahami penggunaan komponen input type text dan input type password,
kerjakan Latihan 1 berikut.
Latihan 1
Pada Latihan 1, kita akan membuat dokumen web yang menampilkan komponen input
type dan komponen input password.
1. Buka aplikasi text editor
2. Ketikkan struktur dasar dokumen HTML
3. Tambahkan listing kode berikut di dalam tag <body>
<form>
<h4>Username</h4>
<input type="text" name=”nama” value="Masukkan username"
size="30"> <br>
<h4>Password</h4>
<input type="password" name=”password” value="password"
maxlength="8" size="30">
</form>
4. Simpan dengan nama latihan1.html
5. Jika ditampilkan pada browser, maka hasilnya adalah sebagai berikut.

b) Input type submit


Jika tag input ditambahkan dengan atribut type dan value “submit”, maka komponen
form yang ditampilkan adalah sebuah tombol. Ketika tombol ditekan, data yang diinput
oleh user pada komponen form akan dikirimkan sesuai tujuan yang ditentukan pada
atribut action pada tag <form>. Berikut ini adalah contoh penggunaan input type submit
pada sebuah form login.

Atribut value ditambahkan untuk menentukan teks atau keterangan yang akan
ditampilkan pada tombol. Jika potongan kode di atas dieksekusi pada browser, maka
hasilnya adalah sebagai berikut.

c) Input radio
Komponen input radio juga ditampilkan menggunakan tag <input> yang disisipkan
atribut dengan nilai “radio”. Dengan komponen ini, data diinput berdasarkan tombol
radio yang dipilih user. Komponen radio memungkinkan user untuk memilih satu di
antara banyak pilihan yang tersedia.
Selain atribut type, terdapat beberapa atribut lain yang perlu ditambahkan dalam tag
<input> agar komponen radio dapat berfungsi semestinya, seperti ditunjukkan oleh
tabel berikut.
Atribut Penjelasan
name Memberi identitas untuk komponen radio yang
tergabung dalam satu grup. Komponen-komponen radio
dalam grup yang sama harus memiliki nilai name yang
sama.
Value Data dari setiap komponen radio yang akan diproses
dengan bahasa pemrograman (PHP atau Javascript)
Checked Menandai salah satu komponen radio di antara
komponen-komponen lain. Nilai dari atribut hanya satu,
yaitu “checked”
disabled Menonaktifkan komponen radio

Agar lebih memahami pemanfaatan komponen radio pada formulir, kerjakan Latihan
2.
Latihan 2
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut di dalam tag <body>

Dari potongan kode, dapat diketahui bahwa pilihan radio untuk “S1” dan akan
langsung ditandai ketika halaman web dimuat sedangkan pilihan radio “Tidak ada”
akan dinonaktifkan.
4. Simpan dengan nama latihan2.html
5. Jika ditampilkan pada browser, maka hasilnya adalah sebagai berikut.

d) Input checkbox
Komponen checkbox juga menampung data yang dipilih oleh user. Perbedaanya
adalah jumlah data yang dapat dipilih. Jika user hanya dapat memilih satu komponen
radio saja, komponen checkbox memungkinkan user memilih lebih dari satu.
Untuk menampilkan checkbox, perlu ditambahkan atribut type dengan nilai
“checkbox” di dalam tag <input>. Atribut-atribut lain yang perlu ditambahkan kurang
lebih sama dengan komponen radio. Agar lebih memahami komponen checkbox,
kerjakan Latihan 3 berikut.

Latihan 3
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut di dalam tag <body>
Dari potongan kode, dapat diketahui bahwa pilihan checkbox untuk “Membaca buku”
dan “Bermain alat musik”akan langsung ditandai ketika halaman web dimuat
sedangkan pilihan checkbox “Lain-lain” akan dinonaktifkan.
4. Simpan dengan nama latihan3.html
5. Jika ditampilkan pada browser, hasilnya adalah sebagai berikut.

e) Select
Komponen select menampilkan dropdown list pilihan yang dapat dipilih oleh user.
Untuk menampilkan komponen select, dibutuhkan pasangan tag <select> dan </select>.
Selain itu, sebagai elemen dari tag <select>, disisipkan pasangan tag <option> dan
</option> untuk menambahkan item-item dari list pilihan yang akan disajikan pada
user. Berikut ini adalah format dasar penulisan kode untuk komponen select.

Jika listing kode tersebut dieksekusi pada browser, maka hasilnya seperti ditunjukkan
oleh gambar berikut.

Terdapat beberapa atribut yang perlu ditambahkan baik pada tag <select> maupun
<option>, seperti dijelaskan pada tabel berikut.
Tag Atribut Penjelasan
<select> name Memberi identitas komponen select yang
ditampilkan
multiple Mengatur agar user dapat memilih lebih dari
satu item yang tersedia dalam list pilihan
disabled Menonaktifkan komponen select
<option value Menentukan nilai dari item list pilihan yang
> akan diproses dengan bahasa pemrograman
(PHP atau Javascript
selected Menentukan item default atau item awal yang
akan ditampilkan ketika halaman web dimuat.
Nilai dari atribut ini hanya satu, yaitu
“selected”

Agar lebih memahami penggunaan komponen select, kerjakan Latihan 4 berikut.

Latihan 4
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut dalam tag <body>

4. Simpan dengan nama latihan4.html


5. Jika ditampilkan di browser, hasilnya adalah sebagai berikut.

f) Textarea
Tag <textarea> digunakan untuk menampilkan komponen textarea yang berfungsi
menampung entri data berupa teks. Textarea dapat menampung teks yang tersusun atas
beberapa baris, seperti komentar, keterangan, atau catatan. Berikut ini adalah format
dasar penulisan kodenya.

Elemen yang ditambahkan di antara pasangan tag <textarea> dan </textarea> akan
muncul di awal ketika textarea ditampilkan.
Terdapat beberapa macam atribut yang dapat ditambahkan di dalam tag <textarea>,
seperti diuraikan pada tabel berikut.
Atribut Penjelasan
name Memberi identitas komponen textarea. Identitas ini
diperlukan ketika data yang dientri pada textarea hendak
diproses
cols Menentukan batas jumlah karakter yang sekaligus menjadi
lebar dari textarea. Misal, jika ditambahkan cols=”20”, maka
textarea memiliki lebar 20 karakter
rows Menentukan batas jumlah baris yang sekaligus menjadi
tinggi dari textarea. Misal, jika ditambahkan rows=”5”,
maka textarea memiliki tinggi 5 baris.
disabled Menonaktifkan komponen textarea pada browser. Value dari
atribut ini hanya satu, yaitu “disabled”. Dengan atribut ini,
tampilan kotak textarea menjadi abu-abu.
maxlengt Menentukan batas jumlah karakter yang dapat dientri pada
h textarea

Agar lebih memahami penggunaan komponen textarea pada formulir halaman web,
kerjakan Latihan 5.
Latihan 5
Pada latihan 5, kita akan membuat dokumen web yang menampilkan komponen
textarea dengan pengaturan yang berbeda-beda. Ikuti prosedur berikut:
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML seperti berikut.
<!DOCTYPE html>

<html>
<head>
<title>Textarea</title>
</head>
<body>

</body>
</html>

3. Tambahkan listing kode berikut.


<form>
<h4>Textarea biasa</h4>
<textarea> Silahkan isi komentar Anda </textarea>

<h4>Textarea dengan atribut name="komentar"</h4>


<textarea name="komentar">
Silahkan isi komentar Anda
</textarea>
<h4>Textarea dengan lebar 50 dan tinggi 10</h4>
<textarea cols="50" rows="10">
Silahkan isi komentar Anda
</textarea>

<h4>Textarea dengan batas jumlah karakter 20</h4>


<textarea maxlength="20">
Silahkan isi komentar Anda
</textarea>

<h4>Textarea dengan mode disabled</h4>


<textarea disabled="disabled">
Silahkan isi komentar Anda
</textarea>
</form>

4. Simpan dengan nama latihan5.html


5. Jika ditampilkan pada browser, maka hasilnya adalah sebagai berikut.

g) Datalist
Komponen datalist merupakan gabungan antara komponen select, kolom isian, dan
atribut autocomplete. Dengan datalist, kita dapat menyediakan kolom input yang
dilengkapi dengan fitur autocomplete. Daftar dropdown akan muncul ketika user
mengentri karakter yang sesuai dengan item-item datalist yang telah ditentukan.
Untuk menampilkan datalist, digunakan tiga tag HTML, yaitu tag <input>, <datalist>,
dan <option>. Agar memudahkan pemahaman mengenai komponen datalist, kerjakan
Latihan 6.

Latihan 6
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan potongan kode berikut di dalam <body>

Seperti dijelaskan sebelumnya, tag <input> atau lebih tepatnya input type text
dibutuhkan untuk menampilkan komponen datalist. Di dalam tag tersebut,
disisipkan atribut list yang nantinya menjadi penghubung antara tag input dan
datalist.
4. Di bawah tag <input>, tambahkan potongan kode berikut.

Pada baris 12 ditambahkan tag <datalist> yang memiliki atribut id dengan nilai
yang sama dengan nilai yang dimiliki oleh atribut list pada tag <input>.

Pada baris 13-21, ditambahkan beberapa tag <option> sebagai elemen tag
<datalist>. Fungsinya untuk menentukan item-item daftar dropdown yang akan
muncul ketika user mengetikkan karakter pada komponen input text. Atribut value
menentukan nilai dari item daftar dropdown.

5. Simpan dengan nama latihan6.html


6. Jika ditampilkan pada browser, hasilnya adalah sebagai berikut.

h) Input file
Formulir pada HTML tidak hanya menerima input berupa teks saja melainkan juga
input berupa dokumen lain yang diunggah menggunakan komponen input file. Tag
yang digunakan adalah <input> dimana di dalamnya disisipkan atribut type dengan
nilai “file”. Lebih jelasnya, kerjakan Latihan 7.

Latihan 7
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut di dalam tag <body>

4. Simpan dengan nama latihan7.html


5. Jika ditampilkan pada browser, hasilnya adalah sebagai berikut.

Teks pada button serta keterangan disampingnya muncul secara otomatis dan
hasilnya dapat berbeda-beda pada setiap browser. Ketika file telah dipilih, maka
nama file yang bersangkutan akan muncul di sebelah tombol, seperti ditunjukkan
gambar berikut.

Perlu diketahui bahwa untuk memproses file yang akan diunggah dibutuhkan bahasa
pemrograman seperti PHP atau Javascript.
i) Label
Komponen label digunakan sebagai pelengkap atau keterangan dari komponen-
komponen form lain seperti input teks, radio, checkbox, textarea, dan lain-lain.
Penambahan label tidak berpengaruh secara khusus terhadap tampilan form tanpa
modifikasi dengan CSS. Namun, tag <label> akan memudahkan programmer dalam
mengatur tampilan form dengan CSS. Berikut ini adalah contoh penggunaan label
dalam sebuah form.

Pada listing kode diatas, terdapat atribut for yang ditambahkan pada tag label dan
atribut id yang ditambahkan pada tag input. Kedua atribut tersebut saling berkaitan dan
memiliki nilai atau value yang sama. Tujuannya adalah sebagai pengikat antara
komponen form dengan label yang menjadi keterangannya.
Berikut ini adalah hasil yang ditampilkan pada browser untuk kode pemrograman di
atas.
j) Button
Sekilas, komponen button dan input type submit tampak sama. Namun, komponen
button dapat digunakan baik di dalam maupun di luar form. Salah satu kelebihan
komponen ini dari input type submit adalah memungkinkan programmer menambahkan
gambar untuk mempercantik tampilan button.
Atribut type ditambahkan untuk menentukan fungsi dari komponen button. Jika
“submit” ditambahkan sebagai value dari type, maka button memiliki fungsi untuk
mengirim data yang diinput user untuk diproses. Jika “reset” ditambahkan, button
berfungsi untuk menghapus semua data yang diinput oleh user.
Atribut-atribut yang diperlukan untuk menggunakan komponen button diuraikan pada
tabel berikut.
Atribut Penjelasan
Type Menentukan fungsi komponen button. Untuk nilai
“submit”, maka fungsi button adalah untuk
mengirim data. Jika nilainya “reset”, maka fungsi
button adalah untuk mengosongkan isian form
Disabled Menonaktifkan button

Untuk lebih memahami penggunaan komponen button, kerjakan Latihan 8.

Latihan 8
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut.

4. Simpan dengan nama latihan8.html


5. Jika ditampilkan pada browser, hasilnya adalah sebagai berikut.
Tombol “Login” dapat berfungsi sebagaimana mestinya dengan PHP atau
Javascript. Sedangkan, tombol “Reset” akan mengosongkan kolom isian yang
diinput user.

Anda mungkin juga menyukai