Monday 26 September 2011

Membuat Form di HTML

| Monday 26 September 2011 | 0 comments


Form
Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif , karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.



Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.
Perintah  untuk membuat form yaitu :

<FORM [METHOD=”POST/GET” ACTION=”URL”>
   <INPUT>
   <INPUT>
</FORM>

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selankjutnya.


Elemen-elemen pada Form 
Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form :
Elemen
Atribut
fungsi
INPUT
Top of Form
Bottom of Form

TYPE
Bentuk masukan. Diisi dengan TEXT atau PASSWORD
NAME
Nama komponen input
VALUE
Isi/nilai dari komponen input
SIZE
Panjang komponen input
MAXLENGTH
Batasan panjang penulisan isi input
INPUT
Top of Form
Bottom of Form
TYPE
Bentuk masukan RADIO
NAME
Nama komponen input radio
VALUE
Pemberian nilai pada radio
CHEKED
Memilih salah satu radio
INPUT
Top of Form
Bottom of Form
TYPE
Bentuk masukan CHECKBOX
NAME
Nama komponen input checkbox
VALUE
Pemberian nilai pada checkbox
CHEKED
Memilih checkbox
SELECT
Top of Form
Bottom of Form

NAME
Nama komponen select /pull down list
OPTION
Pilihan dalam list
VALUE
Isi pada list
SELECTED
Option yang dipilih
SIZE
Ukuran list
TEXTAREA
Top of Form
Bottom of Form

TYPE
Bentuk komponen TEXTAREA
NAME
Nama komponen textarea
ROWS
Jumlah baris pada textarea
COLS
Jumlah kolom pada textarea
INPUT
TYPE
Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET
VALUE
Judul pada tombol

Contoh pembuatan form

<HTML>
<HEAD>
<TITLE>Contoh Membuat Form</TITLE></HEAD>
<BODY>
<H1 ALIGN="CENTER">FORM PENDAFTARAN ONLINE</H1>
<HR size=3 color="black">
<FORM METHOD="POST" ACTION="contohform.htm">
   <TABLE>
      <TR>
         <TD><B>Nama :</B></TD>
         <TD><INPUT TYPE="Text" NAME="varNama"  SIZE="15"></TD>
      </TR>
      <TR>
        <TD><B>Alamat :</B></TD>
        <TD><INPUT TYPE="Text" NAME="varAlamat" SIZE="30"></TD>
     </TR>
     <TR>
        <TD><B>Agama :</B></TD>
        <TD><SELECT NAME="agama" SIZE="1">
              <OPTION>Islam</OPTION>
              <OPTION>Kristen</OPTION>
              <OPTION>Budha</OPTION>
              <OPTION>Hindu</OPTION>
             </SELECT> </TD>
     </TR>
     <TR>
      <TD><B>Password :</B></TD>
      <TD><INPUT TYPE="Password" NAME="varPassword" SIZE="10"></TD>
     </TR>
  </TABLE>
<B>Jenis kelamin: </B><INPUT CHECKED TYPE="Radio" NAME="Kelamin" VALUE="Pria">Pria
<INPUT TYPE="Radio" NAME="Kelamin" VALUE="Wanita">Wanita
<BR>
<B>Hobi:</B><BR>
<INPUT TYPE="Checkbox" NAME="Kelamin" VALUE="Soccer">Sepakbola
<INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Badminton">Bulutangkis
<INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Computer">Komputer <BR>
<INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Game">Permainan video
<INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Internet">Internet
<BR>
<B>Komentar</B><BR>
<TEXTAREA Cols="30" Rows="5" Name="komentar"></TEXTAREA><BR>
<INPUT TYPE="Submit" VALUE="Send info"> <INPUT TYPE="Reset" VALUE="Clear form">
</FORM>
</BODY>
</HTML>

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

turorial terbaru

Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com