Scribd
Unggah
4 tayangan

Chapter 6 - Form HTML

Diunggah oleh

abdun wijaya
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
4 tayangan

Chapter 6 - Form HTML

Diunggah oleh

abdun wijaya
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
1. TUJUAN PRAKTIKUM
a. Mahasiswa mengenali dan memahami komponen HTML.
b. Mahasiswa mengenali dan memahami struktur dasar HTML.
c. Mahasiswa dapat membuat halaman HTML

2. PERANGKAT PENUNJANG
a. Komputer
b. Infocus
c. Aplikasi Penunjang (Xampp, Web Browser, Notepad++)

3. TEORI PENUNJANG
Form merupakan bagian dari dokumen web yang dapat diisikan oleh
pengguna, untuk memberikan informasi tertentu dari pengguna kepada admin
website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama
aplikasi web dinamis, karena form merupakan satu-satunya sarana bagi
pengembang website untuk mendapatkan informasi dari pengguna. Form
biasanya hanya berupa antarmuka (User Interface) yang disediakan untuk
mengumpulkan data dari pengguna, dan akan diproses dengan bahasa
pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel
database MySQL.
Sebuah form dalam HTML harus berada di dalam elemen form, yang
diawali dengan tag <form> dan diakhiri dengan tag </form>. Elemen form
memiliki beberapa atribut yang harus diberikan, seperti:
1) Atribut Action
Atribut Action berfungsi untuk menjelaskan kemana data isian form
akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat
dari sebuah halaman PHP yang digunakan untuk memproses atau
menangkap lemparan isian data form yang diisikan pada halaman
sebelumnya.

1
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
2) Atribut Method
Atribut Method berfungsi untuk menjelaskan bagaimana data isian form
akan dikirim oleh web browser. Nilai dari atribut method ini bisa
berupa GET atau POST.
• Method POST
POST mengirim data isian form secara langsung kepada nilai atau
halaman tujuan yang ada didalam Action. Maksudnya adalah
mengirimkan sebuah data atau nilai langsung ke file lain.
Pemakaian method POST ini digunakan untuk mengirimkan data
yang penting atau sensitif dan data tersebut bersifat rahasia atau
orang lain tidak boleh tau, seperti password, dan sebagainya. Itulah
yang dimaksud dengan “Mengirimkan data secara langsung”.

Gambar 1. Alur isian data Metode POST

• Method GET

GET mengirim data isian form dan menampilkanya kedalam URL


yang kemudian akan ditampung kedalam Action. Maksudnya
adalah kalau menggunakan method GET dalam membuat formulir
online, pasti ketika mengisi data-data seperti nama, alamat, dan
sebagainya pasti data tersebut akan terlihat di URL dan terlihat oleh
pengguna atau orang lain. Ketika mengisi formulir dengan Method
GET, maka masukan hanya bisa mengisi maksimal 2047 karakter

2
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
saja. Tidak bisa lebih dari itu. Sedangkan Methos POST dapat
mengisi data secara tidak terbatas.

Gambar 2. Alur isian data Metode GET

Lihat contoh pembahasan berikut untuk dapat melihat secara jelas perbedaan
dari kedua method tersebut.

Contoh Atribut Method dengan nilai / value GET :

<form action="proses.php" method="GET">

<!-- form di sini -->

</form>

Contoh Atribut Method dengan nilai / value POST :

<form action="proses.php" method="POST">

<!-- form di sini -->

</form>

Berikut contoh penggunaan FORM secara lengkap. Mula-mula instal


aplikasi XAMPP (https://www.youtube.com/watch?v=sZEkM4kxY0c ) dan
jalankan XAMPP, kemudian buka aplikasi text editor untuk membuat Form
HTML dengan nama file Form.HTML seperti berikut :

3
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
<!DOCTYPE html>
<html>
<head>
<title>Method POST</title>
</head>
<body>
<form method="post" action="tujuan.php">
Nama : <input type="text" name="nama">
<input type="submit" value="Kirimkan">
</form>
</body>
</html>

Kemudian buat file PHP yang baru bernama tujuan.PHP seperti berikut :

<?php

$namabaru = $_POST['nama'];

echo "Nama Saya <strong>$namabaru</strong>";

?>

Setelah membuat file HTML dan PHP. Simpan kedua file tersebut kedalam
XAMPP seperti berikut :

C:\xampp\htdocs (https://www.youtube.com/watch?v=uDOOeX8WzYU )

Setelah menyimpan file HTML dan PHP kedalam XAMPP kemudian


buka file form HTML yang telah dibuat tadi menggunakan browser (Mozilla,
Chrome, dll) seperti URL berikut http://localhost/form.html dan isikan
formulir yang muncul seperti data nama dan klik submit, maka selanjutnya
data nama akan dilempar ke nilai / value dari atribut Action, yaitu tujuan.php
atau URL berikut http://localhost/tujuan.php dan menampilkan halaman PHP
hasil masukan form yang sebelumnya telah diisikan pengguna. Ulangi
tahapan diatas dengan membuat file HTML baru dengan nama
Form_2.HTML seperti berikut :

4
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
<!DOCTYPE html>
<html>
<head>
<title>Method GET</title>
</head>
<body>
<form method="get" action="tujuan_2.php">
Nama : <input type="text" name="nama">
<input type="submit" value="Kirimkan">
</form>
</body>
</html>

Kemudian buat file PHP yang baru bernama tujuan_2.PHP seperti berikut :

<?php

$namabaru = $_GET['nama'];

echo "Nama Saya <strong>$namabaru</strong>";

?>

Setelah membuat file HTML dan PHP maka simpan kedua file tersebut
kedalam XAMPP dan buka http://localhost/form_2.html. Maka perhatikan
perbedaan URL dan tampilan kedua metode yang digunakan. Terdapat
banyak tipe masukan pada form, yang dapat digunakan oleh pengguna untuk
mengisikan data yang berbeda-beda jenisnya.

Pengisian informasi dalam bentuk teks pada form HTML dapat


dilakukan dengan menggunakan tiga buah elemen <textarea>, elemen
<select> dan tag <input>.

1) Textarea

Elemen textarea digunakan untuk masukan teks yang terdiri dari


beberapa baris, sementara tag input digunakan untuk masukan teks yang
hanya satu baris.

5
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana,
seperti berikut :

<textarea>

Contoh isi textarea

</textarea>

Atau, menentukan banyak atau panjangnya baris dan kolom dalam textarea
seperti berikut :

<textarea rows="5" cols="20">

Contoh isi textarea

</textarea>

2) Select
Elemen select digunakan untuk masukan yang telah ditentukan
masukan atau nilainya, dan pengguna hanya dapat memilih satu dari semua
nilai yang tersedia. Elemen select biasa digunakan bersama-sama dengan
elemen option untuk membuat box pilihan. Elemen select tidak akan lepas
dari elemen option atau nested element, hal ini dikarenakan setiap elemen
select harus memiliki beberapa nilai atau pilihan yang ditawarkan kepada
pengguna.

Contoh penggunaan elemen select dan elemen option sebagai berikut:

<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>

6
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
3) Input

Tag input merupakan tag paling banyak digunakan di dalam form dan
memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox,
radio, sampai dengan tombol submit, semuanya dalam bentuk nilai atribut
type.

Macam-macam nilai dari atribut type :

1) <input type=”text” /> adalah masukan yang hanya menerima berupa text,
contohnya digunakan untuk inputan nama, username, dan inputan yang
berupa text pendek.
2) <input type=”password” /> dalam tampilannya sama dengan type text,
namun teks yang diinput tidak akan terlihat melainkan berupa bintang
atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif
seperti password.
3) <input type=”checkbox” /> adalah masukan berupa checkbox yang dapat
diceklist atau di centang oleh pengguna. Pengguna dapat memilih atau
tidak memilih checkbox ini. Type checkbox memiliki atribut checked
yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox
langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh
inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa
hobi.
4) <input type=”radio” /> hampir sama dengan checkbox, namun user
hanya bisa memilih satu diantara pilihan group radio yang tersedia. Type
radio ini berada dalam suatu grup dan pengguna hanya bisa memilih
salah satunya. Contoh inputan type radio adalah jenis kelamin atau
agama seseorang.
5) <input type=”submit” /> berfungsi untuk memproses masukan yang telah
diisikan pada elemen form. Biasanya diletakkan pada baris terakhir dari
elemen form. Fungsi utama <input type=”submit” /> adalah melempar
masukan yang telah diisikan pada form. Semua masukan yang telah diisi

7
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
akan dilempar elemen form menggunakan atribut action dengan metode
tertentu.

Merangkum seluruh atribut, elemen dan tag yang terdapat didalam


elemen form HTML yang telah dibahas diatas, maka saatnya membuat
sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML
berikut, lalu simpan sebagai formulir.html.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" hasil.php" method="post">
<table>
<thead>
<h2>Contoh Formulir</h2>
</thead>
<tbody>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>
<input type="radio" name="jenis_kelamin" value="laki-laki"
checked /> Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan
</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input type="checkbox" name="hobi" value="membaca" />
Membaca Buku
<input type="checkbox" name="hobi" value="menulis" /> Menulis
<input type="checkbox" name="hobi" value="memancing" />
Memancing

8
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
</td>
</tr>
<tr>
<td>Asal Kota</td>
<td>:</td>
<td>
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option value="Kota Bandung">Bandung</option>
<option value="Kota Surabaya">Surabaya</option>
<option value="Kota Medan" selected>Medan</option>
<option value="Kota Makasar">Makasar</option>
<option value="Kota Semarang" >Semarang</option>
</select>
</td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>
<td>
<textarea name="komentar" rows="5" cols="20">
Silahkan katakan isi hati anda
</textarea>
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Mulai Proses!" ></td>
<td><input type="reset" value="Reset Data!" ></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

4. TUGAS PENDAHULUAN
a. Pelajari modul sebelum perkuliahan dimulai
b. Pelajari referensi seperti buku yang sesuai mata kuliah.

9
Modul Praktikum – Web Applied

PERTEMUAN
6 Form HTML
5. PELAKSANAAN PRAKTIKUM
Tugas latihan individu :
• Buat halaman web baru berupa file hasil.PHP untuk action atau lemparan
formulir.HTML diatas
• Simpan dan praktekan, kemudian buka file hasil.PHP sampai
menampilkan semua masukan yang telah diisikan pada formulir.HTML
diatas.

6. TUGAS AKHIR
Detail tugas bisa dilihat edmodo.

10

Anda mungkin juga menyukai