Form identik dengan formulir

Ukuran: px

Mulai penontonan dengan halaman:

Download "Form identik dengan formulir"

Yenny Lesmono
7 tahun lalu
Tontonan:

1 Oleh : Moh Sulhan

2 Form identik dengan formulir Form sangat dibutuhkan pada saat kita mengizinkan/menginginkan adanya nilai (data) yang dipilih atau dimasukkan olehpengguna. Kapasitas dari form hanya menyediakan media entry data dan mengirimkannya, tetapi tidak menerima dan mengolah. Yang akan menangani penerimaan dan mengolah adalah web scripting yang bersifat server site.

3 Form Form ( form.html ) Action=verifikasi.php submit File Verifikasi verifikasi.php (File : Server Site Scripting ) <? ?> - File PHP - File ASP - File JSP -dll Data Server

4 Untuk membuat Form dibutuhkan tag dan attribut HTML, diantaranya adalah : <FORM>...</FORM> Tag METHOD attribut ACTION attribut NAME attribut

5 <FORM name="nama-form" method="post/get" action="url"> Atribut atribut pendukung </FORM> Teknik penulisan skrip secara umum adalah : <Body> <FORM name="nama-form" method= POST/GET" action="url"> Elemen elemen tag-tag data form </FORM> </Body>

6 <FORM name="nama-form" method="post/get" action="url"> Atribut atribut pendukung </FORM> Berikut attribut attribut dariform : Atribut METHOD ACTION NAME Keterangan - Menentukan bagaimana data akan di kirim ke server. - GET data akan di kirim dengan menggunakan query string padaurl. - POST data akan di kirimi ke server sebagai block data ke skrip. Syntax: METHOD= POST GET - Menentukan lokasi dari skrip yang akan memproses data dari form Syntax: ACTION= URL Menentukan nama form Syntax: NAME= nama Form

7 <FORM name="nama-form" method="post/get" action="url"> Atribut atribut pendukung </FORM> SERVER (PHP) querystring Pembacaan data Form RESPONS SE URL GET Pengiriman data Metode data HTTP header POST RESPONS SE FORM CLIENT (BROWSER)

8 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) - Bidirectional (dua arah)

9 Unidirectional (Satu Arah) Form Form ( form.html ) Action=verifikasi verifikasi.php submit File Verifikasi verifikasi.php p (File : Server Site Scripting ) <? ?>

10 Bidirectional (Dua Arah) Form Form ( form.php ) Action=form.php submit

11 Berikut akan dijelaskan beberapa elemen- elemen tag data FORM : - INPUT - TEXTAREA

12 TAG INPUT Berikut ini adalah attribut dari tag INPUT Atribut Keterangan NAME Mendefinisikan nama dari objek input. Atribut ini harus dituliskan kecuali untuk tipe submit dan reset. TYPE Menentukan tipe input yang dibuat SIZE Menentukkan ukuran kotak teks MAXLENGTH Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks VALUE - Kotak Teks Menentukan teks yang tertulis. - Check Box atau Radion Menentukan nilai item yang dipilihilih - Submit dan Reset Menentukan teks yang tertulis pada tombol CHECKED Digunakan untuk check box dan radio, yang digunakan untuk menentukan pilihan yang terpilih secara default.

13 TAG INPUT Berikut ini adalah Tipe-tipe dari tag INPUT TIPE Keterangan Text Digunakan untuk membuat kotak teks Password Digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *,, dll. Checkbox Digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu Radio Digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja Submit Digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar bisa diolah Reset Digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah terisi.

14 TAG INPUT Teknik Penggunaan Tag INPUT TEXT Penulisan skrip dalam penggunan tipe TEXT adalah: <input type="text" name="textbox" value="" size="20" maxlength="20"> PASSWORD Penulisan skrip dalam penggunan tipe PASSWORD adalah: <input type="password" name="textboxpasswd" value="" size="20" maxlength="20">

15 TAG INPUT Teknik Penggunaan Tag INPUT CHECKBOX Penulisan skrip dalam penggunan tipe CHECKBOX adalah: <p> Pilih yang sesuai : <br> <input type="checkbox" name="checkbox1" value="checkbox"> Menikah <br> <input type="checkbox" name="checkbox2" value="checkbox"> Pelajar <br> <input type="checkbox" name="checkbox3" value="checkbox"> Bekerja </p>

16 TAG INPUT Teknik Penggunaan Tag INPUT RADIO Penulisan skrip dalam penggunan tipe RADIO adalah: <p>jenis Kelamin :<br> <input type="radio" name="radiobutton" value="rad1">laki Laki <br> <input type="radio" name="radiobutton" value="rad2">perempuan </p>

17 TAG INPUT Teknik Penggunaan Tag INPUT SUBMIT Penulisan skrip dalam penggunan tipe SUBMIT adalah : <input type="submit" name="submit" value="submit > RESET Penulisan skrip dalam penggunan tipe RESET adalah: <input type="reset" name="reset" value="reset"> Button Penulisan skrip dalam penggunan tipe RESET adalah: <input type="button" name="button" value="button" >

18 T il d i li ki HTML k d l k l k T Tampilan dari penulisan skrip HTML yang masuk dalam kelompok Tag INPUT, adalah :

19 TAG INPUT Teknik Penggunaan Tag INPUT FILE Penulisan skrip dalam penggunan tipe FILE adalah : <input type="file" name="upload"/> <html> <head> <title>tampilan INPUT TIPE FILE</title> </head> <body> Upload FOTO:<br> <input type="file" name="upload"> </body> </html>

20 TAG TEXTAREA Berikut ini adalah attribut dari tag TEXTAREA Atribut NAME ROWS COLS Keterangan Memberikan nama objek textarea Menentukan jumlah baris textarea Menentukan lebar textarea <textarea name= nama" cols= nilai lebar" rows= nilai baris >

21 <html> <head> <title>penggunaan TextArea</title> </head> <body> <form> <textarea name="textarea" cols="43" rows="7"> Saya menulis teks ini di dalam textarea - ukuran lebar textarea ini 43 - jumlah baris 7 </textarea> </form> </body> </html>

22 TAG SELECT Berikut ini adalah attribut dari tag SELECT Atribut Keterangan NAME Memberikan nama pada objek select SIZE Penentuan ukuran tersebut akan mempengaruhi tampilan pada browser. Jika atribut ini tidak disertakan atau diberi nilai 1, maka pilihan akan ditampilkanilk sebagai drop-down d list. Jika diberi nilai 2 atau lebih, maka pilihan akan ditampilkan sebagai scroll box. MULTIPLE Mengizinkan i untuk tkmemilih lbihd lebih dari satu

23 <form> <p> <select name="select" size="1"> <option>teknik Informatika</option> <option>manajeman Informatika</option> <option>teknik Komputer</option> <option>sistem Informasi</option> </select> </p> </form> <form> <p> <select name="select2" size="3" multiple= multiple > <option>teknik Informatika</option> <option>manajeman Informatika</option> <option>teknik Komputer</option> <option>sistem Informasi</option> </select> </p> </form>

dokumen-dokumen yang mirip

[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]

[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ] Modul FORM DAN FRAME 1. TEORI DASAR FORM Form identik dengan formulir. Form sangat dibutuhkan pada saat