Aplikasi Form Menggunakan HTML

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 email, 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 elements like input, textarea etc.

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



Password input controls: Single-line text input yang me-“mask” inputan karakter dari pengguna.



Multi-line text input controls: Digunakan ketika pengguna diharuskan untuk memberikan rincian yang mungkin lebih banyak. Multi-line text input controls dibuat dengan elemen .<br /> <br /> Single-line Text Input Controls : Single-line text yang dibuat menggunakan elemen <input> yang atributnya memiliki nilai teks. Berikut sintaksnya : <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form><br /> <br /> Dan berikut hasilnya :<br /> <br /> List atribut untuk <input> tag : <br /> <br /> Type: Menunjukkan jenis kontrol input yang ingin kita buat. Elemen ini juga digunakan untuk membuat bentuk kontrol lain seperti radio button dan checkbox.<br /> <br /> <br /> <br /> 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<br /> <br /> <br /> <br /> Value: Menyediakan nilai awal untuk kontrol input teks yang akan dilihat pertama kali oleh pengguna ketika form pertama kali di “load”.<br /> <br /> <br /> <br /> Size: Menentukan lebar tex-input<br /> <br /> <br /> <br /> Maxlength: Menentukan karakter maksimal yang boleh di-inputkan<br /> <br /> Password Input Controls :<br /> <br /> Ini juga merupakan bentuk single-line kontrol input teks yang dibuat menggunakan elemen <input> yang atributnya memiliki nilai password. Berikut sintaksnya : <form> . Password: <input type="password" name="pwd"> </form><br /> <br /> Berikut hasilnya :<br /> <br /> 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>. Berikut sintaksnya : <textarea rows="10" cols="30"> Kesel.

Berikut hasilnya :

Atribut untuk tag :<br /> <br /> <br /> <br /> Name: Nama kontrol. Memberikan nama / nilai yang nantinya dikirimkan ke server.<br /> <br /> <br /> <br /> Rows: Menunjukkan jumlah baris kotak area teks.<br /> <br /> <br /> <br /> Cols: Menunjukkan jumlah kolom kotak area teks.box.<br /> <br /> 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 : <br /> <br /> Submit: Membuat sebuah tombol yang secara otomatis meng-“submit” form.<br /> <br /> <br /> <br /> Reset: Membuat sebuah tombol yang secara otomatis me-reset kontrol kembali ke nilainilai awal.<br /> <br /> <br /> <br /> Button: Membuat sebuah tombol yang digunakan untuk memicu script sisi klien ketika pengguna mengklik tombol itu.<br /> <br /> Berikut sintaksnya : <form action="http://www.contoh.com/test.php" method="get"> <input type="submit" name="Submit" value="Submit" /> <br /><br /> <input type="reset" value="Reset" /> <input type="button" value="Button" /> </form><br /> <br /> Berikut hasilnya :<br /> <br /> Kita juga bisa menggunakan “image” di fungsikan sebagai button ,berikut sintaksnya : <form action="http://www.contoh.com/test.php" method="get"> <input type="image" name="imagebutton" src="8.jpg" width="100" height="100" /> </form><br /> <br /> Checkboxes Control : Checkbox digunakan ketika lebih dari satu opsi diperlukan untuk dipilih. dibuat menggunakan tag <input> Berikut sintaksnya : <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form><br /> <br /> Berikut hasilnya :<br /> <br /> Ini adalah beberapa atribut penting checkbox yang harus di ingat : <br /> <br /> Type: Menunjukkan bahwa kita ingin membuat sebuah checkbox.<br /> <br /> <br /> <br /> Name: Nama kontrol.<br /> <br /> <br /> <br /> 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.<br /> <br /> <br /> <br /> Checked: Menunjukkan ketika halaman “load” ,checkbox sudah tercentang.<br /> <br /> Radio Box Control : Radio button digunakan ketika hanya satu opsi diperlukan untuk dipilih.Dibuat menggunakan tag <input>. Berikut sintaksnya : <form> <input type="radio" name="jk" value="L">Laki - laki<br> <input type="radio" name="jk" value="P">Perempuan </form><br /> <br /> Berikut hasilnya :<br /> <br /> Ini adalah beberapa atribut penting radio button yang harus di ingat : <br /> <br /> Type : Menunjukkan bahwa kita ingin membuat sebuah radio button<br /> <br /> <br /> <br /> Name : Nama kontrol.<br /> <br /> <br /> <br /> Value : Digunakan untuk menunjukkan nilai yang akan dikirim ke server jika opsi ini dipilih.<br /> <br /> <br /> <br /> Checked: Menunjukkan bahwa opsi ini harus dipilih secara default saat halaman di “load”<br /> <br /> Select Box Control : Digunakan ketika kita memiliki banyak pilihan yang tersedia untuk dipilih tetapi hanya satu atau dua akan dipilih. Berikut sintaksnya : 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> </form><br /> <br /> Berikut hasilnya :<br /> <br /> 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> </form><br /> <br /> Berikut hasilnya :<br /> <br /> 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> Berikut sintaksnya : <form action="tes.php" method="get" name="fileupload" enctype="multipart/form-data"> <input type="file" name="fileupload" accept="image/*" /> </form><br /> <br /> Berikut hasilnya :<br /> <br /> 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.<br /> <br /> Contoh – Contoh Form Menggunakan HTML : 1. Form dengan text field dan submit button Berikut sintaksnya :<br /> <br /> <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"> </form> <p>Jika kita mengklik “Submit” data dari form akan terkirim ke halaman yang bernama “tes.php”.</p> </body> </html><br /> <br /> Berikut hasilnya :<br /> <br /> 2. Form dengan radio button Berikut sintaksnya :<br /> <br /> <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"> </form> <p>Jika kita mengklik “Submit” data dari form akan terkirim ke halaman yang bernama “tes.php”.</p> </body> </html><br /> <br /> Berikut hasilnya :<br /> <br /> 3. Form Lengkap (textfield,password,radio button,checkbox,text area,submit,reset) Berikut sintaksnya : <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">

Berikut hasilnya :