Cara Membuat Form Input Tanggal Menggunakan Html

     
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">&nbsp;<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 komentar:

HouseWheels DIY said...

Mantap..

iman jayoda said...

@HouseWheels DIY:terimakasih