Membuat desain form login dengan
HTML + CSS
Membuat form desain login dengan HTML + CSS - hmmmmmmmmmmm
assalamu'alaikum wr.wb
pada kali ini saya ingin berbagi ilmu dari latihan kuliah saya, yaitu cara membuat form desain login dengan HTML dan CSS, dah lah ngga usah banyak basa basi wkwkwk kalian juga malas bacanya -_-" dah lanjut aja
1. Pertama tama kalian buat sebuah index.html. kemudian silahkan anda copas -__-" kode HTML yang ada di bawah ini ke halaman index.html yang sudah kalian buat
#index.html
#index.html
<!DOCTYPE html>
<html>
<head>
<title> Login </title>
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="login">
<form>
<table cellpadding="5" align="center">
<h1><center> LOGIN </center></h1>
<tr>
<td> User Name </td><td>:</td>
<td><input type="text" name="userid"></td>
</tr>
<tr>
<td> Password </td><td>:</td>
<td><input type="password" name="psw"></td>
</tr>
<tr align="right">
<td colspan="3"><input type="submit" value="Login"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
2. Setelah anda membuat index.html, langkah selanjutnya ialah anda membuat sebuah halaman login.css (namanya terserah kalian, akan tetapi anda memberukan nama yang lain, maka anda perlu mengubahnya pada halaman index dengan nama yang telah anda berikan.
Setelah halaman tersebut dibuat, silahkan anda copas lagi -_-" code di bawah ini ke halaman tersebut
#login.css
3. Selesai di atas adalah source code yang dapat anda gunakan untuk membuar Form Login atau sebagai sumber untuk belajar bagaimana cara membuat sebuah form login.body {
width: 100%; height: 100%;
background: repeating-radial-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 10px,
white 10px,
white 14px,
#6cf 14px,
#6cf 17px,
transparent 17px,
transparent 25px
);
background-size: 50px 50px;
}
.login{
background-color: aqua;
height: 210px;
margin-top: 150px;
margin-right: 500px;
margin-bottom: 0px;
margin-left: 500px;
padding-top: 15px;
padding-bottom: 10px
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
# Ini dia hasilnya
Simpel kan bikin form login, ya simpel lah orang tingal copas -__-"
yaudah lah sekian dari saya, kurang lebihnya mohon maaf
Wassalamu'alaikum wr.wb
No comments:
Post a Comment