Cara Membuat Form Buku Tamu Keren Dengan CSS
Oke Sahabat Blogger, Kali Ini saya akan membuat tutorial bagaimana sih cara membuat Form Buku Tamu Keren Hanya Dengan HTML dan CSS.
Biasanya nih, untuk para pemula dalam dunia pemrograman atau baru saja mengetahui dunia pemrograman, ini adalah salah satunya dasar cara mengetahui dasar-dasar dari pembuatan sebuah halaman web, salah satunya yaitu Form. apa itu Form untuk lebih Lengkapnya :
Dan kalian pasti bertanya-tanya...kan..? gimana sih caranya agar desain web Kita Bagus dan enak dilihatnya...? Baca Juga Artikel Berikut :
Oke Langsung saja Simak Tutorial dibawah ini, bagaimana cara membuat Form Buku Tamu Yang Keren dan elegan.
Berikut Tampilan Gambarnya :
 |
| Cara Membuat Form Buku Tamu Keren Dengan CSS |
Oke Langsung Saja, Copy Pastekan Script Html dan CSS dibawah ini, dan jangan lupa simpan script dibawah ini dengan ekxtensi .html
Script Code Bukutamu HTML + CSS
<!doctype html>
<html>
<head>
<title>Buku Tamu</title>
<style type="text/css">
body {
background: #1f8dd6;
color: #df4231;
font-family: Arial;
}
h2 {
margin-bottom: -5px;
}
p {
font-size: 1.5em;
color: #c9c9c9;
}
table {
background: #ffffff;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
tr {
height: 35px;
}
textarea {
width: 348px;
height: 100px;
padding: 10px;
font-family: Arial;
font-size: 12px;
}
input.nama {
background: url(images/user.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.alamat {
background: url(images/maps.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.email {
background: url(images/mail.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.kota {
background: url(images/kota.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input:focus {
border: 1px solid #26C281;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button {
background: #df4231;
color: #ffffff;
width: 370px;
margin-top: 10px;
height: 40px;
border: 1px solid #c9c9c9;
border-radius: 5px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button:hover {
background: #19B5FE;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button-gambar {
height: 35px;
}
</style>
</head>
<body>
<form name="form1" enctype="multipart/form-data" method="post" action="FormSimpan.php">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BUKU TAMU</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="254">
<input class="nama" name="TxtNama" type="text" id="TxtNama" size="42" maxlength="25" placeholder="Nama"></td></tr>
<tr><td><input class="alamat" name="TxtAlamat" type="text" id="TxtAlamat" size="42" maxlength="35" placeholder="Alamat"></td></tr>
<tr><td><input class="email" name="TxtEmail" type="email" id="TxtEmail" size="42" maxlength="30" placeholder="Email">
</td></tr>
<tr><td><input class="kota" name="TxtKota" type="text" id="TxtKota" size="42" maxlength="20" placeholder="Kota"></td></tr>
<tr><td><textarea name="TxtPesan" placeholder="Pesan Anda"></textarea></td></tr>
<tr><td valign="top"><input class="button-gambar" name="gambar" type="file" id="gambar" size="30"></td></tr>
<tr><td colspan="2">
<div align="center">
<input class="button" type="submit" name="submit" value="Simpan">
</div>
</td></tr>
</table></form>
</body>
</html>
<html>
<head>
<title>Buku Tamu</title>
<style type="text/css">
body {
background: #1f8dd6;
color: #df4231;
font-family: Arial;
}
h2 {
margin-bottom: -5px;
}
p {
font-size: 1.5em;
color: #c9c9c9;
}
table {
background: #ffffff;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
tr {
height: 35px;
}
textarea {
width: 348px;
height: 100px;
padding: 10px;
font-family: Arial;
font-size: 12px;
}
input.nama {
background: url(images/user.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.alamat {
background: url(images/maps.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.email {
background: url(images/mail.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input.kota {
background: url(images/kota.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 25px;
padding: 8px;
padding-left: 37px;
margin-bottom: 8px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
input:focus {
border: 1px solid #26C281;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button {
background: #df4231;
color: #ffffff;
width: 370px;
margin-top: 10px;
height: 40px;
border: 1px solid #c9c9c9;
border-radius: 5px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button:hover {
background: #19B5FE;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button-gambar {
height: 35px;
}
</style>
</head>
<body>
<form name="form1" enctype="multipart/form-data" method="post" action="FormSimpan.php">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BUKU TAMU</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="254">
<input class="nama" name="TxtNama" type="text" id="TxtNama" size="42" maxlength="25" placeholder="Nama"></td></tr>
<tr><td><input class="alamat" name="TxtAlamat" type="text" id="TxtAlamat" size="42" maxlength="35" placeholder="Alamat"></td></tr>
<tr><td><input class="email" name="TxtEmail" type="email" id="TxtEmail" size="42" maxlength="30" placeholder="Email">
</td></tr>
<tr><td><input class="kota" name="TxtKota" type="text" id="TxtKota" size="42" maxlength="20" placeholder="Kota"></td></tr>
<tr><td><textarea name="TxtPesan" placeholder="Pesan Anda"></textarea></td></tr>
<tr><td valign="top"><input class="button-gambar" name="gambar" type="file" id="gambar" size="30"></td></tr>
<tr><td colspan="2">
<div align="center">
<input class="button" type="submit" name="submit" value="Simpan">
</div>
</td></tr>
</table></form>
</body>
</html>
Copy Pastekan Script diatas kedalam Notepad, Notepad++, Ataupun Sublime text.
dan jangan lupa, buat folder images, dan download gambar icon dibawah ini, agar tampilan Form Bukutamu kalian seperti pada gambar diatas.
Download Icon Form Bukutamu
dan apabila kalian ingin membuat icon lain, silahkan kalian bisa cari icon yang serupa atau yang mirip dengan inputannya.
Itulah Tutorial dari saya, semoga bermanfaat. Bila terdapat kesalahan dalam penulisan Script, dimohon konfirmasi ke Admin atau Komentar Dibawah Artikel ini.
bagaimana cara membuat Form Buku Tamu diatas menjadi Dinamis...?
Baca Juga :
bagaimana cara membuat Form Buku Tamu diatas menjadi Dinamis...?
Baca Juga :
- Membuat Form Bukutamu Keren Dinamis Simpan
- Source Code Menampilkan Gambar Pada Form Bukutamu
- Membuat Form Bukutamu Keren Dinamis Hapus
- Membuat Form Bukutamu Keren Dinamis Edit
- Membuat Form Bukutamu Keren Dinamis Tampil
Semoga apa yang saya jelaskan diatas bisa kalian fahami dan dapat bermanfaat bagi kalian semua, sekian terimakasih.
Belum ada Komentar untuk "Cara Membuat Form Buku Tamu Keren Dengan CSS"
Posting Komentar