by Banyaknya website CMS (Content Manajemen System), membuat kita lupa akan salahsatu script ini, yaitu script login dan register.
Seperti kita ketahui, form login dan register biasanya hanya digunakan pada situs sosial, forum, toko online dan sejenisnya. Namun bukan ber-arti hal ini tidak penting untuk di pelajari.
Catatan
Form login atau register yang akan kita buat kali ini sebenarnya tidak akan berfungsi, karena sebenarnya form ini di per-untukan buat halaman PHP. Tapi tidak apa-apa, kali ini kita akan pelajari saja penggunaan CSS dan HTML-nya saja, mungkin akan berguna suatu saat nanti.
Form login dan register Saya buat jadi satu halaman, silahkan sesuaikan dengan kebutuhan Anda. Langsung saja lihat scriptnya di bawah.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Login dan register form</title>
<!-- Use Icon from font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS code -->
<style>
body {
font-family: sans-serif;
}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: green;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
border: 1px solid grey;
outline: none;
}
.input-field:focus {
border: 1px solid green;
}
.btn {
background-color: green;
color: white;
padding: 12px 15px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
form {
max-width:320px;
background: #f5f5f5;
padding: 10px;
border: 1px solid green;
border-radius: 5px;
margin:auto;
}
h2 {
text-align: center;
}
</style>
<!-- End of CSS code -->
</head>
<body>
<h2>Login dan Register Form</h2>
<!-- Form -->
<form action="#">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" required placeholder="Username" name="name">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" required placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" required placeholder="Password" name="pass">
</div>
<button type="submit" class="btn">SUBMIT</button>
</form>
<!-- End of Form -->
</body>
</html>
Silahkan ke halaman Realtime HTML Editor ↗, untuk melihat hasil atau edit script diatas.
Sampai disini dulu kali ini, sampai jumpa lagi di Free Script berikutnya, dan semoga sukses selalu buat Anda semuanya.
