Cara membuat Form Input (Kotak isian) dengan HTML

Sembile Shared - 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.

Nah sekian posting dari Sembile Shared. sampai jumpa diposting berikutnya ya :)