Cara membuat Form Pada Blog

Cara membuat Form Pada Blog - Terkadang kita membuatuhkan sebuah field atau kolom isian untuk mempermudah mengelompokkan data pada suatu request atau apapun itu . Untuk itu perlu kita memberikuan atau membuat fitur form yang nantinya mempermudah kita mengenali input data yang masuk ke server kita .

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/>
<input type = "checkbox" name = "color" value = "black"/>Saya suka warna hitam</form>

Maka tampilan untuk contoh diatas :

Saya suka warna biru
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 anda 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.


Untuk keterangan bagaimana data yang di input diterima silahkan lihat tutorialnya disini . Semoga tutorial Cara membuat Form Pada Blog ini bermanfaat dan dapat dimengerti dengan baik .

Referensi : http://beyblogdesign.blogspot.com/2013/04/cara-membuat-form-input-kotak-isian.html

Author : Ichi Hikaru

Share this Article

Related Posts