Membuat Form Login Dengan PHP dan CSS

Lama tidak put up tentang pemrograman internet, kali ini saya akan mencoba membuat form login dengan menggunakan Hypertext Preprocessor dan css. Form login ini di gunakan untuk keamanan net dalam mengakses suatu statistics maka di butuhkan sistem autentikasi berupa consumer dan password.

Login merupakan proses penting untuk menjaga keamanan dalam sebuah website, agar aplikasi di dalam internet site tidak boleh di akses oleh sembarang orang oleh karena itu proses login di gunakan untuk pengaman masing masing akun yang sudah terdaftar.

Kelengkapan sofware

1. XAMPP

2. Notepad

three. Browser

Nah langsung saja berikut scrip programnya

1. Buatlah file index.Php lalu copy paste scrip berikut ini simpan lalu simpan di folder htdocs/formlogin

<html> <head> <title>CSS Desain Form Login Minimalis</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="tengah">Contoh Form Login</h1> <div class="konten"> <div class="atas"> <div class="grup"> </div> <form action="#" method="post"> <div class="grup"> <input type="text" placeholder="Isikan Username Anda"> </div> <div class="grup"> <input type="password" placeholder="Isikan Password Anda"> </div> <div class="jarakatas30"> <div class="grup tengah"> <button type="submit" class="tombol kirim">Submit</button> <button type="button" class="tombol hapus">Clear</button> </div> </div> <div class="grup"> <div class="kiri"> </div> <div class="kanan"> </div> </div> </form> </div> <div class="bawah tengah"> </div> </div> </body> </html>

2. Setelah itu buat file style.css copy paste script berikut ini lalu simpan di folder htdocs/formlogin

* padding: zero; margin: 0; box-sizing: border-box; font-circle of relatives: sans-serif;  frame history: #c0c0c0;  h1 color: #01afee; margin-pinnacle: 70px; font-size: 32px;  a textual content-decoration: none;  div.Konten heritage: #ffffff; width: 380px; margin: 20px automobile 10px; border-radius: 5px; overflow: hidden;  .Tengah textual content-align: center;  .Jarakatas30 margin: 30px 0;  div.Kiri float: left;  div.Kanan flow: proper;  span font-length: 13px;  /** * Desain Bagian Atas * */ div.Atas height: 290px; padding: 30px 30px zero;  div.Grup margin: 10px 0;  a.A font-length: 13px; color: #808080;  a.A.Garisbawah text-decoration: underline;  a.A.Tombol font-length: 14px; padding: zero 7px; border-radius: 3px; coloration: #ffffff; show: inline-block; line-height: 28px; width: 49.Three%;  a.A i margin-proper: 10px;  shape margin: 20px zero;  input[type="text"], input[type="password"] width: one hundred%; peak: 30px; padding: 0 10px; border: 1px stable #d9d9d9; border-radius: 4px; colour: #454545; outline: none;  input[type="text"]:attention, enter[type="password"]:recognition border: 1px solid #e9cd00;  button.Tombol colour: #ffffff; width: 88px; height: 28px; border: none; font-weight: ambitious; cursor: pointer;  button.Tombol.Kirim background: #e9cd00; border-pinnacle-left-radius: 10px; border-bottom-left-radius: 10px;  button.Tombol.Kirim:hover heritage: #ccb400;  button.Tombol.Hapus history: #01afee; border-top-proper-radius: 10px; border-backside-proper-radius: 10px;  button.Tombol.Hapus:hover heritage: #0195cb;  /** * Desain Bagian Bawah * */ span.Info color: #e6f8ff; line-peak: 70px; 

Setelah semua scrip di simpan pada folder htdocs di xampp, silahkan akses http://localhost/formlogin akan tampil seperti gampar di bawah ini.

0 Response to "Membuat Form Login Dengan PHP dan CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel