Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Cara Membuat Form Buku Tamu Keren Dengan CSS

Dunia Programming - Pada kesempatan kali ini saya akan membagikan tutorial bagaimana 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 adalah form, form disini sangat berperan penting untuk berjalannya sebuah program, kegunaan form sendiri bisanya untuk interaksi antara pengguna dan pemilik website (bisa perusahaan, sekolah maupun perorangan).

Untuk itu, sebagai materi dasar, sara akan memberikan tutorial bagaimana cara membuat form sederhana yang ditujukan kepada tamu, baik itu tamu sekolah maupun tamu perusahaan.

Berikut tutorialnya.

Cara Membuat Form Bukutamu dengan menggunakan HTML dan CSS

Sebelum kita memulai tutorialnya, kalian siapkan terlebih dahulu software editornya terlebih dahulu, bisa menggunakan Sublime Text 3 atau Notepad++ atau editor sejenis.

Setelah itu buka editor yang kalian punya, kemudian buat folder project kalian dimanapun, misal di Partisi D, kemudian buat dengan nama projectbukutamu.

Cara Membuat Form Buku Tamu Keren Dengan CSS
Cara Membuat Form Buku Tamu Keren Dengan CSS

Setelah itu, buka folder yang sudah kalian buat tadi dengan cara klik menu File yang ada di pojok kiri atas, kemudian klik Open Folder, cari folder project kalian, setelah itu klik folder project kalian lalu klik Ok.

Setelah itu buat file dengan nama form.html kemudian simpan file tersebut, kemudian copy script dibawah ini :


<!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>  

Copy paste script diatas, kemudian jalankan denga cara klik 2x file form.html yang sudah kalian buat tadi, usahakan kalian gunakan browser google chrome ya agar tampilannya bisa maksimal.

Itulah sedikit pembahasan bagaimana cara membuat form bukutamu hanya dengan menggunakan bahasa pemrograman HTML dan CSS, lalu bagaimana jika kita ingin memfungsikan form tersebut seperti form-form yang lain?.

Untuk penjelasan selanjutnya kalian baca tutorial tentang pemrograman php bagaimana cara menyimpan data, menghapus dan mengubah data.

Post a Comment for "Cara Membuat Form Buku Tamu Keren Dengan CSS"