Membuat form login dan register

Banyaknya website CMS (Content Manajemen System), membuat kita lupa akan salahsatu script ini, yaitu script form login dan register.

Seperti kita ketahui, script ini biasanya hanya digunakan pada situs seperti media sosial, forum, toko online dan situs-situs 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.

Script ini 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>

Gunakan Realtime HTML Editor ↗, untuk melihat dan mengedit hasil dari script di atas agar tampilanya lebih baik lagi.

Sampai disini dulu pembahasan tentang Free script kali ini, sampai jumpa di free script selanjutnya, dan salam sukses selalu buat Anda semuanya.