Membuat Form Login Sederhana Dengan HTML Dan CSS

Unknown   February 18, 2018   CSS   Comment  

Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form login yang sangat sederhana dengan HTML dan CSS, baiklah, kita langsung saja belajar membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Langkah pertama, buatlah sebuah folder bernama formlogin, kemudian didalam folder formlogin, buatlah sebuah folder bernama img, kemudian tambahkan sebuah gambar kedalam folder img, setelah itu buatlah file bernama index.html pada folder formlogin, contohnya dapat dilihat pada gambar dibawah ini.

Langkah kedua, bukalah file index.html, kemudian tulis syntax  HTML, seperti dibawah ini.

<div class="form-container">
  <form action="" method="post">
  <div class="img-container">
   <img src="avatar.png" alt="" class="avatar">
   <h1>Silahkan Login</h1>
  </div>
  <div class="container">
   <label for="">Nama Pengguna</label>
    <input type="text" placeholder="Masukkan Nama Pengguna" required autocomplete="off" autofocus>
   <label for="">Kata Sandi</label>
    <input type="password" placeholder="Masukkan Kata Sandi" required autocomplete="off">
   <label for=""><input type="checkbox"> Ingat Saya</label>
    <button type="submit">Sign In</button>
   <span class="pws">Lupa <a href="#">Kata Sandi ?</a></span>
  </div>
 </form>
 </div>

Setelah itu, tambahkan syntax CSS, seperti dibawah ini.

.form-container{
  width: 100%;
  max-width: 400px;
  margin: auto;
}
form{
      box-shadow: 0px 5px 25px -5px #999;
}
input[type=text], input[type=password]{
  width: 100%;
  margin: 10px 0;
  padding: 12px 20px;
  box-sizing: border-box;
}
button{
  background: #2374fc;
  color: #fff;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  width: 100%;
  cursor: pointer;
}
.btn-cancle{
  width: auto;
  padding: 10px 18px;
  background-color: #f93333;
}
.img-container{
  text-align: center;
  margin: 24px 0 12px 0;
  padding: 15px 0;
}
img.avatar{
  width: 40%;
  border-radius: 50%;
}
.container{
  padding: 16px;
}

Untuk melihat hasilnya, anda dapat lihat pada gambar dibawah ini.

Begitulah teman teman, cara membuat design form login dengan HTML dan CSS, menurut kalian bagaimana design form loginnya, kalau menurut saya sudah cukup sederhana.

Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.