Cara Membuat Form Login Dengan CSS di PHP

Birul.id - Kalau anda kuliah di jurusan sistem informasi pastinya akan mengenal yang namanya bahasa pemrograman web, dalam pemrograman web ada namanya HTML ( Hypertext Markup Language) Nah HTML ini lah yang kita gunakan untuk membangun sebuah web, Oleh sebab itu bahasa pemrograman web sangat populer di kalangan programer.

Selain HTML ada juga namanya CSS Cascading Style Sheets ) yang fungsi utamanya adalah untuk memberikan gaya atau corak tampilan ( style) pada sebuah element halaman web yang dibuat oleh HTLM. Jadi kalau sobat ingin tampilan webnya indah harus ditanami yang namanya sebuah CSS.

Nah itulah sedikit penjelasan tentang HTML dan CSS, Oke kita lanjut ke topik utama kita yaitu tentang Cara Membuat Form Login Dengan CSS di PHP, sebelum sobat membuat sebuah program entah itu perogram kasir, pembayaran spp atau yang lainnya. Hal yang pertama sobat pikirkan adalah desain dari program yang akan sobat bikin.

Setelah konsep dan desainnya jadi baru kita eksekusi, biasanya kalau kita membuat sebuah program hal yang wajib ada adalah sebuah Form login karena fungsi form login itu untuk membatasi akses ke sebuah program yang sobat akan buat.

MEMBUAT FORM LOGIN DENGAN CSS

Langsung saja kita mulai, disini saya mebuat file index.html, sobat bisa bikin juga dengan namanya yang berbeda ataupun sama itu tidak masalah. Contoh kasus yang akan saya berikan adalah mebuat form login dengan HTLM, perhatikan contohnya dibawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Desain Form Login Dengan CSS - www.malasngoding.com</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <h1>Membuat Desain Form Login Dengan CSS <br/> www.malasngoding.com</h1>

 <div class="kotak_login">
  <p class="tulisan_login">Silahkan login</p>

  <form>
   <label>Username</label>
   <input type="text" name="username" class="form_login" placeholder="Username atau email ..">

   <label>Password</label>
   <input type="text" name="password" class="form_login" placeholder="Password ..">

   <input type="submit" class="tombol_login" value="LOGIN">

   <br/>
   <br/>
   <center>
    <a class="link" href="https://www.malasngoding.com">kembali</a>
   </center>
  </form>
  
 </div>


</body>
</html>
Pada form login yang sudah kita buat diatas tadi, juga sudah membuat element <p><p/> dan pada masing-masing form juga sudah ada classnya masing-masing, bagi yang belum mengerti apa itu class saya akan jelaskan dipostingan selanjutnya.


Tahap yang terakhir adalah membuat style CSS supaya tampilan form loginnya bagus dan menarik untu di lihat. Kita akan buat menggunakan Eksternal CSS.

Buatlah sebuah file CSS dengan nama style.css

 
body{

 font-family: sans-serif;

 background: #d5f0f3;

}

h1{

 text-align: center;

 /*ketebalan font*/

 font-weight: 300;

}

.tulisan_login{

 text-align: center;

 /*membuat semua huruf menjadi kapital*/

 text-transform: uppercase;

}

.kotak_login{

 width: 350px;

 background: white;

 /*meletakkan form ke tengah*/

 margin: 80px auto;

 padding: 30px 20px;

}

label{

 font-size: 11pt;

}

.form_login{

 /*membuat lebar form penuh*/

 box-sizing : border-box;

 width: 100%;

 padding: 10px;

 font-size: 11pt;

 margin-bottom: 20px;

}

.tombol_login{

 background: #46de4b;

 color: white;

 font-size: 11pt;

 width: 100%;

 border: none;

 border-radius: 3px;

 padding: 10px 20px;

}

.link{

 color: #232323;

 text-decoration: none;

 font-size: 10pt;

}

Nah setelah itu tinggal sobat eksekusi saja hasilnya. ini contoh hasilnya jika kita coba membukanya menggunakan browser chrome :
cara membuat form login dengan css

Nah membuat form login itu banyak sekali cara dan bentuknya tergntung kreasi dan selera sobat masing-masing. ini sekedar contoh saja selebihnya bisa dikembangkan, jika ada yang kurang jelas silahkan tinggalkan komentar dan terimakasih.

Belum ada Komentar untuk "Cara Membuat Form Login Dengan CSS di PHP"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel