Cara membuat login form sederhana menggunakan HTML dan CSS

November 05, 2017 2 comments

Table of Content [Tampil]

Cara membuat login form dengan HTML

pengertian login dan logout

Sebelum kita mulai dengan ngoding, sebenarnya apasih Login itu?,

Kalian pasti sering ya melihat tulisan "login" atau "logout" di sosial media contohnya 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 bisa di sebut juga dengan "Sign in" adalah yakni berupa sebuah proses pintu untuk masuknya pengguna aplikasi, atau website tersebut untuk bisa mengakses(masuk). Login berbeda dengan Logout. Logout adalah proses keluar dari sistem komputer atau layanan tertentu.

Baca juga

Macam macam text editor untuk HTML

Pengertian HTML Lengkap!!

Membuat login form sederhana dengan HTML

Sebelumnya kalian pasti sudah mengerti dengan Tag tag HTML. Nah sekarang kita akan membuat login form dari HTML dan CSS. langsung di ikuti saja langkah-langkah dibawah ini.

Siapkan Text editor untuk mengetik Script HTML dan CSS, saya biasa menggunakan Sublime text, kenapa Sublime? mungkin karena mudah di gunakan bagi para pemula yang baru belajar tentang Pemograman web.
Kalian bisa meng-copy paste script dibawah ini atau bisa 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>
<p class="copyright">
<span>Copyright©2017 | Desginer : <a href="https://catatanshand.blogspot.com/p/tentang-saya.html" target="_blank">Yushandrino</a> | City : Pamulang
<br><span><a href="https://catatanshand.blogspot.com">Catatanshand.blogspot.com</a></span></p>
</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 bisa meng-copy script dibawah ini :

Baca Juga

    
 
<!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>
<p class="copyright">
<span>Copyright©2017 | Desginer : <a href="https://catatanshand.blogspot.com/p/tentang-saya.html" target="_blank">Yushandrino</a> | City : Pamulang
<br><span><a href="https://catatanshand.blogspot.com">Catatanshand.blogspot.com</a></span></p>
</body>
</html>

Bila sudah di save maka hasilnya akan seperti ini

Sekian dari penjelasan membuat login form sederhana dengan HTML, jangan lupa share dan tinggalkan komentar. Dan juga jangan lupa untuk membaca artikel lainnya di Catatanshand.blogspot.com

Sekian terima kasih.

Andri Belajar dan membuat dokumentasi kedalam bentuk artikel ataupun video

2 comments for "Cara membuat login form sederhana menggunakan HTML dan CSS"

UnknownNovember 12, 2017 at 11:27 AM
Bisa jadiin referensi nih bang blognya aku gak bisa bisa belajar html wkwkwk :v
AndriNovember 13, 2017 at 6:36 PM
Hehehe makasih maas, mas bisa ko belajar html selagi ada niat dan giat belajar dijamin pasti bisa syukur syukur bisa buat web sendiri hehhe

Hai para pembaca setia ataupun yang baru datang.

Semoga artikel di blog ini dapat bermanfaat, silakan berikan komentar, masukan dan kritik baik itu untuk blog ini ataupun artikel diatas.

[PESAN] Bijaklah dalam berkomentar.

1. Berikan komentar yang relevan sesuai dengan artikel di atas.
2. Harap tidak berkata kasar dan dilarang keras berkomentar yang mengandung SARA, menyinggung perasaan atau merugikan orang lain ataupun pihak lain.
3. Jangan tinggalkan link aktif, karena akan menyebabkan broken link.
4. Centang pada Notify me untuk mendapatkan notifikasi jika ada balasan dari komentar.
5. Komentarlah dengan menggunakan akun google atau email valid agar mendapatkan notifikasi balasan, jangan komentar tanpa menggunakan akun.

Silakan kontak admin disini untuk partner atau hal lainnya.

Terima kasih sudah berkunjung.

Salam,

Admin Catatanshand

Catatan Shand

Cara membuat login form sederhana menggunakan HTML dan CSS

Cara membuat login form dengan HTML

pengertian login dan logout

Membuat login form sederhana dengan HTML

Halloo..

2 comments for "Cara membuat login form sederhana menggunakan HTML dan CSS"