Aplikasi Form Menggunakan HTML

Pendahuluan

PembahasanDefinisi FormHTML Form diperlukan bila Anda ingin mengumpulkan beberapa data dari pengunjung situs untuk di kirim ke server. Misalnya informasi pendaftaran: nama, alamat email, kartu kredit, dllForm 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 FormSintaks AwalSintaks 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 POSTPerbedaan 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 .Single-line Text Input Controls :

Single-line text yang dibuat menggunakan elemen yang atributnya memiliki nilai teks.Berikut sintaksnya :First name:
Last name:

Dan berikut hasilnya :

List atribut untuk 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-inputkanPassword Input Controls :

Ini juga merupakan bentuk single-line kontrol input teks yang dibuat menggunakan elemen yang atributnya memiliki nilai password.Berikut sintaksnya :

Password:

.

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 .Berikut sintaksnya :

Kesel.

Berikut hasilnya :

Atribut untuk tag : 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.

Creating Button :

Ada berbagai cara dalam HTML untuk membuat tombol klik. Anda dapat membuat tombol klik menggunakan tag .Bila kita menggunakan elemen 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 nilai-nilai awal. Button: Membuat sebuah tombol yang digunakan untuk memicu script sisi klien ketika pengguna mengklik tombol itu.Berikut sintaksnya :

Berikut hasilnya :

Kita juga bisa menggunakan image di fungsikan sebagai button ,berikut sintaksnya :

Checkboxes Control :

Checkbox digunakan ketika lebih dari satu opsi diperlukan untuk dipilih. dibuat menggunakan tag Berikut sintaksnya :

I have a bike
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 .Berikut sintaksnya :Laki - laki
Perempuan

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

VolvoSaabFiatAudi

Berikut hasilnya :

2. Simple drop-down list

VolvoSaabFiatAudi

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 Berikut sintaksnya :

Berikut hasilnya :

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 buttonBerikut sintaksnya :

First name:
Last name:

Jika kita mengklik Submit data dari form akan terkirim ke halaman yang bernama tes.php.

Berikut hasilnya :

2. Form dengan radio button

Berikut sintaksnya :

I have a bike
I have a car

Jika kita mengklik Submit data dari form akan terkirim ke halaman yang bernama tes.php.

Berikut hasilnya :

3. Form Lengkap (textfield,password,radio button,checkbox,text area,submit,reset)Berikut sintaksnya :

Nama Lengkap

Alamat

Password

Retype Password

Jenis Kelamin PriaWanita

HobbyMembacaMemancing

Tingkat PendidikanSekolah DasarSekolah Menengah Pertama/SederajatSekolah Menengah Atas/SederajatS1S2S3

Komentar

Berikut hasilnya :