Cara Membuat Form Login Sederhana Tapi Berkelas - Dalam tutorial kita kali ini saya akan memberikan sedikit tutorial tentang bagaimana Cara Membuat Form Login Sederhana Tapi Berkelas, Form Login ini belum saya sambungkan dengan PHP karna tutorial kita kali ini lebih fokus terhadap tampilan / style.
 |
| Gambar 0.1 |
Form Login ini juga hanya menggunakan kode HTML dan CSS yang sangat simple sehingga dapat lebih mudah anda hapal untuk kodenya.
Cara Membuat Form Login Sederhana Tapi Berkelas
Langkah pertama yang harus disiapkan adalah sebuah file dengan format HTML dan CSS, disini saya sudah membuat 2 file dengan nama Index.html dan Style.css.
File Index.html dan Style.css saya taruh di dalam 1 folder agar dapat mudah saat memanggil CSS dari HTML, dan sinisi saya juga menggunakan Text Editor Sublime Text.
 |
| Gambar 0.2 |
Kenapa saya menggunakan Sublime Text, karena menurut saya Fitur yang terdapat di dalam Sublime Text lebih lengkap dan Sublime Text lebih mudah digunakan.
Baca: 10 Text Editor Terbaik Untuk PemrogramanUntuk langkah selanjutnya silahkan anda masukan kode HTML di bawah ini di dalam file Index.html, dan jangan lupa untuk save filenya.
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Form Login Sederhana Tapi Berkelas</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
<h2 class="login-header">Form Login</h2>
<form class="login-container">
<p>
<input type="email" placeholder="Email">
</p>
<p>
<input type="password" placeholder="Password">
</p>
<p>
<input type="submit" value="Log in">
</p>
</form>
</div>
</body>
</html>
Kemudian silahkan masukan kode CSS di bawah ini di dalam file Style.css, dan jangan lupa untuk save filenya juga.
body {
background: #456;
font-family: 'Open Sans', sans-serif;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
.login-header {
background: #28d;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.login-container {
background: #ebebeb;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}
Untuk melihat hasilnya silahkan anda jalankan file Index.html di Browser kesayangan anda.
Form Login ini merupakan Form Login yang menurut saya sederhana tapi tidak kalah jauh dari Form Login yang lainnya. Jika anda tidak suka dengan Form Login yang satu ini, jangan khawatir karna saya masih punya tutorial-tutorial yang lebih keren tentang style Form Login.
Baca: Cara Membuat Form Login Keren Full CSS + HTMLUntuk melihat demonya terlebih dahulu, silahkan klik tombol diatas.