Monday, April 15, 2013

Cara membuat form dengan HTML

Contoh kasus form untuk keperluan membuat fasilitas buku tamu. Lihat kode html berikut :
<form action="simpan.php" method="post" name="FBukuTamu" id="FBukuTamu">
  <p>Nama :
    <input name="nama" type="text" id="nama" size="30" maxlength="30">
    <br>
    Email :
    <input name="email" type="text" id="email" size="40" maxlength="100">
    <br>
    Website :
    <input name="website" type="text" id="website" size="40" maxlength="100">
    <br>
    Pesan :
    <textarea name="pesan" cols="40" rows="3" id="pesan"></textarea>
  </p>
  <p>
    <input type="submit" name="btnKirim" id="btnKirim" value="Kirim">
    <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi">
</p>
</form>
Sebuah form ditandai dengan perintah awal
dan diakhiri dengan

Anda perhatikan kode diatas, perintah
memiliki beberapa atribut yaitu :

  1. action digunakan untuk menentukan tujuan form dikirim dan diproses
  2. method digunakan untuk menentukan cara pengiriman data bisa post atau get
  3. name dan id digunakan sebagai identitas unik form dalam sebuah halaman
diantara perintah form disisipkan elemen input yang berfungsi sebagai objek visual untuk menerima masukan dari pengguna. Elemen form yang umum digunakan terdiri dari :
  1. <input>
    1. type="text" --> untuk input text satu baris
    2. type="submit" --> untuk membuat tombol kirim
    3. type="reset" --> untuk membuat tombol reset/mengulangi
    4. type="button" --> tombol tanpa fungsi biasanya dipakai dengan bantuan javascript misal untuk tombol close, print dll
    5. type="checkbox" --> untuk checklist banyak pilihan
    6. type="radio" --> untuk satu pilihan dari beberapa pilihan
    7. type="file" --> untuk upload file
    8. type="hidden" --> untuk nilai tersembunyi, biasanya nilainya sudah diset otomatis
    9. type="password" --> bentuk password karakter "*"
  2. <textarea> --> digunakan untuk masukan dengan banyak baris misal untuk pesan seperti contoh diatas
  3. <select> --> digunakan untuk menandai awal dari bentuk list pilihan atau sering disebut pilihan dropdown
  4. <option> --> elemen pilihan dropdown
Jadi form yang tersedia rasanya sudah cukup lengkap untuk semua keperluan jika kita mau bikin aplikasi web ataupun hanya sekedar fasilitas dihalaman web. Tinggal tampilan saja yang perlu kita buat sebagus mungkin agar menarik.


No comments:

Post a Comment

Kebahagiaan sejati bukanlah pada saat kita berhasil meraih apa yg kita perjuangkan, melainkan bagaimana kesuksesan kita itu memberi arti atau membahagiakan orang lain.