Mengenal dan teknik pembuatan form

Presentasi berjudul: "Mengenal dan teknik pembuatan form"— Transcript presentasi:

1 Mengenal dan teknik pembuatan form
Pemrograman Berbasis Web STMIK PPKIA Pradnya Paramita

2 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

3 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>

4 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

5 Metode Pengiriman Data

6 Proses Pengolahan Data
Terdapat 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)

7 Proses Pengolahan Data
2. Bidirectional (dua arah)

8 Elemen – elemen tag data form
Setiap elemen – elemen objek dari tag – tag form merupakan media entri data. Karakteristik dari elemen objek form adalah : Input Select atau Daftar Text Area atau Area Isian

9 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

10 Tag Input Form 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” > Type PASSWORD Contoh sintaksnya : <INPUT type = “Password” name=“pwd” size=“8” maxlength = “10”>

11 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 Type RADIO Contoh sintaksnya : Jenis Kelamin : <input type="radio" name="jk" value="L"checked>Laki-laki <input type="radio" name="jk" value="P">Perempuan

12 Tag Input Form Type FILE Contoh sintaksnya :
<input type=“file” name=“upload”> Type BUTTON <input type = “button” name =“aksi” value = “proses” onclick=“”>

13 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

14 Text Area / isian pada form
Text Area sintaksnya textarea rows="2" name="S1" cols="20">ini adalah text area, disini dapat mengisikan text dalam jumlah banyak </textarea> 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

15 Tugas