Membuat form pada web

Mod 2_Default Web Form PageDalam HTML kita sebelumnya pasti telah mengenal tag yang dimana tag itu adalah salah satu elemen HTML, sehingga sebuah script dapat dibaca oleh browser.

Salah satu tag yang akan kita pelajari adalah <form></form>, tag ini digunakan untuk membuat form/formulir seperti form login atau form pendaftaran peserta.

Contoh penggunaan pasangan tag ini sebagai berikut:

form HTML

Penjelasan singkat untuk beberapa attribut di atas,

  • Attribut action  menyatakan lokasi URL yang akan dituju setelah tombol submit ditekan.
  • Attibut method menentukan metode yang digunakan dalam mengirim form. Kebanyakan metode yang digunakan berupa “GET” atau “POST”.
  • Attibut id menyatakan ID dari form tersebut.
  • Attribut name menyatakan nama dari form.

 

Dari penjelasan singkat diatas kita telah mengetahui beberapa attibut dan fungsi dari attibut tersebut dari pasangan tag <form></form>.

Untuk dapat membuat isi dari form, kita membutuhkan pasangan tag lain yaitu <table></table>. Kegunaan dari pasangan tag ini sendiri adalah untuk mengatur posisi field sehingga tertata rapi, nanti anda akan paham maksud saya jika sudah mencoba sendiri dalam pembuatan form.

Selain pasangan tag <table></table>, anda akan membutuhkan tag <input> di dalam tabel. Tag <input> ini digunakan untuk membuat field dan button pada sebuah form, dalam tag <input> terdapat beberapa attibut yang sama dengan pasangan tag <form></form> yaitu id dan name. Sedangkan pada tag <input> sendiri ada attibut baru yang digunakan seperti berikut :

contoh_input1 contoh_input2

Gambar tag <input>

Penjelasan untuk attibut pada script diatas:

  • Attibut type menyatakan jenis inputan apa yang akan digunakan, terdapat beberapa pilihan pada attibut type.
    Misalkan saja anda ingin membuat form login tentu saja membutuhkan field nama dan password, maka gunakan pilihan “text” dan apabila ingin membuat berupa tombol anda dapat menggunakan “submit” atau “button”.
    Perbedaan dari “submit” dan “button” ada pada penggunaannya, “submit” digunakan untuk mengambil nilai(value) dari field di atasnya sedangkan “button” biasanya digunakan untuk membuat tombol yang melalukan link ke file lain.
  • Attibut value menyatakan nilai yang akan ditampilkan pada tombol, dengan kata lain ini digunakan untuk memunculkan nama pada tombol.

Sekarang terdapat sedikit percobaan yang mungkin dapat anda coba sendiri.

Buat sebuah form untuk mahasiswa dengan nama “latihan_form.php” , anda dapat mencoba membuatnya menggunakan Adobe Dreamweaver atau Notepad++.

Kali ini saya menggunakan Notepad++ karena lebih simple, tetapi jika ingin lebih cepat dalam pengetikan saya sarankan memakai Dreamweaver.

Untuk contoh script dapat dilihat seperti di bawah ini :

latihan_form1

Untuk dapat melihat hasilnya anda dapat menggunakan browser Mozilla Firefox, Google Chrome, Internet Explorer (IE), atau browser kesayangan yang sering anda gunakan,

untuk hasilnya sendiri seharusnya seperti ini :

latihan_form1_hasil

gambar hasil

Jika hasil anda tidak sesuai, kemungkinan ada yang salah ketika anda melakukan pengetikan atau penempatan script.

 

Kemudian setelah anda membuat form di atas, anda perlu kemudian membuat file baru untuk action pada form tersebut yaitu “view.php”. Dimana “view.php” ini digunakan untuk menampilkan hasil dari form latihan di atas.

Untuk script dari “view.php” kurang lebih seperti ini :

view

gambar view.php

Usahakan saat anda menempatkan file “latihan_form.php” dan “view.php” dalam satu folder / lokasi, selain memudahkan anda juga memudahkan dalam melakukan link lokasi <form>action=’?’</form>.

Setelah anda mengetikkan script di atas, seharusnya hasilnya akan seperti gambar di bawah ini :

view_hasil

Jika hasil yang anda hasilkan tidak sama, harap cek kembali script yang anda tulis.

Demikian cara membuat form pada web menggunakan pasangan tag <form></form>, mohon maaf apabila banyak kesalahan dalam penulisan maupun isi yang terlalu panjang. Semoga untuk ke depan bisa menulis yang lebih baik lagi.

Selamat Mencoba!!

Hasil cek Plagiarism-Detector

Plagiarism

One thought on “Membuat form pada web”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s