SlideShare a Scribd company logo
Membuat Form
Elemen Form
• Untuk membuat form kita menggunakan elemen
  FORM 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
 ▫ Action sering diisi dengan URL tempat pemrosesan form
   selankjutnya.
Elemen-elemen pada Form (1)
Elemen-elemen pada Form (2)
Contoh
<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>
Contoh (lanjutan 1)
<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>
Contoh (lanjutan 2)
<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="Kirim"><INPUT TYPE="Reset" VALUE="Batal">
</FORM>
</BODY>
</HTML>
Hasil

More Related Content

Similar to 7.materi membuat form (ok)

form desaign web.pdf
form desaign web.pdfform desaign web.pdf
form desaign web.pdf
AdindaFirania
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
Dhan junkie
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
Dhan junkie
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
Dhan junkie
 
11 form
11 form11 form
11 form
Amiroh S.Kom
 
07 form
07 form07 form
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
Fajar Baskoro
 
Chapter-02 Pemrograman Dasar HTML & CSS.pptx
Chapter-02 Pemrograman Dasar HTML & CSS.pptxChapter-02 Pemrograman Dasar HTML & CSS.pptx
Chapter-02 Pemrograman Dasar HTML & CSS.pptx
AngKianITSMAKIBC
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Yusuf Baili
 
Modul 4.ppt
Modul 4.pptModul 4.ppt
Modul 4.ppt
JokerGRZ
 
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
LarasWiranti2
 
FORM.pptx
FORM.pptxFORM.pptx
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
As Faizin
 

Similar to 7.materi membuat form (ok) (14)

form desaign web.pdf
form desaign web.pdfform desaign web.pdf
form desaign web.pdf
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
 
11 form
11 form11 form
11 form
 
07 form
07 form07 form
07 form
 
Pertemuan ke 6
Pertemuan ke 6Pertemuan ke 6
Pertemuan ke 6
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Chapter-02 Pemrograman Dasar HTML & CSS.pptx
Chapter-02 Pemrograman Dasar HTML & CSS.pptxChapter-02 Pemrograman Dasar HTML & CSS.pptx
Chapter-02 Pemrograman Dasar HTML & CSS.pptx
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Modul 4.ppt
Modul 4.pptModul 4.ppt
Modul 4.ppt
 
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
Modul pemrograman berbasis_web.pdf;filename= utf-8''modul pemrograman berbasi...
 
FORM.pptx
FORM.pptxFORM.pptx
FORM.pptx
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 

Recently uploaded

STRATEGI PASAR dalam menjalankan bisnis pemasar
STRATEGI PASAR dalam menjalankan bisnis pemasarSTRATEGI PASAR dalam menjalankan bisnis pemasar
STRATEGI PASAR dalam menjalankan bisnis pemasar
rioeradeka
 
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdfACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
Azvan Enginering
 
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdfPREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
FORTRESS
 
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
unikbetslotbankmaybank
 
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptx
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptxIlmu PENGANTAR BISNIS creat riva dan teman teman.pptx
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptx
RamonaChasdiana
 
Proposal Bisnis Jasa Laundry Pakaian.ppt
Proposal Bisnis Jasa Laundry Pakaian.pptProposal Bisnis Jasa Laundry Pakaian.ppt
Proposal Bisnis Jasa Laundry Pakaian.ppt
muhamadrafiakbar
 
Metode Pengembangan Sistem Informasiiiii
Metode Pengembangan Sistem InformasiiiiiMetode Pengembangan Sistem Informasiiiii
Metode Pengembangan Sistem Informasiiiii
RioCesar
 
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
NicolasBayu
 
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
Habibatut Tijani
 
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptxProject Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
abiddah0606
 
Pertemuan 6 Materi Kecerdasan Intelektual.ppt
Pertemuan 6 Materi Kecerdasan Intelektual.pptPertemuan 6 Materi Kecerdasan Intelektual.ppt
Pertemuan 6 Materi Kecerdasan Intelektual.ppt
MardhatilaFitriSopal
 
2 Depresiasi & Pelepasan Aset Tetap.pptx
2 Depresiasi &  Pelepasan Aset Tetap.pptx2 Depresiasi &  Pelepasan Aset Tetap.pptx
2 Depresiasi & Pelepasan Aset Tetap.pptx
NicolasBayu
 

Recently uploaded (12)

STRATEGI PASAR dalam menjalankan bisnis pemasar
STRATEGI PASAR dalam menjalankan bisnis pemasarSTRATEGI PASAR dalam menjalankan bisnis pemasar
STRATEGI PASAR dalam menjalankan bisnis pemasar
 
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdfACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
ACCURATE ONLINE - MANUAL BOOK - CARA PENGGUNAAN.pdf
 
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdfPREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
PREMIUM!!! WA 0821 7001 0763 (FORTRESS) Pintu Dobel Minimalis di Denpasar.pdf
 
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
UNIKBET : Daftar Slot Pragmatic Play Yang Ada Deposit Sesama Bank DKI Promo B...
 
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptx
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptxIlmu PENGANTAR BISNIS creat riva dan teman teman.pptx
Ilmu PENGANTAR BISNIS creat riva dan teman teman.pptx
 
Proposal Bisnis Jasa Laundry Pakaian.ppt
Proposal Bisnis Jasa Laundry Pakaian.pptProposal Bisnis Jasa Laundry Pakaian.ppt
Proposal Bisnis Jasa Laundry Pakaian.ppt
 
Metode Pengembangan Sistem Informasiiiii
Metode Pengembangan Sistem InformasiiiiiMetode Pengembangan Sistem Informasiiiii
Metode Pengembangan Sistem Informasiiiii
 
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
3 Kewajiban Lancar & Kewajiban Jangka Panjang.pptx
 
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
Pengembangan Strategi Pemasaran UMKM Melalui Media Online pada Komunitas Ibu-...
 
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptxProject Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
Project Bab 1 - Kelompok 1 Dari kami yang sudah membuat.pptx
 
Pertemuan 6 Materi Kecerdasan Intelektual.ppt
Pertemuan 6 Materi Kecerdasan Intelektual.pptPertemuan 6 Materi Kecerdasan Intelektual.ppt
Pertemuan 6 Materi Kecerdasan Intelektual.ppt
 
2 Depresiasi & Pelepasan Aset Tetap.pptx
2 Depresiasi &  Pelepasan Aset Tetap.pptx2 Depresiasi &  Pelepasan Aset Tetap.pptx
2 Depresiasi & Pelepasan Aset Tetap.pptx
 

7.materi membuat form (ok)

  • 2. Elemen Form • Untuk membuat form kita menggunakan elemen FORM 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 ▫ Action sering diisi dengan URL tempat pemrosesan form selankjutnya.
  • 5. Contoh <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>
  • 6. Contoh (lanjutan 1) <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>
  • 7. Contoh (lanjutan 2) <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="Kirim"><INPUT TYPE="Reset" VALUE="Batal"> </FORM> </BODY> </HTML>