Assalamualaikum wr.wb
Selamat pagi sobat blogger, libur lebaran telah usai sejak kemarin, bagi sobat yang sudah mulai bekerja admin ucapkan selamat berkerja dan tentunya dengan semangat baru yah hehehe
hari ini admin akan berbagi tutorial membuat form inputan tanggal di html, dengan form ini maka user tidak usah mengetikan tanggal secara manual tetapi tinggal memilih tanggalnya saja jadi lebih simple hehehe
Baiklah berikut tutorialnya
1. Pertama download dulu script kalendernya disini kemudian kita ekstrak
2. Kita buat script formnya misalnya formulir biodata diri, kita bisa buat di notepad ++ atau text editor yang lain, Scriptnya seperti berikut
<html>
<head><title>form biodata</title>
</head>
<body>
<center>
<h2>Form Input Biodata</h2>
<table>
<form name="formbiodata" action="" method="post" enctype="multipart/form-data">
<tr><td>Nama</td><td>:</td><td><input name="nama" type="text"></td></tr>
<tr><td>Tempat Lahir</td><td>:</td><td><input name="tmp_lhr" type="text"></td></tr>
<tr><td>Tanggal Lahir</td><td>:</td><td><input name="tgl_lhr"> <a href="javascript:void(0)" onClick="if(self.gfPop)gfPop.fPopCalendar(document.formbiodata.tgl_lhr);return false;" ><img name="popcal" align="absmiddle" src="calender/calbtn.gif" width="34" height="22" border="0" alt=""></a></td></tr>
<iframe width=174 height=189 name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="calender/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;">
</iframe>
<tr><td>Hobi</td><td>:</td><td><input name="hobi" type="text"></td></tr>
<tr><td><input name="simpan" type="submit" value="simpan"></td><td></td><td><input name="kosongkan" type="reset" value="Kosongkan"></td></tr>
</table>
</center> </html>
simpan dengan nama misalnya index.html kemudian hasil ekstrakan calendar yang tadi dimasukan ke dalam folder yang sama dengan file index.html
disini yang perlu digaris bawahi agar pop up calendar bisa muncul yaitu:
- Pada form harus diberi nama
- Pada form di beri script enctype="multipart/form-data"
- Pada script input tanggal diberi nama
- Nama pada (document.formbiodata.tgl_lhr) disesuaikan dengan nama form dan nama inputan tanggal
Sobat kalau masih kurang jelas bisa download source codenya disini
Baca juga
Demikian tutorial membuat form input tanggal menggunakan html, semoga bermanfaat dan selamat mencoba
Wassalamualaikum wr.wb
2 Comments
Mantap..
ReplyDelete@HouseWheels DIY:terimakasih
ReplyDeleteBerkomentarlah Dengan Baik Dan Sopan
Segala Komentar Yang Masuk Akan Dimoderasi Dahulu Sebelum Ditampilkan