Cara Membuat Halaman Login (Username & Password) dengan HTML dan CSS

Halaman Login

BlogBelajar.com - Halaman login merupakan salah satu elemen yang umum ditemukan di sebuah website atau aplikasi lain. Halaman login mempunyai peran penting dalam menjaga keamanan dan data pengguna yang memiliki akses ke suatu sistem atau platform tertentu.

Biasanya, halaman login meminta pengguna untuk memasukkan username dan password, untuk membuktikan bahwa pengguna diberikan akses ke berbagai fitur atau informasi yang disediakan oleh platform atau layanan tersebut.

Berikut, Cara Membuat Halaman Login Pada Aplikasi atau Website Menggunakan HTML, Java Script, dan CSS:

Langkah 1: .Menambahkan code HTML, Pada projects website kamu harus meletakkannya di bagian tempat untuk login akan ditampilkan

<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a>Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a>Create an account</a></p>
    </form>
  </div>
</div>

Langkah 2: Tambahkan CSS, Jika kamu membuat halaman login untuk keperluan Aplikasi, kamu bisa membuat filenya terlebih dahulu, Namun jika untuk website, kamu dapat menggunakan code berikut dan meletakkan sebelum tag "]]></b:skin>". Kamu bisa menggunakan CTRL + F untuk memudahkan pencarian code.

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

Langkah 3: Tambahan code Js (Java Script). untuk website, code ini bisa kamu letakan sebelum tag </body> atau bagian bawah blog.

$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

Langkah 4: Gabungkan Code, Setelah semua code dibuat, langkah selanjutnya adalah menyatukan code agar code css, html, dan java script dapat berfungsi dengan baik.

Langkah 5: Save, Setelah semua selesai dengan benar, selanjutnya simpan hasil project kamu.

Itulah cara membuat halaman login dengan menggunakan html dan java script, kamu bisa menggunakan code untuk keperluan website atau aplikasi kamu.