Cara Menciptakan Login Form Sederhana Memakai Html Dan Css

Cara menciptakan login form dengan HTML

pengertian login dan logout

Sebelum kita mulai dengan ngoding, bersama-sama apasih Login itu?,

Kalian niscaya sering ya melihat goresan pena "login" atau "logout" di sosial media misalnya facebook, twitter, instagram, dan sebagainya. Di game pun juga ada "login" dan "logout", mungkin sebagian orang telah mengetahui apa itu "login" dan "Logout", tapi bagaimana dengan orang yang kurang paham dengan kata itu?, pastinya asal klik tanpa tahu maksudnya yakan? hehehe.

Kata Log itu sendiri artinya "catatan".

Login dapat di sebut juga dengan "Sign in" yakni yakni berupa sebuah proses pintu untuk masuknya pengguna aplikasi, atau website tersebut untuk dapat mengakses(masuk). Login berbeda dengan Logout. Logout adalah proses keluar dari sistem komputer atau layanan tertentu.

Membuat login form sederhana dengan HTML

Sebelumnya kalian niscaya sudah mengerti dengan Tag tag HTML. Nah kini kita akan menciptakan login form dari HTML dan CSS. pribadi di ikuti saja langkah-langkah dibawah ini.

Siapkan Text editor untuk mengetik Script HTML dan CSS, aku biasa memakai Sublime text, kenapa Sublime? mungkin alasannya yakni gampang di gunakan bagi para pemula yang gres berguru perihal Pemograman web.
Kalian dapat meng-copy paste script dibawah ini atau dapat kalian ketik sendiri.

Script HTML :

         <!DOCTYPE html><html lang="en"><meta charset="utf-8"><head>  <title> Login form sederhana HTML </title></head><body><div class="main">       <div class="header">          <h1>  Login </h1> </div> <div class="content">                           <input type="Username" name="Username" placeholder="Username" id="input">             <input type="password" name="password" placeholder="password" id="input">             <center>              <input type="checkbox" name="checkbox" align="center" class="text" id="checkbox"> Remember me</center> <center>              <button> Masuk </button>             <button> Register </button>             </center> <p> <span><a href="">Lupa password?</a></span></p> </div> </div> <br> </body></html>

Script CSS :

 body{   color: black;   font-family: calibri;   background-color: #eaeaea; }  /* tampilan */  .main{   width: 400px;   margin: 90px auto;   background-color: black;   box-shadow: 0 0 9px black; }  .content{   border: 1.5px blue solid;   background-color: #eaeaea;   margin-top: -21px; }  .header{   background-color: darkblue;   margin: 15px auto;   text-align: center;   color: black; }  h1:hover{   color: white;   text-shadow: 3px 3px 4px black; }  .content span .p{   text-align: center; }  #input{   padding: 5px;   display: block;   background-color: #eaeaea;   font-weight: bold;   color: black;   margin: 20px auto;   }  #input:hover{   background-color: white; }  button{   width: 100px;   height: 40px;   margin: 10px auto;   margin-top: 1px;   background-color: darkblue;   font-weight: bold;   display: inline-block; }  button:hover{   color: white;   font-size: 14px;   box-shadow: 0 0 7px black; }  /* lupa password */ p span{   padding: 10px; }  p span a{   text-decoration: none;   color: black;   font-weight: bold; }  p span a:hover{   background-color: blue;   color: white;   padding: 2px;   font-weight: bold; }  /* remember */ .text{   margin: 10px auto;   margin-top: -8px;   text-align: center; }

Catatan :

Untuk script Html simpan dengan ekstensi (namafile).html
Untuk script CSS simpan dengan ekstensi (namafile).css

Atau bagi kalian tidak ingin filenya terpisah dapat meng-copy script dibawah ini :

       <!DOCTYPE html><html><head><style type="text/css">body{   color: black;   font-family: calibri;   background-color: #eaeaea; }  /* tampilan */  .main{   width: 400px;   margin: 90px auto;   background-color: black;   box-shadow: 0 0 9px black; }  .content{   border: 1.5px blue solid;   background-color: #eaeaea;   margin-top: -21px; }  .header{   background-color: darkblue;   margin: 15px auto;   text-align: center;   color: black; }  h1:hover{   color: white;   text-shadow: 3px 3px 4px black; }  .content span .p{   text-align: center; }  #input{   padding: 5px;   display: block;   background-color: #eaeaea;   font-weight: bold;   color: black;   margin: 20px auto;   }  #input:hover{   background-color: white; }  button{   width: 100px;   height: 40px;   margin: 10px auto;   margin-top: 1px;   background-color: darkblue;   font-weight: bold;   display: inline-block; }  button:hover{   color: white;   font-size: 14px;   box-shadow: 0 0 7px black; }  /* lupa password */ p span{   padding: 10px; }  p span a{   text-decoration: none;   color: black;   font-weight: bold; }  p span a:hover{   background-color: blue;   color: white;   padding: 2px;   font-weight: bold; }  /* remember */ .text{   margin: 10px auto;   margin-top: -8px;   text-align: center; }  </style>  <title> Login form sederhana HTML </title></head><body><div class="main">       <div class="header">          <h1>  Login </h1> </div> <div class="content">                           <input type="Username" name="Username" placeholder="Username" id="input">             <input type="password" name="password" placeholder="password" id="input">             <center>              <input type="checkbox" name="checkbox" align="center" class="text" id="checkbox"> Remember me</center> <center>              <button> Masuk </button>             <button> Register </button>             </center> <p> <span><a href="">Lupa password?</a></span></p> </div> </div> <br> </body></html>

Bila sudah di save maka akhirnya akan menyerupai ini

Sekian dari klarifikasi menciptakan login form sederhana dengan HTML.

Cara Menciptakan Login Form Sederhana Memakai Html Dan Css

Cara menciptakan login form dengan HTML

pengertian login dan logout

Membuat login form sederhana dengan HTML

0 Response to "Cara Menciptakan Login Form Sederhana Memakai Html Dan Css"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel