Membuat Form Login menggunakan HTML dan CSS.

Author - personkomputer

February 24, 2016

Setiap website pasti akan membutuhkan halaman login dan register untuk mengetahui siapa saja member dari anggota website tersebut. Kali ini saya akam memberikan tutorial pembuatan Form login dan diperindah dengan CSS.

Berikut adalah script html. beri nama file ini dengan nama login.html.

<html>
<head>
    <title> Form Login Type 1 </title>
    <link href="style1.css" rel="stylesheet" type="text/css" >
</head>

<body>
    <div id="utama">

      <div class="header">

        <div class="header_isi">

          <div class="gambar">

            <form action="login.php" method="POST">
              <img src="img/logo_code_user.png" ><br /><br />

              <input type="text" name="username" placeholder="Username" class="login_regis">     <br />
              <input type="password" name="password" placeholder="Password" class="login_regis"> <br />

            <div class="chexbox">
              <input type="checkbox" name="chek" > Remember me <br />
            </div>

              <input type="Submit" name="login" value="LOGIN" class="tombol_login">
            </form>

        </div>

      </div>

      <div class="copyright">
        CopyRight&copy 2016 | Design By: <a href="codeuser.blogspot.com"> Code User </a> | City : Bandar Lampung.
      </div>
    </div>
</body>
</html>

Penjelasannya :

1. pada text yang berwarna hijau untuk memanggil file style.css / atau style
     halaman .
2. pada text yang berwarna merah berfungsi untuk membuat Form input login,
     dan action pada tag pembuka form berfungsi untuk menujukan halaman
     yang ingin dituju.
3. pada text yang berwarna biru tua berfungsi sebagai input type text dan
     password unutk mengisi nama dan password yang telah terdaftar.
4. pada text yang berwarna kuning (input type submit) berfungsi untuk
     memindahkan halaman yang ingin dituju.

jika Script diatas telah dibuat dan disave dengan nama login.html, maka hasilnya akan seperti gambar dibawah ini.

( untuk imagesnya individu ya. )

Selanutnya kita akan membuat tampilan atau style pada website. buat file dengan nama style1.css.
Berikut Scriptnya :

*{
padding: 0px;
margin: 0px;
}

#utama {
background-image: url("img/248262_dziewczyna_teczka_manga_anime_fantasy.jpg");
background-size: cover;
height: 680px;
}

.header_isi {
width: 335px;
height: 230px;
padding: 180px 0px 90px 480px;
}

.gambar {
background-color: rgba(170, 114, 123 ,0.6);
height: 330px;
border: 2px solid rgba(170, 114, 123 ,1);
}

img {
width: 250px;
height: 100px;
margin-left: 45px;
margin-top: 15px;
}

.login_regis {
height: 40px;
width: 260px;
text-align: center;
color: white;
font-size: 17px;
border-radius: 8px;
background-color: rgba(225, 255, 255, 0.4);
border: 3px solid #0288D1;
margin-left: 42px;
margin-top: 10px;
}

.tombol_login {
width: 260px;
height: 30px;
text-align: center;
background-color: #0288D1;
color: white;
font-size: 17px;
border: 2px solid #0288D1;
border-radius: 8px;
margin-top: 20px;
margin-left: 42px;
}

.chexbox {
font-size: 15px;
color: white;
margin-left: 45px;
margin-top: 10px;
}

.login_regis:hover {
border: 3px solid #fff;
}

.tombol_login:hover {
background-color: white;
color: #0288D1;
border: 2px solid white;
}

.copyright {
margin-top: 150px;
color: #0288D1;
font-size: 17px;
margin-left: 10px;
}

a {
text-decoration: none;
color: black;
}

.copyright a {
color: #0288D1;
}

Pemberitahuan :
1. Pada #utama backgroung images : Url(" (Beri nama gambarnya.jpg/png/DLL ) ");

jika sudah membuat Script yang seperti diatas, dan telah diSave dengan nama Style1.css , maka hasilnya akan seperti ini :

Tara itu hasilnya dan kmu telah berhasil membuat Form login.

Semoga bermanfaat, dan terima kasih.

Mau Tempalate yang lebih bagus dan responsive ? Telah kami sediakan, silakan Kunjungi link ini " Membuat Template Login HTML dan CSS " Bisa unduh File juga lohh. silakan kunjungi segera.

Membuat Form Login menggunakan HTML dan CSS.

Post a Comment