Mengenal dan teknik pembuatan form Pemrograman Berbasis Web 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 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 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

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

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

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

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

Tugas