Mempercantik Form dengan CSS

Lama sudah blog ini tak tersentuh. Akhirnya timbul juga niat membuat postingan baru. Kali ini ane mau kasih posting tentang HTML dan CSS, “Mempercantik Form dengan CSS”.


Penampakan form yang sudah dipoles CSS

Let’s we go to the point
Step 1
Salin kode dibawah ini ke text editor agan2. Saran ane, lebih baiknya diketik. Itung-itung latihan ngetik (senam jari) biar hafal juga hehe.

<html>
<head>
    <title>Form Pendaftaran</title>
</head>
<body>
    <form id="formdaftar" name="formdaftar" method="post" action="">
        <h2>Form Pendaftaran</h2>
        <p>Nama Depan</p>
        <input class="input" type="text" name="nm_depan" placeholder="Nama Depan">
        <p>Nama Belakang</p>
        <input class="input" type="text" name="nm_belakang" placeholder="Nama Belakang">
        <p>E-mail</p>
        <input class="input" type="text" name="email" placeholder="E-mail">
        <p>Password</p>
        <input class="input" type="password" name="password" placeholder="Password">
        <p>Reply Password</p>
        <input class="input" type="password" name="reply_pass" placeholder="Reply Password"><br><br>
        <input class="daftar" type="submit" value="Daftar">
    </form>
</body>
</html>

Simpan dengan nama register.html. Setelah berhasil disimpan coba agan lihat penampakannya. Biasa2 ajan kan...???
Okeh..!! Sekarang kita poles biar gantengan dikit dengan ramuan CSS

Step 2
Ketik kode dibawah ini setelah tag title
<head>
<title>Form Pendaftaran</title>
.:: copy disini ::.
</head>

    <style type="text/css">
        #formdaftar {
            background-color: #efefef;
            border-radius: 8px;
            margin: auto;
            width: 250px;
            align: center;
            border: 1px solid #c0c0c0;
            font-family: verdana;
            padding: 10px;
        }
        #formdaftar h2 {
            color: #007cc3;
            padding: 0px 0px 10px 0px;
            margin: 0px;
            font-family: basic title font;
            font-size: 30px;
        }
        #formdaftar p {
            color: #007cc3;
            margin: 0px;
        }
        .input {
            border-radius: 5px;
            margin-bottom: 7px;
            width: 250px;
            height: 30px;
        }
        .daftar {
            background-color: #495677;
            color: white;
            font-family: basic title font;
            font-size: 24px;
            width: 100px;
            height: 35px;
            font-weight: bolder;
            border-radius: 5px;
        }
        .daftar:hover {
            color: #efefef;
            background-color: #007cc3;
        }
    </style>

Simpan lalu coba lihat lagi penampakkannya..sudahkah lebih gantengan dikit dari sebelumnya..??? Jangan bilang masih jelek..!! Kalau ada yang masih bilang jelek berarti anda punya selera yang payah. Hehehehe.