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

10 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

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