Thursday, September 25, 2014

Membuat Form Pada HTML

Form digunakan untuk mengirim data ke server. Form adalah sebuah media interaksi pengguna dengan website melalui beberapa model data masukan dan perintah. Contoh penggunaan sederhana dari form adalah saat kita akan login ke alamat email atau login ke facebook. Data-data yang dikirim oleh form biasanya diproses oleh script PHP dan atau Javascript.
Pada form terdapat beberapa elemen yang mempunyai fungsi berbeda-beda. Misalnya untuk memasukkan text kita memerlukan sebuah text box dan untuk menjalankan perintah kita memerlukan sebuah tombol submit atau enter. Setiap elemen form harus diletakkan diantara tag <form>...</form>. Jika tidak maka elemen-elemen tersebut tidak akan berfungsi sebagai form dan hanya berfungsi sebagai tampilan biasa.

Mengenal atribut NAME, ACTION dan METHOD pada FORM

  1. NAME, menunjukkan nama sebuah form. Ini berfungsi sebagai identifier/pengenal saat menangani proses setelah form dijalankan.
  2. ACTION, diisi dengan alamat URL tujuan saat form dieksekusi. Jika dikosongkan maka URL tujuan adalah file letak form itu sendiri.
  3. METHOD, merupakan metode eksekusi form saat tombol SUBMIT ditekan. Ada dua parameter baku untuk atribut METHOD, yaitu GET dan POST.
    • Metode GET mengirimkan data kepada server dengan cara meletakkan data pada bagian akhir url dari alamat yang ditunjuk oleh atribut ACTION. Selanjutnya pada URL tujuan data tersebut diambil dengan perintah $_GET.
    • Metode POST mengirimkan data secara terpisah dari URL dan harus diambil oleh URL tujuan melalui metode $_POST.

Mengenal beberapa elemen FORM

1. INPUT type TEXT

Untuk menggunakan input text digunakan tag <input /> dengan atribut type=text. Input ini menerima masukan berupa text pendek. Untuk menampilkan text awal pada input bisa diisikan pada atribut value.

Contoh penggunaan input type text:

 <input id="input-text1" name="masukan-text" type="text" value="text awal" />  

Berikut ini tampilan kode diatas pada browser:

Masukkan Teks:

2. INPUT type PASSWORD

Biasa digunakan untuk menerima masukan text yang sifatnya rahasia seperti password. Untuk menggunakan input password digunakan tag <input> dengan atribut type=password. Sekilas tampilan input password sama dengan input text, namun ketika diisikan text akan terlihat perbedaannya yaitu text yang kita masukkan akan ditampilkan berupa bintang atau bulat hitam.

Contoh penggunaan input type password:

 <input type=password id="input-pass1" name="password">  

Berikut ini tampilan kode diatas pada browser:

Masukkan Password:

3. INPUT type CHECKBOX

Untuk menggunakan input checkbox digunakan tag <input> dengan atribut type=checkbox. Ini merupakan input untuk menangani sebuah option yang harus dipilih oleh pengguna. Untuk memilih pengguna cukup mengklik checkbox. Saat di klik checkbox akan togle atau berubah dari dicheck dan tidak di check. Tampilan check pada checkbox dapat berupa tanda centang, tanda titik atau yang lain.
Untuk membuat checkbox dicheck atau tidak dicheck saat form diload ada atribut checked yang bisa diisi dengan nilai true atau false. Untuk membuat label input checkbox digunakan atribut value.

Contoh penggunaan input type checkbox:

 <input type="checkbox" id="input-check1" name="pilihan" value="dipilih">Silahkan Dipilih

Berikut ini tampilan kode diatas pada browser:

Silahkan Dipilih

4. INPUT type RADIO

Sekilas tampilan dari input RADIO mirip dengan input CHECKBOX. Ini karena input RADIO terdiri dari beberapa input CHECKBOX yang dikelompokkan dalam satu grup dan hanya bisa dipilh salah satu saja. Contoh mudah penggunaan input RADIO adalah saat memilih jenis kelamin pada form registrasi email. Untuk menggunakan input checkbox digunakan tag <input> dengan atribut type=radio.

Contoh penggunaan input type radio:

 <input type="radio" name="jenis-kelamin" value="Laki-laki">Laki-laki<br>  
 <input type="radio" name="jenis-kelamin" value="Perempuan">Perempuan  

Berikut ini tampilan kode diatas pada browser:

Laki-laki
Perempuan

5. INPUT type SUBMIT

Berfungsi mengirim data pada form ke server. Berbeda dari beberapa jenis input sebelumnya, Input SUBMIT akan menampilkan tombol. Jadi mirip dengan tag <button> namun button tidak merupakan bagian dari form. Saat ditekan, input submit akan melakukan action yang didefinisikan pada form dengan metode sesuai parameter METHOD yang dipilih.
Untuk menggunakan input checkbox digunakan tag <input> dengan atribut type=submit.

Contoh penggunaan input type radio dari w3schools.com :

 <form action="http://www.w3schools.com/html/demo_form_action.asp" method="get" name="input">  
 Username: <input name="user" type="text" />  
 <input type="submit" value="Submit" />  
 </form>  

Berikut ini tampilan kode diatas pada browser:

Username:

6. SELECT / COMBO BOX / DROPDOWN LIST

Berfungsi untuk memberikan pilihan bagi pengguna dalam memilih masukan yang telah disediakan. Dalam pemrograman desktop SELECT dikenal dengan istilah COMBO BOX. Untuk menggunakan SELECT digunakan tag <select>...</select>. Dan untuk membuat list dropdown-nya digunakan tag <option>...</option> diantara tag <select>...</select>.

Contoh penggunaan SELECT pada form :

 Penyanyi dangdut favorit anda :  
 <select>  
  <option value="evie">Evie Tamala</option>  
  <option value="rhoma">Rhoma Irama</option>  
  <option value="elvie">Elvie Sukaesih</option>  
  <option value="camelia">Camelia Malik</option>  
 </select>  

Berikut ini tampilan kode diatas pada browser:

Penyanyi dangdut favorit anda :

7. TEXTAREA

Merupakan alat untuk memasukkan teks yang relatif panjang misalnya sebuah komentar dalam blog. Dalam textarea bisa berisi banyak baris dan kolom. Banyaknya baris dan kolom dapat diatur melalui atribut. Selain itu ukuran textarea bisa juga diatur dengan atribut.

Contoh penggunaan TEXTAREA pada form :

 Komentar Saya:<br/>  
 <textarea rows="7" cols="70">  
 Saya sangat berterima kasih atas kunjungan anda ke blog ini. Semoga isi blog ini ada memberi manfaat bagi anda. Saya sangat mengharap respon ada berupa kritik dan saran untuk terus membangun dan mengembangkan blog ini.  
 Terima Kasih.  
 </textarea>  

Berikut ini tampilan kode diatas pada browser:

Komentar Saya:


Referensi :

2 komentar:

  1. mantasp sekali info yang di share
    semoga blogagan tambah maju

    ReplyDelete
  2. saya saya sangat suka dengan info nya gan
    terimakasih

    ReplyDelete