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
Belum ada Komentar untuk "Cara Membuat Form Berada di tengah layar menggunakan html dan css"
Posting Komentar