Tampilkan postingan dengan label form. Tampilkan semua postingan

Cara Membuat Form Berada di tengah layar menggunakan html dan css

Hallo sobat bloger kali ini kita akan membuat form yang berada di tengah layar. untuk membuatnya siapkan dulu sebauh text editor dan  sebuah browser. lalu kita bikin form nya, misalnya form login berikut ini kode html dan css nya:

<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<meta charset="utf-8">
<style type="text/css">
    .login {
        margin: 250px auto;
        width: 400px;
        padding: 10px;
        border: 1px solid #ccc;
        background: lightblue;
    }
    input[type=text], input[type=password] {
        margin: 5px auto;
        width: 100%;
        padding: 10px;
    }
    input[type=submit] {
        margin 5px auto;
        float: right;
        padding: 5px;
        width: 90px;
        border: 1px solid #fff;
        color: #fff;
        background: red;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="login">
<form method="post" action="proses_login.php">
    <input type="text" name="email" placeholder="Masukan email Anda"><br>
    <input type="password" name="pass" placeholder="Masukan Passord"><br>
    <input type="checkbox">Ingat Saya
    <input type="submit" name="kirim" value="Kirim">
</form>
</div>
</body>
</html>

ok silakan dicoba.  pada kode diatas margin: 250px auto; yang membuat form nya berada ditengah, jarak ke atasnya 250px - kiri otomatis - bawah 250px - kanan otomatis. jika ingin menambahkan atau ada yang ditanyakan silakan tulis komentar dibawah

untuk kode PHP nya akan saya tulis di post
yang selanjutnya. terimakasih sudah berkunjung nantikan post berikutnya, Lihat tutorial CSS lainya disini
Read More
Langganan: Postingan ( Atom )