Membuat Form Login dengan HTML

Membuat form login dengan html

membuat form login dengan html sangat lah mudah,dalam html untuk membuat form kita menggunakan tag <form> dan diakhiri dengan </form> sebagai representasi dari form,untuk lebih jelasnya mengenai html silahkan pahami mengenai apa itu html. Form login biasanya digunakan untuk memasuki sebuah halaman yang memerlukan login terlebih dahulu untuk memasuki ke halaman utmanya, inputan dari sebuah form login itu berupa username/email dan password. Sebelum kita memulai sebaiknya silahkan pahami terlebih dahulu penggunaan form di html.
membuat form login dengan html
gambar diatas merupakan form login yang akan kita buat nantinya, untuk langkah pertamanya kita buat html nya terlebih dahulu dan setelah itu baru kita style dengan css, berikut contoh scrip dari halaman login yang akan kita buat.
<html>
 <head>
  <title>Halaman Login</title>
  <link rel="stylesheet" href="login.css">
 </head>
 <body>
  <div class="box-login">
   <h2>Halaman Login</h2>
   <form>
    <div class="inputan">
     <input type="text" required="">
     <label>Username</label>
    </div>
    <div class="inputan">
     <input type="password" required="">
     <label>Password</label>
    </div>
    <input type="submit" class="btnLogin" value="Login">
   </form>
  </div>
 </body>
</html>

coba perahtikan diantar tag <head> dan </head> terdapat <link rel="stylesheet" href="login.css"> artinya kita menambahkan html dengan sebuah file css dengan nama login.css yang funsi nya nanti untuk memanipualis atau mendisain form login kita. berikut tampilan halaman login tanpa css.
halaman login dengan html

Menabahkan css pada form login

setelah selesai kita membuat form login nya dengan html selanjutnya kita akan meggunakan css untuk mepercantik halaman nya, sebelum itu anda harus memahami apa itu css terlebih dahulu. Berikut css dari halaman login  kali ini.
body {
 margin: 0;
 padding: 0;
 background-color: #fff;
 font-family: sans-serif;
}
.box-login {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 margin: 0;
 padding: 40px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 10px 30px rgba(0,0,0,.5);
 width: 400px;
 box-sizing: border-box;
 border: 1px solid rgba(0,0,0,.5);
}
.box-login h2 {
 margin: 0 0 35px;
 text-align: center;
 text-transform: uppercase;
}
.box-login .inputan {
 position: relative;
}
.box-login .inputan input {
 width: 100%;
 padding: 10px 0;
 font-size: 16px;
 color: #111;
 margin-bottom: 20px;
 border: none;
 border-bottom: 1px solid #111;
 outline: none;
 background: transparent; 
}
.box-login .inputan label {
 position: absolute;
 top: 0;
 left: 0;
 padding: 10px 0;
 font-size: 16px;
 color: #111;
 pointer-events: none;
 transition: .5s
}
.box-login .inputan input:focus ~ label,.box-login .inputan input:valid ~ label {
 top: -20px;
 left: 0;
 color: #e91e63;
}
.box-login .btnLogin {
 font-size: 18px;
 padding: 10px 20px;
 background: #e91e63;
 color: #fff;
 border: none;
 outline: none;
}
sekian pembahasan kita mengenai cara membuat form login dengan html silahkan ikuti step by step langkah pembuatan nya, dan silahkan di kreasikan dengan codingan anda sendiri, Happy Coding!.

0 Response to "Membuat Form Login dengan HTML"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel