Cara Menciptakan Form Login Sederhana Tapi Berkelas

Cara Membuat Form Login Sederhana Tapi Berkelas Dalam tutorial kita kali ini aku akan menawarkan sedikit tutorial perihal bagaimana Cara Membuat Form Login Sederhana Tapi Berkelas, Form Login ini belum aku sambungkan dengan PHP karna tutorial kita kali ini lebih fokus terhadap tampilan / style.

Gambar 0.1

Pada gambar 0.1 merupakan sekilas tampilan Form Login yang akan kita buat kali ini, Form Login ini tidak memakai isyarat JavaScript dan jQuery, sehingga tidak akan mempengaruhi speed loading web anda.

Form Login ini juga hanya memakai isyarat HTML dan CSS yang sangat simple sehingga sanggup lebih gampang anda hapal untuk kodenya.

Cara Membuat Form Login Sederhana Tapi Berkelas

Langkah pertama yang harus disiapkan ialah sebuah file dengan format HTML dan CSS, disini aku sudah menciptakan 2 file dengan nama Index.html dan Style.css.

Gambar 0.2

File Index.html dan Style.css aku taruh di dalam 1 folder supaya sanggup gampang ketika memanggil CSS dari HTML, dan sinisi aku juga memakai Text Editor Sublime Text.

Kenapa aku memakai Sublime Text, alasannya berdasarkan aku Fitur yang terdapat di dalam Sublime Text lebih lengkap dan Sublime Text lebih gampang digunakan.

Baca: 10 Text Editor Terbaik Untuk Pemrograman

Untuk langkah selanjutnya silahkan anda masukan isyarat HTML di bawah ini di dalam file Index.html, dan jangan lupa untuk save filenya.

 <!DOCTYPE html> <html> <head>  <title>Cara Membuat Form Login Sederhana Tapi Berkelas</title>  <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login">     <h2 class="login-header">Form Login</h2>         <form class="login-container">             <p>                 <input type="email" placeholder="Email">             </p>             <p>                 <input type="password" placeholder="Password">             </p>             <p>                 <input type="submit" value="Log in">             </p>         </form> </div> </body> </html>

Kemudian silahkan masukan isyarat CSS di bawah ini di dalam file Style.css, dan jangan lupa untuk save filenya juga.

 body {   background: #456;   font-family: 'Open Sans', sans-serif; } .login {   width: 400px;   margin: 16px auto;   font-size: 16px; } /* Reset top and bottom margins from certain elements */ .login-header, .login p {   margin-top: 0;   margin-bottom: 0; } .login-header {   background: #28d;   padding: 20px;   font-size: 1.4em;   font-weight: normal;   text-align: center;   text-transform: uppercase;   color: #fff; } .login-container {   background: #ebebeb;   padding: 12px; } /* Every row inside .login-container is defined with p tags */ .login p {   padding: 12px; } .login input {   box-sizing: border-box;   display: block;   width: 100%;   border-width: 1px;   border-style: solid;   padding: 16px;   outline: 0;   font-family: inherit;   font-size: 0.95em; } .login input[type="email"], .login input[type="password"] {   background: #fff;   border-color: #bbb;   color: #555; } /* Text fields' focus effect */ .login input[type="email"]:focus, .login input[type="password"]:focus {   border-color: #888; } .login input[type="submit"] {   background: #28d;   border-color: transparent;   color: #fff;   cursor: pointer; } .login input[type="submit"]:hover {   background: #17c; } /* Buttons' focus effect */ .login input[type="submit"]:focus {   border-color: #05a; }

Untuk melihat balasannya silahkan anda jalankan file Index.html di Browser kesayangan anda.

Form Login ini merupakan Form Login yang berdasarkan aku sederhana tapi tidak kalah jauh dari Form Login yang lainnya. Jika anda tidak suka dengan Form Login yang satu ini, jangan khawatir karna aku masih punya tutorial-tutorial yang lebih keren perihal style Form Login.