Lembar Kerja Siswa (LKS)

Kompetensi Dasar

3.6 Memahami format formulir pada halaman web

4.6 Menyajikan formulir pada halaman web

Indikator

3.6.1 Menjelaskan anatomi dan cara kerja form

3.6.2 Menjabarkan format formulir
3.6.3 Mengkategorikan komponen entri teks dan komponen entri pilihan
3.6.4 Mengeksplorasi pelbagai jenis format formulir dan komponen-komponen pada formulir
4.6.1 Menampilkan dan menyampaikan hasil percobaan dan pengamatan komponen entri teks
dan entri pilihan
4.6.2 Menampilkan dan menyampaikan hasil percobaan dan pengamatan pelbagai jenis format
formulir dan komponen – komponen pada format formulir

FORMAT FORMULIR PADA HALAMAN WEB

A. Definisi dan Fungsi Form

Form merupakan salah satu bentuk halaman web yang digunakan untuk
menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna
tersebut diolah menggunakan bahasa pemrograman web, baik secara server
side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).
Form dapat digunakan untuk berbagai keperluan seperti keperluan login,
transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari
pengguna, menawarkan barang/jasa secara online dan sebagainya. Form
sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web. Dengan adanya
 proses interaksi tersebut, maka pengguna akan mendapatkan beberapa kemudahan yang
diberikan pada portal/website tersebut.
Di dalam dunia website, web yang mengijinkan interaksi dengan pengunjung sering
disebut dengan web dinamis atau portal. Ada beberapa contoh kegunaan form dalam web :
 Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar
pada service yang disediakan
 Memperoleh informasi pembelian secara online
 Memperoleh feedback dari user mengenai website anda.

B. Anatomi dari Form

Standard atau format umum penulisan dari form adalah sebagai berikut :
<Form method=”post/get” action=”….”>

……
……
……

</form>
Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut <form> :

Catatan : target window name diisikan berupa :

_blank
_self
 _parent
_top

Di antara elemen <form> dan </form> digunakan elemen - elemen HTML <input> yang
berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna. Format umum dari
penulisan elemen HTML <input> adalah sebagai berikut :

Pada jenis masukan (input) dari halaman web minimal harus mempunyai
atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type,
masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut
berlaku untuk beberapa jenis elemen input. Sebagai contoh
adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut
antara lain :

Masing-masing jenis input memiliki karakteristik yang berbeda, dan pemilihan

penggunaannya disesuaikan dengan kesesuaian nilai dari input data yang dikelola. Berikut adalah
salah satu contoh listing kode dari tag elemen form – input.
 <form >

Nama : <input type="text" name="fnama" ><br>

<input name="Provinsi" value="Jawa Timur">

<input type="submit" value="Submit">

</form>

C. Cara Kerja Form

Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja Web
bekerja didasarkan pada arsitektur client / server yang sangat dasar yang dapat diringkas
sebagai berikut : klien (web browser ) mengirim permintaan ke server (misalnya apache ,
nginx,IIS,Tomcat,dan lain sebagainya ), menggunakan protokol HTTP. Server menjawab
requets dari form dengan menggunakan protokol yang sama.
1) Sisi Klien

Server akan memproses data dan kemudian mengirim respon kepada pengguna.
Disisi klien memastikan data mana yang dkirim melalui elemen form. Di sisi klien, HTML
untuk mengkonfigurasi permintaan HTTP untuk mengirim data ke server.
Hal ini memungkinkan pengguna untuk memberikan informasi yang akan
disampaikan dalam permintaan HTTP .

Attribute Description
ACCEPT Mendefinisikan MIME yang diizinkan oleh server yang memuat script
untuk memproses form.
Syntax :
ACCEPT=”Internet Media Type”
 METHOD Menentukan bagaimana data akan dikirim ke server.
GET – data akan dikirim dengan menggunakan query string pada URL.
POST – data akan dikirim ke server sebagai block data ke script.
Syntax :
METHOD=”POST GET”
ACTION Menentukan lokasi dari script yang akan memproses data dari form
Syntax :
ACTION=”URL”

Form pada halaman web didefinisikan dengan pasangan tag <FORM> dan
</FORM>. Tag <FORM> memiliki dua atribut yang penting, yaitu atribut METHOD
untuk menentukan bagaimana form diberlakukan, dan atribut ACTION yang sering
diisikan URL tepat pemrosesan form selanjutnya.
2) Sisi Server

Apapun metode HTTP yang digunakan (get atau post), server menerima string yang
akan di order untuk mendapatkan data list sebagai key atau nilai pasangan. Cara mengakses
list/daftar tergantung pada platform pengembangan yang digunakan.

D. Komponen Entri Teks

1) Komponen text area multiline
Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru,
atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text
dalam bentuk dan format text. Untuk menampung input teks yang panjang mungkin
tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’.
Format umum penulisan text area multiline :

<textarea attribute=”atribut”>

2) Komponen input text password

Komponen input text password bertanggung jawab untuk memasukkan data password.
Format dari elemen input text password HTML-nya adalah sebagai berikut :
 <input type=password name=name>

<input type=password name=name maxlength=length>

<input type=password name=name size=size>

<input type=password name=name value=value>

3) Komponen input text

Komponen input text merupakan komponen data text ke server dalam bentuk textfield.
Format tag HTML-nya adalah sebagai berikut :
<input type=text name=name>

<input type=text name=name maxlength=length>

<input type=text name=name size=size>

<input type=text name=name value=value>

4) Form menggunakan input hidden

Pada format form input hidden ditandai dengan atribut form type=hidden pada tag
<input>, yang artinya ada form inputan yang disembunyikan atau tidak ditampilkan.
Format tag form input hidden HTML-nya adalah sebagai berikut :

<input type=hidden name=name value=value>

5) Pembuatan form biodata dengan input text

Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :
<!DOCTYPE html>
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name="form1" method="POST" action="inputdata.php">
Nama : <input type="text" name="nama"><br><br>
Kelas : <input type="text" name="kelas" maxlength="2"><br><br>
No.Absen :<input type="text" name="nomor" value="" maxlength="3"> <br><br>
Hobby : <input type="text" name="hobby" size="8"><br><br>
Password : <input type="password" name="password"><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>

Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di atas
adalah sebagai berikut:
E. Komponen Entri pilihan
1) Komponen input file
Komponen input file berfungsi untuk memasukkan data file yang dibutuhkan kedalam
sistem web yang dibuat.

<input type=file name=name accept=mime type list>

2) Komponen radio button

Pilihan-pilihan yang hanya mengizinkan untuk memilih hanya satu pilihan dalam
formulir dikenal dengan istilah nama komponen Radio Button.
Format umum tag HTML dari Form Input Radio Button adalah sebagai berikut :

<input type=radio name=name value=value>

<input type=radio name=name value=value checked>

3) Komponen checkbox
Untuk dapat membuat pilihan yang mengizinkan memilih lebih dari satu atau dapat
dikatakan pilihan ganda, dapat menggunkan komponen input yang bertipe checkbox
yang selanjutnya komponen ini dinamakan checkbox.
Format umum tag HTML dari Form Input Checkbox adalah sebagai berikut :

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

<input type=checkbox name=name value=value checked>

4) Komponen input image

Komponen input image bertujuan untuk memasukkan file gambar yang dibutuhkan
oleh sistem web, misalnya saja file gambar foto.jpg.
Format tag HTML dengan atribut image adalah sebagai berikut :
<input type=image name=name src=”url_image”>

<input type=image name=name src=”url_image” align=”alignment”>

5) Komponen select
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan
nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari
bentuk komponen ini adalah combo box atau list box.
Format umum penulisan komponen select adalah sebagai berikut :

<select name=”name”>

<option value=”nilai1”> nilai1 </option>

<option value=”nilai2”> nilai2 </option>

<option value=”nilai3”> nilai3 </option>

<option value=”nilai4”> nilai4 </option>

</select>

6) Komponen Datalist
Datalist digunakan untuk membuat daftar list. Komponen data list merupakan
penggabungan antara list dan field input dengan atribut autocomplete. Saat membuat
pilihan pada datalist, bila terdapat huruf/item yang sama dengan data pada data list
maka akan muncul item yang cocok (fungsi autocomplete bekerja).
Format umum penulisan komponen Datalist adalah sebagai berikut :

<input list=”list”>

<datalist id=”id”>

<option value=”nilai1”>

<option value=”nilai2”>

<option value=”nilai3”>

<option value=”nilai4”>

</datalist>
 Lembar Kerja Siswa
Tujuan :

Siswa dapat membuat dan menyajikan komponen entri teks dan entri pilihan pada halaman web

Alat dan Bahan :

PC/Laptop, Software Adobe Dreamweaver atau notepad ++

pad ++

Langkah Kerja :

1. Siapkan PC (laptop/komputer) yang sudah terinstall software Adobe Dreamweaver atau notepad

++

2. Membuat legend dengan tulisan proses log in

3. Membuat tulisan jimail berwarna biru dan posisi berada ditengah

4. Membuat input teks untuk ID jimail

5. Membuat input password untuk password

6. Membuat button Log in

7. Membuat tulisan tidak bisa mengakses account berwarna biru

8. Membuat tulisan bantuan log in berwarna biru

9. Membuat tulisan atau sesuai gambar

10. Membuat button Buat Account Baru

11. Membuat tulisan Masuk dengan Facebook atau Google

 KOMPONEN ENTRI TEKS

1. Amati gambar di bawah ini !

2. Perintah masukan format HTML-nya yang benar agar menampilkan tampilan seperti gambar di
atas adalah ! (Tulis jawaban di kotak yang telah disediakan)
 KOMPONEN ENTRI PILIHAN

1. Amati gambar di bawah !

2. Perintah masukan format HTML-nya yang benar agar menampilkan tampilan seperti gambar
di atas adalah ! (Tulis jawaban di kotak yang telah disediakan)