Judul : Cara Membuat Form Login Dengan HTML Dan CSS
link : Cara Membuat Form Login Dengan HTML Dan CSS
Cara Membuat Form Login Dengan HTML Dan CSS
Cara-cara atau langkah-langkah terbaru dan terlengkap yang dapat Anda ikuti dan lakukan dalam membuat form login dengan HTML dan CSS.
Cara Membuat Form Login Dengan HTML Dan CSS
Untuk tutorial atau bagaimana cara membuat Form Login dengan HTML dan CSS dapat Anda lihat pada video di atas, sedangkan untuk source code-nya, dapat Anda lihat pada artikel ini.
Silahkan Anda buat sebuah index.php atau index.html, kemudian silahkan Anda pastekan kode html yang berada di bawah ini ke halaman index yang telah Anda buat.
<html>
<head>
<title>Desain Form Login Dengan Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="konten">
<div class="kepala">
<div class="lock"></div>
<h2 class="judul">Sign In</h2>
</div>
<div class="artikel">
<form action="#" method="post">
<div class="grup">
<label for="email">E-mail Address</label>
<input type="text" placeholder="Masukkan Alamat Email Anda">
</div>
<div class="grup">
<label for="password">Password</label>
<input type="password" placeholder="Masukkan password Anda">
</div>
<div class="grup">
<input type="submit" value="Sign In">
</div>
</form>
</div>
</div>
</body>
</html>
2. Setelah Anda membuat index.php atau index.html, langkah selanjutnya ialah silahkan Anda buat sebuah halaman style.css ( namanya tersesar Anda, akan tetapi jika Anda memberikan nama yang lain, maka Anda perlu mengubahnya pada halaman index dengan nama yang telah Anda berikan.
Setelah halaman tersebut dibuat, silahkan Anda copy dan paste-kan code di bawah ini ke halaman tersebut.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background: #c0c0c0;
}
div.konten{
background: #ffffff;
width: 350px;
margin: 222px auto 0;
border-radius: 16px;
min-height: 256px;
overflow: hidden;
}
div.kepala{
background: #f85252;
padding: 10px 22px;
height: 60px;
}
div.kepala h2.judul{
color: #fff;
font-weight: normal;
line-height: 40px;
display: inline-block;
}
div.lock{
background-image: url("lock.png");
background-position: center;
background-size: 38px;
display: inline-block;
width: 25px;
height: 25px;
margin-top: 8px;
float: left;
margin-right: 10px;
}
div.artikel{
padding:10px 22px 0;
color: #808080;
}
div.artikel div.grup{
margin: 16px 0;
}
div.artikel div.grup label,
div.artikel div.grup input{
display: block;
}
div.artikel div.grup label{
font-size: 13px;
margin-bottom: 10px;
}
div.artikel div.grup input[type="text"],
div.artikel div.grup input[type="password"]{
width: 100%;
height: 30px;
padding: 0 10px;
background: #eeeeee;
border:none;
color: #808080;
}
div.artikel div.grup input[type="submit"]{
background: #33cd77;
padding: 4px 16px;
margin: 0 auto;
border: 1px solid #33cd77;
border-radius: 2px;
color: #fff;
cursor: pointer;
}
div.artikel div.grup input[type="submit"]:hover{
background: #28a45e;
}
3. Setelah itu, Anda membuat kedua halaman tersebut, langkah selanjutnya jangan lupa untuk men-download gambar lock pada alamat url berikut: Download Gambar Lock
Setelah Anda men-download gambar tersebut, silahkan Anda pindahkan gambar tersebut ke tempat project Anda berada.
4. Selesai
Di atas adalah source code yang dapat Anda gunakan untuk membuat form login atau sebagai sumber untuk belajar bagaimana cara membuat sebuah form login.
Jika Anda ingin men-download sepaket, maka Anda dapat men-download-nya melalui link di bawah ini.
Demo Download Source Code
Semoga dapat bermanfaat buat Anda. Jika masih Ada pertanyaan seputar source code yang diberikan, maka Anda dapat bertanya melalui komentar yang berada di bawah atau menghubungi kami melalui beberapa alternatif yang terdapat pada halaman kontak.
sumber : duniacara
Demikianlah Artikel Cara Membuat Form Login Dengan HTML Dan CSS
Sekianlah artikel Cara Membuat Form Login Dengan HTML Dan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Form Login Dengan HTML Dan CSS dengan alamat link https://agen20.blogspot.com/2018/12/cara-membuat-form-login-dengan-html-dan.html
