Transcript Mengenal dan teknik pembuatan form

Pemrograman Internet 1
STMIK PPKIA Pradnya Paramita
Mengenal Form



Form identik dengan formulir
Form sangat dibutuhkan pada saat kita menginginkan
adanya nilai (data) yang dipilih atau dimasukkan oleh
pengguna
Cara Kerja Form
Tag Dasar Form
Untuk membuat sebuah Form dibutuhkan
beberapa tag dan atribut HTML, diantaranya
adalah :
 Tag <FORM ….> ……</FORM>
 CONTOH :
 <FORM name = “nama form” method =
“POST/GET” action = “URL”>
……….elemen – elemen tag data form
 </FORM>

Atribut
Atribut
Keterangan
Name
nama untuk form yang berlaku
Method
GET = data yang dikirim melalui URL
address
POST = data yang dikirimkan bersama
HTTP header
Action
URL / File yang digunaka untuk menangkap
dan mengolah nilai
Metode Pengiriman Data
Proses Pengolahan Data
Terdapat
1.
dua pendekatan yang dapat
digunakan sebagai acuan untuk proses
pengolahan oleh server site scripting terhadap
data-data yang dikirimkan melalui action, yaitu
:
Unidirectional (satu arah)
Proses Pengolahan Data

2. Bidirectional (dua arah)
Elemen – elemen tag data form
elemen – elemen objek dari tag – tag
form merupakan media entri data.
Karakteristik dari elemen objek form adalah :
1. Input
2. Select atau Daftar
3. Text Area atau Area Isian
Setiap
Tag Input Form
Sintaks penulisan elemen objeknya :
 <INPUT name = “X” type = “y” value = “z”>

Nama
Nama untuk input yang berlaku
Type
Type-nya adalah : text, password, checkbox, radio, hidden, reset,
submit, button, image, dan file
Checked
Input yang secara default dipilih
Vaule
Nilai default atau nilai awal dari input yang dipilih
Size
Lebar / ukuran dari input karakter yang ditampilkan
Maxlegth
Jumlah maksimal karakter yang diinputkan
Acceskey
Merupakan shortcut untuk pengisian objeknya
Disabled
Membuat agar objek tersebut dalam keadaan tidak aktif
Tag Input Form

a.
Tag input memiliki beberapa bentuk atau type
yaitu :
Type TEXT Contoh sintaksnya :
<INPUT type = “text” name=“nama” size=“20” maxlength=“5”>
Type SUBMIT, RESET Contoh sintaksnya :
<INPUT type = “Submit” name=“submit” value = “KIRIM” >
<INPUT type = “Reset” name=“reset” value = “UNDO” >
b.
c. Type PASSWORD Contoh sintaksnya :
<INPUT type = “Password” name=“pwd” size=“8” maxlength =
“10”>
Tag Input Form
Type CHECKBOX Contoh sintaksnya :
<input type="checkbox" name= “hobi1” value="1">
Membaca
<input type="checkbox" name= “hobi2” value="2">
Dengerin Musik
<input type="checkbox" name=“hobi3” value="3">
Shopping
<input type="checkbox" name = “hobi4” value="4">
Berenang
e. Type RADIO Contoh sintaksnya :
Jenis Kelamin :
<input type="radio" name="jk" value="L"checked>Lakilaki
<input type="radio" name="jk" value="P">Perempuan
d.
Tag Input Form
Type FILE Contoh sintaksnya :
<input type=“file” name=“upload”>
g. Type BUTTON
<input type = “button” name =“aksi” value =
“proses” onclick=“”>
f.
Tag Select / Daftar
 Tag
select / drop down menu contoh
sintaksnya :





<select name="musik“ size = “1”>
<option selected value = "jazz">jazz</option>
<option value = "pop">pop</option>
<option value = "dangdut">dangdut</option>
</select>
Name
Nama untuk select yang berlaku
Size
Tinggi/bentuk tampilan menu select
Size 1 (default) combo box, Size 2 berbentuk Spinner, Size > 2
berbentuk menu list
selected
Option yang secara default dipilih
Value
Nilai yang dikirimkan dari option yang dipilih
Menu text-n
Text/label yang di tampilkan untuk tiap option
Text Area / isian pada form

Text Area sintaksnya
Nama
Nama untuk textarea yang berlaku
Rows
Banyaknya baris karakter yang ditampilkan unyuk textarea
Cols
Banyaknya karakter yang ditampilkan untuk textarea
Default text
Default text yang diberikan saat ditampilkan pertamakalinya

textarea rows="2" name="S1"
cols="20">ini adalah text area, disini
dapat mengisikan text dalam jumlah
banyak </textarea>
Tugas