Cara membuat form dengan HTML

Cara membuat form dengan HTMLMembuat form dalam HTML sangatlah mudah apalagi sekarang bisa dibantu dengan fasilitas WYSIWYG (what you see it's what you get)  atau editor visual yang langsung terlihat hasilnya. Tapi tidak ada salahnya anda mengetahui kode sebenarnya untuk membuat form yang disisipkan dalam barisan kode html dalam sebuah halaman yang mungkin bisa ratusan bahkan ribuan.

Apa kata dunia jika seandainya anda bisa membuat desain halaman web tapi tidak tahu kodenya...
Apa jawaban anda jika anda disuruh atasan membuat form html di komputer yang gak ada editor htmlnya...maaf pak saya lupa bawa softwarenya...hehehhe

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 <form> dan diakhiri dengan </form>
Anda perhatikan kode diatas, perintah <form> 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.

Anda bisa lihat dan download contoh form lengkap dengan cssnya di https://wufoo.com/

 

Selamat mencoba dan berkreasi

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Mengatur urutan pengisian form
    Sebagian orang mengabaikan urutan pengisian form karena proses input data masih bisa dibantu dengan adanya mouse, sehingga bisa dengan leluasa berpindah dari isian satu ke lainya. Tapi kita bisa Mengatur urutan pengisian form dengan atribut tabindex
  • Contoh penggunaan HTML5
    Pada tulisan sebelumnya, saya sudah mengenalkan sedikit tentang HTML5 yang meluputi fitur-fitur terbaru serta unggulan yang sudah disediakan dan bisa digunakan asalkan browsernya sudah mendukung. Berikut ini saya akan membuatkan beberapa contoh tag cara penulisan dan penggunaan HTML5.
  • Cara memasukkan gambar dalam halaman web
    Panduan cara memasukkan gambar dalam halaman web/blog dengan kode html, lengkap dengan tips optimalisasinya. Untuk memasukkan gambar dalam web sekarang memang sudah dimudahkan dengan bantuan editor visual yang langsung membuat kode otomatis HTML secara instan, tapi tidak ada salahnya anda mengetahui cara teknis menyisipkanya.
  • Perbedaan form method POST dan GET
    Bagi anda yang sudah terbiasa membuat form dalam HTML pasti sudah sering melihat kode yang tersusun dalam sebuah form, termasuk atribut form yang digunakan. Salah satu atribut yang digunakan dalam form adalah method. Atribut method bisa diberi nilai dengan POST atau GET.
  • Pengertian istilah TAG, ATRIBUT dan VALUE dalam HTML
    Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.

Kiriman terbaru