Skip to content Skip to sidebar Skip to footer

Membuat Form Login Validasi Menggunakan HTML/CSS dan Javascript Sederhana

Artikel ini berbagi koding cara membuat halaman login validasi menggunakan html/css dan javascript sederhana yang terdiri dari Username dan Password. Selain itu anda bisa mengubah atau menambahkan atribut lain seperti Email atau Nomor telepon untuk login validasinya.

Karena sederhana, maka form login validasi yang terdiri dari username/password ini saya buat hanya menggunakan html/css dan javascript tanpa bahasa pemrograman PHP. Jadi sudah saya urutkan sesingkat mungkin hingga seperti contoh diberikut.

Gambar form login validasi menggunakan html/css dan javascript

Diatas adalah contoh login validasi sederhana menggunakan javascript yang akan kita buat dalam artikle ini. Anda bisa mencoba DEMO-nya disini dengan username : user dan password : 123


Membuat Form Login Validasi Menggunakan HTML/CSS dan Javascript

Buatlah satu file index.html di lokal komputer Anda lalu silahkan paste koding dibawah ini.
<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
  <style type="text/css">
    body{
      overflow-y: hidden;
      margin:0;
      padding: 0;
      font-family: verdana;
      background-color: #919191;
    }
    form{
      font-family: arial;
      background-color: rgb(255,255,255,0.7);
      width: 300px;
      margin: 180px auto;
      padding: 30px;
      text-align: right;
      color: #2D2D2D;
      border-radius: 40px 10px;
      box-shadow: 2px 2px 7px #393939;
    }
    input{
      margin: 10px;
    }
    input.login{
      background-color: #0096FF;
      color: #E7E7E7;
      font-family: verdana;
      font-weight: bold;
      border-radius: 10px;
      padding: 5px 10px;
      margin: 30px 10px auto 0px;
      text-transform: uppercase;
      transition: .2s;
    }
    input.login:hover{
      background-color: #93A4B0;
      color: #CDCDCD;
    }
    p{
      text-align:center;
      margin: 50px auto;
      margin-top: 10px;
      padding: 10px;
      font-weight: bold;
      color: #0101A6;
      font-family: verdana;
      background-color: #0096FF;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <form action="profile.html" method="get" id="myForm" onsubmit=" return validasi()">
    <p>Welcome</p>
    Username  <input type="text" name="username" placeholder="username">
    Password  <input type="password" name="password" placeholder="password">
    <input class="login" type="submit" name="submit" value="login">
  </form>
</body>
<script type="text/javascript">
  function validasi(){
    var username = document.forms["myForm"]["username"].value;
    var password = document.forms["myForm"]["password"].value;
    if( username == "user" && password == "123"){
      return true;
    }
    else if(username =="" || password ==""){
      alert("Masukan username dan password Anda");
      return false;
    }
    else{
      alert("Username atau password yang Anda masukan SALAH");
      return false;
    }
  }
</script>
</html>
Lalu silahkan coba hasilnya.

Nah apabila anda ingin upload file index.html supaya bisa ditampilkan  menggunakan hosting gratis cobalah gunakan github pages yang bisa dibaca tutorial artikel nya Cara Upload Project Ke Github Pages Desktop Sendiri Web Hosting Gratis!!

Anda bisa mengubah ketentuan username dan password sesuka yang anda inginkan berikut saya paparkan.

Buat yang belum tahu yang ingin mengubah username dan password, tapi bingung harus ubah kodenya yang mana? Jangan khawatir, berikut ini saya berikan tata pada form login validasi sederhana ini bersama penjelasannya untuk awam.

Cara Ubah Username dan Password

Cari script berikut pada koding login validasi html/css dan javascript diatas.
*Perhatikan kode (yang bertanda merah)
if( username == "user" && password == "123"){
      return true;
    }

Silahkan ubah "user" untuk username dan "123" untuk password dengan yang anda inginkan.

Penutup

Sekian program koding login validasi menggunakan html/css dan javascript sederhana yang bisa saya berikan pada artikel kali ini, untuk selebihnya silahkan anda bereksperimen sendiri. Seperti mengubah tampilan cssnya atau mungkin menambahkan kolom email, alamat, nomot hp, dan sebagainya.

Tapi perlu dipahami, yang terpenting pada koding ini ialah script javascirpt nya yang memberikan fungsi validasi tersebut.

 Apabila terdapat pertanyaan, silahkan tanyakan pada kolom komentar pada artikel ini.

1 comment for "Membuat Form Login Validasi Menggunakan HTML/CSS dan Javascript Sederhana"

  1. Terima kasih kak atas blog nya, sangat membantu saya dalam cara menggabungkan html,css, dan js dan terus berkarya kak. Perkenalakan nama saya Andrian Antonius, nim saya 1922500215 dan web kampus saya : https://www.atmaluhur.ac.id

    ReplyDelete