VISITOR

18 April 2013

Cara Membuat Form Input (Kotak Isian) Dengan Menggunakan HTML



Form digunakan untuk mengirimkan data ke sebuah server. Form dapat berisikan elemen input seperti, text filed, checkbox, radio-button, submit button, dan sebagainya. Selain itu Form juga dapat berisikan daftar pilihan seperti, Text area, field set, legend, dan elemen label. Tag yang digunakan untuk membuat Form pada HTML adalah tag<form>....</form>
Bagian terpenting dari elemen form adalah elemen input, elemen input digunakan sebagai pilihan informasi yang akan digunakan oleh pengunjung/pengguna. Elemen input dapat dibuat dengan berbagai cara tergantung pada tipe atribut yang dipakainya. Jenis-jenis input  yang banyak digunakan adalah :


Text Field
<input type = "text"/> untuk menentukan form input/kotak isian yang dapat digunakan untuk memasukan teks. Perhatikan  contoh dibawah ini :
<form>Nama Depan : <input type ="text" name ="firstname"/><br/>
Nama Belakang : <input type ="text" name ="lastname"/></form>

Tampilan untuk  contoh diatas :

Nama Depan      :
Nama Belakang :

Catatan : lebar kotak secara default adalah 20 karakter.

Password Field
<input type = "password"/> untuk menentukan form input/kotak isian untuk password. Perhatikan contoh dibawah ini :
<form>Password : <input type = "password" name = "pwd"/></form>

Tampilan untuk contoh diatas :

Password  :
Catatan : karakter dalam input password akan disembunyikan (ditampilkan dalam tanda bintang atau lingkaran hitam kecil).

Radio-Button
<input type = "radio"/> untuk menentukan tombol radio pada form. Tombol radio berguna ketika kita akan memberikan pilihan untuk pengunjung dalam menentukan pilihan dari jumlah pilihan yang telah kita sediakan. Perhatikan contoh dibawah ini :
<form>
<input type = "radio" name = "sex" value = "male"/>Laki-laki<br/>
<input type = "radio" name = "sex" value = "female"/>Perempuan</form>

Tampilan untuk contoh diatas :

Laki-laki
Perempuan
CheckBox
<input type = "checkbox"/> untuk menentukan checkbox (kotak centang), checkbox dapat digunakan sebagai pilihan bagi pengguna/pengunjung yang mempunyai lebih dari satu pilihan dari jumlah pilihan yang disediakan. Perhatikan contoh dibawah ini :
<form>
<input type  = "checkbox" name = "color" value = " biru"/>Saya suka warna biru<br/>
<intput type = "checkbox" name = "color" value = "red"/>Saya suka warna merah<br/>
<input type = "checkbox" name = "color" value = "black"/>Saya suka warna hitam</form>

Maka tampilan untuk contoh diatas : 

Saya suka warna biru
Saya suka warna merah
Saya suka warna hitam

Submit Button
<input type = "submit"/>  untuk menentukan tombol submit. Tombol submit digunakan untuk mengirimkan data form ke server. Data dikirimkan ke halaman yang telah ditentukan oleh atribut action pada form. File diterjemahkan pada atribut action dengan cara menerima sebuah input. Perhatikan contoh dibawah ini :
<form name = "input" action= "html_form_action.asp" method = "get">Username :
<input type = "text" name = "user"/><input type = "submit" value = "submit"/></form>
Maka tampilan untuk contoh diatas :

Username :
Catatan : jika sobat mengetik beberapa karakter pada kotak input diatas, lalu mengklik submit maka browser akan mengirimkan input yang sobat masukan ke halaman yang disebut "html_form_action.asp". Halaman ini yang akan menampilkan input yang diterima.

Sekian postingan saya untuk kali ini!!!! enjoyyyyyy

32 komentar:

  1. mantap nih boss, jadi pengen utak-atik HTML lagi nih. Terimakasih sudah berbagi boss.

    BalasHapus
  2. sama2 sob. trims knjungannya

    BalasHapus
  3. bagaimana cara membuat link untuk button submit hantar ke yahoo.mail

    **rakan dari malaysia

    BalasHapus
  4. Terima kasih untuk pertanyaan dari sobat ghost. silahkan sobat visit ke
    http://beyblogdesign.blogspot.com/2013/06/cara-membuat-tombol-submit-terhubung.html.

    BalasHapus
  5. ka, cara agar kotak nya dibawah gimana ya? bukan kesamping -___

    BalasHapus
  6. Ketemu juga yang dicari, terima kasih atas share postingannya sob. atmosfir.heck.in

    BalasHapus
  7. Anonim9:09 PM

    mantab makasih salam super

    BalasHapus
  8. ka, cara agar data yang diinput output ke iframe bisa ga?

    BalasHapus
  9. Terima kasih info nya..
    Sangat bermanfaat.

    BalasHapus
  10. Makasih banyak infonya sob,saya baru mau coba ni,maklum new blogger.hehe
    Salam sukses.

    BalasHapus
  11. gan,,,kapan2 share dong cara menampilkan input tersebut..:D
    terima kasih

    BalasHapus
  12. Mantap boos
    mampir ya energipesisir.blogspot.com

    BalasHapus
  13. Mantap boos
    mampir ya energipesisir.blogspot.com

    BalasHapus
  14. thax om.., Kebetulan lagi belajar HTML dan PHP

    BalasHapus
  15. berarti bisa dijadikan sebagai order atau pesanan ??
    contoh: order unit
    ntar kontrolnya masuk email berarti ??

    BalasHapus
  16. boleh tapi kalo bisa tutor pastinya

    BalasHapus
  17. Sippppp, thanks Gan. Langsung action.....

    BalasHapus
  18. mantap inponya sangat bermanpaat sekali

    BalasHapus
  19. cara agar submit ke email kita gimana ? dan ko mlah blog yang anda cari tidak ada

    BalasHapus
  20. cara agar submit ke email kita gimana ? dan ko mlah blog yang anda cari tidak ada

    BalasHapus
  21. Anonim3:57 AM

    Bagaimana caranya setelah data diisi (misal: Nama, telpon) ketika diklik submit langsung terkirim ke email gmail data itu?? Trims

    BalasHapus
  22. terimakasih atas artikel yang sudah di share dari dulu saya belum pasang yang 1 ini


    jangan lupa visit www.tutorialkeren.com

    BalasHapus
  23. Setelah halaman submit dibuat, bagaimana pula cara menghubungkan dg halaman yg akan menampilkan hasil submit tsb. Terimakasih

    BalasHapus
  24. Bisa langsung Konek ke sms atau whatsapp ga om?

    BalasHapus
  25. Bagaimana cara agar bisa di hubungkan dengan sms?

    BalasHapus
  26. Bisa langsung konek ke email...?jadi jika ada yang infut data..lngsung masuk ke email

    BalasHapus

Beri komentar Sobat untuk memperbaiki kekurangan dan kesalahan pada Blog ini dengan bahasa dan etika yang benar!!!! terima kasih