Aplikasi Form Menggunakan HTML

Transkripsi

1 Aplikasi Form Menggunakan HTML Pendahuluan Pembahasan Definisi Form HTML Form diperlukan bila Anda ingin mengumpulkan beberapa data dari pengunjung situs untuk di kirim ke server. Misalnya informasi pendaftaran: nama, alamat , kartu kredit, dll Form akan mengambil masukan dari pengunjung situs dan kemudia akan disampaikan ke aplikasi back-end seperti CGI, ASP Script atau script PHP dll. Kemudian aplikasi back-end kita akan melakukan pengolahan diperlukan pada data dengan cara yang sudah kita sesuaikan. Input elements form antara lain adalah text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, dan label elements yang ke semuanay di gunakan untuk mengambil informasidari pengguna (pengunjung situs) Penggunaan Form Sintaks Awal Sintaks singkat awal dalam penggunaan form, adalah sebagai berikut : <form action="back-end script" method="posting method"> form elements like input, textarea etc.

2 Atribut atibut yang sering di pakaidalam penggunaan form, antara lain : Name : Nama untuk form yang akan buat Action : Berisi URL script yang dimana nantinya akan mengolah data yang telah diupload oleh fomrm Method : Dimana kita menentukan method apa yang nantinya akan digunakan untuk meng-upload data. Kebanyakan yang sering di pakai adalah GET dan POST Perbedaan GET dan POST : Pada dasarnya, metode POST dan GET memiliki kegunaan yang sama yaitu untuk mengirimkan value variabel ke halaman lain atau mengirimkan ke database. Pengiriman data itu biasanya dengan menggunakan form. Perbedaan kedua method tersebut sangat kecil namun sangat terlihat dengan jelas. Method GET ketika mengirimkan data akan menambahkan pada URI, sedangkan kalo method POST dikirim ke server dengan diincludekan pada sebuah permintaan (body of request) dan bukan melalui URI dan hasil dari method POST ini nggak bersifat cacheable (dapat disimpan dalam cache) Target : Ini menentukan target halaman di mana hasil dari script akan ditampilkan. Dibutuhkan values seperti _blank, _self, _parent dll Enctype : Kita dapat menggunakan atribut enctype untuk menentukan bagaimana browser mengkodekan data sebelum mengirimkannya ke server. Kemungkinan values nya seperti : Application/x-www-form-urlencoded : Metode standar yang paling sering digunakan. Mengkonversi spasi ke tanda plus dan karakter non - alfanumerik ke dalam kode heksadesimal untuk karakter tersebut dalam teks ASCII. Mutlipart/form-data : Memungkinkan data yang akan dikirim dalam bagian(parts), dengan setiap bagian berurutan sesuai dengan form control, dalam urutan mereka muncul dalam form. Setiap bagian dapat memiliki opsional konten - type header sendiri menunjukkan indikasi tipe data yang di gunakan di form control. Text Input Controls Single-line text input controls: Digunakan untuk item yang membutuhkan hanya satu baris input pengguna, seperti kotak pencarian atau nama. Dibuat dengan menggunakan elemen <input>.. Password input controls: Single-line text input yang me- mask inputan karakter dari pengguna.

3 Multi-line text input controls: Digunakan ketika pengguna diharuskan untuk memberikan rincian yang mungkin lebih banyak. Multi-line text input controls dibuat dengan elemen <textarea>. Single-line Text Input Controls : Single-line text yang dibuat menggunakan elemen <input> yang atributnya memiliki nilai teks. <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> Dan berikut hasilnya : List atribut untuk <input> tag : Type: Menunjukkan jenis kontrol input yang ingin kita buat. Elemen ini juga digunakan untuk membuat bentuk kontrol lain seperti radio button dan checkbox. Name: Digunakan untuk memberikan nama bagian dari nama / nilai pasangan yang dikirim ke server, yang mewakili masing-masing control form dan nilai yang di masukan oleh pengguna Value: Menyediakan nilai awal untuk kontrol input teks yang akan dilihat pertama kali oleh pengguna ketika form pertama kali di load. Size: Menentukan lebar tex-input Maxlength: Menentukan karakter maksimal yang boleh di-inputkan Password Input Controls :

4 Ini juga merupakan bentuk single-line kontrol input teks yang dibuat menggunakan elemen <input> yang atributnya memiliki nilai password.. <form> Password: <input type="password" name="pwd"> Berikut hasilnya : Multiple-Line Text Input Controls : Jika kita ingin memperbolehkan pengunjung ke situs kita untuk memasukkan lebih dari satu baris teks, kita harus membuat kontrol input teks multi-line menggunakan elemen <textarea>. <textarea rows="10" cols="30"> Kesel. </textarea> Berikut hasilnya : Atribut untuk <textarea> tag :

5 Name: Nama kontrol. Memberikan nama / nilai yang nantinya dikirimkan ke server. Rows: Menunjukkan jumlah baris kotak area teks. Cols: Menunjukkan jumlah kolom kotak area teks.box.

6 Creating Button : Ada berbagai cara dalam HTML untuk membuat tombol klik. Anda dapat membuat tombol klik menggunakan tag <input>. Bila kita menggunakan elemen <input> untuk membuat sebuah tombol, jenis tombol yang Anda buat ditentukan menggunakan jenis atribut. Jenis atribut dapat mengambil nilai-nilai berikut : Submit: Membuat sebuah tombol yang secara otomatis meng- submit form. Reset: Membuat sebuah tombol yang secara otomatis me-reset kontrol kembali ke nilainilai awal. Button: Membuat sebuah tombol yang digunakan untuk memicu script sisi klien ketika pengguna mengklik tombol itu. <form action=" method="get"> <input type="submit" name="submit" value="submit" /> <br /><br /> <input type="reset" value="reset" /> <input type="button" value="button" /> Berikut hasilnya : Kita juga bisa menggunakan image di fungsikan sebagai button,berikut sintaksnya : <form action=" method="get"> <input type="image" name="imagebutton" src="8.jpg" width="100" height="100" />

7

8 Checkboxes Control : Checkbox digunakan ketika lebih dari satu opsi diperlukan untuk dipilih. dibuat menggunakan tag <input> <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car Berikut hasilnya : Ini adalah beberapa atribut penting checkbox yang harus di ingat : Type: Menunjukkan bahwa kita ingin membuat sebuah checkbox. Name: Nama kontrol. Value: Nilai yang akan digunakan jika checkbox dipilih. Lebih dari checkbox harus berbagi nama yang sama hanya jika kita ingin mengizinkan pengguna untuk memilih beberapa item dari daftar yang sama. Checked: Menunjukkan ketika halaman load,checkbox sudah tercentang. Radio Box Control : Radio button digunakan ketika hanya satu opsi diperlukan untuk dipilih.dibuat menggunakan tag <input>. <form> <input type="radio" name="jk" value="l">laki - laki<br> <input type="radio" name="jk" value="p">perempuan

9

10 Berikut hasilnya : Ini adalah beberapa atribut penting radio button yang harus di ingat : Type : Menunjukkan bahwa kita ingin membuat sebuah radio button Name : Nama kontrol. Value : Digunakan untuk menunjukkan nilai yang akan dikirim ke server jika opsi ini dipilih. Checked: Menunjukkan bahwa opsi ini harus dipilih secara default saat halaman di load Select Box Control : Digunakan ketika kita memiliki banyak pilihan yang tersedia untuk dipilih tetapi hanya satu atau dua akan dipilih. 1. Drop-down list with a pre-selected value <form> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected>fiat</option> <option value="audi">audi</option> </select> Berikut hasilnya :

11 2. Simple drop-down list <form> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> Berikut hasilnya : File Select Boxes : Jika kita ingin mengizinkan user untuk mengupload file ke situs web kita dari komputer user, kita perlu menggunakan file selec boxes, juga dikenal sebagai kotak pilih berkas. Dibuat dengan menggunakan elemen <input> <form action="tes.php" method="get" name="fileupload" enctype="multipart/form-data"> <input type="file" name="fileupload" accept="image/*" /> Berikut hasilnya :

12

13 Sintaks di atas hanya memperbolehkan user untuk upload data images files, menggunakan atribut Accept=, dan inputan yang berupa upload sebuah image file akan di kirim ke test.php, karena di atribut Action=, kita mengisikan dengan test.php. Seperti penjelasan saya di awal mengenai sintaks awal untuk sebuah form. Contoh Contoh Form Menggunakan HTML : 1. Form dengan text field dan submit button

14 <html> <body> <form name="input" action="tes.php" method="get"> First name: <input type="text" name="nama" value="joni"><br> Last name: <input type="text" name="alamat" value="blitar"><br> <input type="submit" value="submit"> <p>jika kita mengklik Submit data dari form akan terkirim ke halaman yang bernama tes.php.</p> </body> </html> Berikut hasilnya : 2. Form dengan radio button <html> <body> <form name="input" action="tes.php" method="get"> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car<br> <br><input type="submit" value="submit"> <p>jika kita mengklik Submit data dari form akan terkirim ke halaman yang bernama tes.php.</p> </body> </html>

15 Berikut hasilnya : 3. Form Lengkap (textfield,password,radio button,checkbox,text area,submit,reset) <html> <body><table width="678" height="466" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#cccccc"> <tr> <td width="341">nama Lengkap</td> <td width="317"><input type = "text" name = "nama" size="35" maxlength="25" title="isi dengan nama lengkap anda"/></td> </tr> <tr bgcolor="#0099cc"> <td>alamat</td> <td><input type = "text" name = "alamat" size="35" maxlenght="25" title="isi dengan alamat lengkap anda" /></td> </tr> <tr > <td>password</td> <td><input type="password" name="password" size="35" maxlength="30" title="isi dengan password yang anda inginkan" /></td> </tr> <tr bgcolor="#0099cc"> <td>retype Password</td> <td><input type="password" name="password" size="35" maxlength="30" title="isi dengan password yang sudah anda masukan sebelumnya"/></td> </tr> <tr > <td>jenis Kelamin</td> <td><input type = "Radio" name = "Jenis Kelamin" value="pria"> Pria <input type = "Radio" name = "Jenis Kelamin" value="wanita">wanita</td> </tr> <tr bgcolor="#0099cc"> <td>hobby</td> <td><input type="checkbox" name = "Hobby" value="membaca">membaca <input type = "checkbox" name = "Hobby" value="memancing">memancing</td> </tr> <tr > <td>tingkat Pendidikan</td> <td><select> <option value="sekolah Dasar" selected="selected">sekolah Dasar</option> <option value="sekolah Menengah Pertama">Sekolah Menengah Pertama/Sederajat</option> <option value="sekolah Menengah Atas">Sekolah Menengah Atas/Sederajat</option> <option value="s1">s1</option> <option value="s2">s2</option> <option value="s3">s3</option> </select> </td> </tr> <tr bgcolor="#0099cc"> <td valign="top">komentar</td> <td><textarea name="text1" cols="50" rows="10" wrap="soft" title="isi dengan komentar anda"></textarea></td> </tr> <tr align="center"> <td colspan="2"><input type="submit" name="kirim" value="kirim" onclick="" /> <input type="reset" name="reset" value="reset" onclick="" /></td></tr> </table> </body> </html>

16 Berikut hasilnya :