2020 LJ132 A 14201 6 0609088103 1

Form
Pengertian Form
• Form dalam web adalah satu sarana untuk

memperoleh data dari pengunjung
• Form ibarat formulir dalam dunia nyata, berisi

nama formulir, beberapa pertanyaan, bagian untuk
mengisi jawaban, dengan satu tujuan tertentu.
• Data yang terkumpul digunakan oleh pembuat

formulir untuk suatu kebutuhan si pembuat
Membuat FORM
• Form dibuat menggunakan elemen FORM dan elemen INPUT.
<form>
<input>
<input>
</form>
Atribut-atribut FORM
• Elemen FORM memiliki atribut :

• Action
• Method
• Name
• Elemen INPUT memiliki atribut :

• Type
• Name
• Size
• Maxlength
Contoh FORM
<form action=“” method=“post” name=“form”>

Nama : <input type=“text” name=“nm”>
<input type=“submit” value=“OK” name=“proses”>
</form>
3 Hal Penting FORM
• Method
Method form menentukan bagaimana data inputan form
dikirim dan diproses. Ada 2 macam method : POST dan GET
• Action
Action form menentukan file pemroses data inputan form. Jika
action ini dikosongkan (action=“”) maka dianggap pemrosesan
data inputan form dilakukan di halaman yang sama. Jadi
halaman form dan pemroses bisa dipisah atau dijadikan satu
• Submit button
Tombol yang berfungsi sebagai trigger (pemicu) pengiriman
data dari form ke pemroses.
Berbagai cara Penanganan FORM
• Menyatukan antara form dan pemroses

Form inputan dan proses pengolahan form dilakukan di halaman
yang sama. Dengan cara ini, atribut action dikosongkan (action=“”)
Contoh coding FORM
<html>
<head><title>Pengolahan form</title></head>
<body>
<form action=“” method=“post” name=“myform”>
Nama : <input type=“text” name=“nm” size=“25”>
<input type=“submit” value=“simpan” name=“spn”>
</form>
<?php
//pemroses data inputan form
If (isset($_POST[‘spn’])){
$nama=$_POST[‘nm’];
echo “Nama Anda : <b>$nama</b>”;}
?>
</body>
</html>
Berbagai cara Penanganan FORM
• Memisahkan form dan pemrosesnya

Proses pengolahan form dilakukan di halaman yang terpisah dengan
form inputannya. Jika memakai cara ini, atribut action diisi dengan
nama file pemroses data inputan form
Contoh coding FORM
File halaman form (form1.html):
<html>
<body>
<form action=“simpan.php” method=“post” name=“myform”>
Nama : <input type=“text” name=“nama” size=“25”>
<input type=“submit” value=“simpan” name=“simpan”>
</form>
</body>
</html>
Contoh coding FORM
File halaman pemroses data inputan form (simpan.php) :
<?php
If (isset($_POST[‘simpan’]))
{
$nama=$_POST[‘nama’];
echo “Nama Anda : <b>$nama</b>”;
}
?>
Method GET
• Metode GET digunakan bila data yang dikirim sedikit.
• Metode ini menggunakan $_GET untuk memproses

data.
• Data yang dikirim dengan metode ini akan tampak

pada URL di address bar browser shg tidak aman
untuk data sensitif (misalnya password).
Contoh coding Method Get
<html>
<body>
<form action=“” method=“get” name=“myform”>
Nama : <input type=“text” name=“nama” size=“25”>
<input type=“submit” value=“simpan” name=“simpan”>
</form>
<?php
If (isset($_GET[‘simpan’]))
{
$nama=$_GET[‘nama’];
echo “Nama Anda : <b>$nama</b>”;
}
?>
</body>
</html>
/Form01.php?nama=Joko+Santosa&simpan=simpan
Disebut QUERY STRING

Method POST
• Metode POST menggunakan variabel array $_POST
• Mampu menyimpan data dalam jumlah banyak
• Datanya disimpan dalam tempat tersendiri dan tidak tergantung pada

suatu variabel
Elemen-elemen INPUT
• Text
<form action=“” method=“post”>
Usia :
<input type=“text” name=“tgl” size=“3” maxlength=“5”>
<input type=“submit” value=“OK” name=“tombol”>
</form>
Atribut type menentukan jenis elemen input yang akan dibuat.
Atribut name memberi nama inputan tersebut.
Size menentukan lebar kotak input.
Maxlength menentukan maksimal karakter yang dapat
diinputkan dalam kotak input
Elemen-elemen INPUT
• Password
Password :
<input type=“password” name=“pswd” size=“15”
maxlength=“20”>
<input type=“submit” value=“send” name=“proses”>
</form>
Elemen input tipe password tidak akan menampilkan karakter
yang diinputkan pada kotak input dan diganti dengan karakter
“*”
Elemen-elemen INPUT
•Hidden
Password :
<input type=“hidden” name=“hdd” size=“15”
maxlength=“20”>
</form>
Elemen input tipe hidden akan menyembunyikan

karakter yang diinputkan pada kotak input.
Elemen-elemen INPUT
• Radio
Jenis kelamin :
<input type=“radio” name=“j_kel” value=“pria”>Pria
<input type=“radio” name=“j_kel” value=“wanita”>Wanita
</form>
Nama elemen input tipe radio harus sama untuk satu inputan.
Atribut value untuk menentukan nilai data yang akan dikirim ke
pemroses
Elemen-elemen INPUT
• Checkbox
Hoby :
<input type=“checkbox” name=“hb1” value=“Catur”>Catur
<input type=“checkbox” name=“hb2” value=“game”>Game
</form>
Nama elemen input tipe checkbox berbeda untuk satu inputan.
Atribut value untuk menentukan nilai data yang akan dikirim ke
pemroses
Elemen-elemen INPUT
• Select
Band favorit :
<select name=“band” size=3 multiple>
<option value=“Dmasiv”>D’masiv
<option value=“Peterpan” selected>Peterpan
<option value=“Raja”>Raja
</select>
</form>
Elemen option digunakan untuk membuat pilihan-pilihan pada
inputan
Elemen-elemen INPUT
• Textarea
Pesan :
<textarea name=“psn” rows=“5” cols=“70”>
</textarea>
</form>
Atribut rows untuk mengatur tinggi (jumlah baris yang
tampak) dan cols mengatur lebar kotak inputan
Elemen-elemen INPUT
• Tombol
Ada beberapa jenis tombol :
• tombol submit
<input type=“submit” value=“OK”>

• Tombol reset
<input type=“reset” value=“batal”>

• Tombol general
<input type=“button” value=“hitung” onclick=“script()”>

Tombol reset untuk membatalkan pengiriman data inputan
form sedang tombol general dapat digunakan untuk
bermacam-macam fungsi.
INPUT YANG LAIN
• Color -> <input type="color" name="">

• Date -> <input type="date" name="">
• Date/Time -> <input type="datetime-local" name="">
• Time -> <input type="time" name="">
• Week -> <input type="week" name="">
• Month -> <input type="month" name="">
• E-Mail -> <input type="email" name="">
• Number -> <input type="number" name="" min="" max="">
• Range -> <input type="range" name="" min="" max="">
• URL -> <input type="url" name="">
Latihan
<form name=“login” action=“” method=“post>

Password :
<input type=“password” name=“psw” size=“15” maxlength=“10”>
<input type=“submit” value=“login” name=“tlogin”>
</form>
<?php
If (isset($_POST[‘tlogin’])){
if ($_POST[‘psw’]==“admin”){
echo “Login sukses”;
}else{
echo “Anda tidak berhak menggunakan sistem”;
}
}
?>

2020 LJ132 A 14201 6 0609088103 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

2020 LJ132 A 14201 6 0609088103 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Form

• Form dalam web adalah satu sarana untuk

• Form ibarat formulir dalam dunia nyata, berisi

• Data yang terkumpul digunakan oleh pembuat

• Form dibuat menggunakan elemen FORM dan elemen INPUT.

• Elemen FORM memiliki atribut :

• Elemen INPUT memiliki atribut :

<form action=“” method=“post” name=“form”>

• Menyatukan antara form dan pemroses

• Memisahkan form dan pemrosesnya

File halaman form (form1.html):

File halaman pemroses data inputan form (simpan.php) :

• Metode GET digunakan bila data yang dikirim sedikit.

• Metode ini menggunakan $_GET untuk memproses

• Data yang dikirim dengan metode ini akan tampak

Disebut QUERY STRING

• Mampu menyimpan data dalam jumlah banyak

• Datanya disimpan dalam tempat tersendiri dan tidak tergantung pada

Elemen input tipe hidden akan menyembunyikan

<input type=“submit” value=“OK”>

<input type=“reset” value=“batal”>

<input type=“button” value=“hitung” onclick=“script()”>

• Color -> <input type="color" name="">

<form name=“login” action=“” method=“post>

Anda mungkin juga menyukai