Home » CSS » HTML » Cara Membuat Form Login Dengan HTML Dan CSS Dengan Mudah

Cara Membuat Form Login Dengan HTML Dan CSS Dengan Mudah

Ditulis Komentar
Assalamualaikum WR.WB.

Selamat pagi sahabat IT, selamat pagi para JOMBLO... :)
Salam sejahterah untuk kita semua..

Ok langsung saja lah. lagian kalian pasti udah gak sabar yakan..
langkah awal mari kita berdo`a terlebih dahulu.

lanjut...

yang pertama sekali kita membuat projec html dengan nama index.html. atau kawan-kawan ingin kasih nama index.php juga gak papa. lalu isi script berikut di dalamnya :
 

  1. <html>
  2. <head>
  3.     <title>Desain Form Login Dengan Css</title>
  4.     <link rel="stylesheet" href="style.css">
  5. </head>
  6. <body>
  7.     <div class="konten">
  8.         <div class="kepala">
  9.             <div class="lock"></div>
  10.             <h2 class="judul">Sign In</h2>
  11.         </div>
  12.         <div class="artikel">
  13.             <form action="#" method="post">
  14.                 <div class="grup">
  15.                     <label for="email">E-mail Address</label>
  16.                     <input type="text" placeholder="Masukkan Alamat Email Anda">
  17.                 </div>
  18.                 <div class="grup">
  19.                     <label for="password">Password</label>
  20.                     <input type="password" placeholder="Masukkan password Anda">
  21.                 </div>
  22.                 <div class="grup">
  23.                     <input type="submit" value="Sign In">
  24.                 </div>
  25.             </form>
  26.         </div>
  27.     </div>
  28. </body>
  29. </html>

    Maka hasilnya akan seperti ini :




    Apkah cukup sampai disini???.
    tentunya tidak karna biar lebih cantik maka selanjutny kita buat file cantiknya dulu heheh :).

    Setelah Kita membuat index.php atau ndex.html, langkah selanjutnya Adalah kita membuat sebuah halaman style.css. namanya tersesar Anda, akan tetapi jika Anda memberikan nama yang lain, maka Anda perlu mengubahnya pada halaman index dengan nama yang telah Anda berikan.

    Jika kita sudah siap membuat halaman style.css, lalu paste kan code berikut di dalm nya.

    1. *{
    2.     padding: 0;
    3.     margin: 0;
    4.     box-sizing: border-box;
    5.     font-family: sans-serif;
    6. }
    7. body{
    8.     background: #c0c0c0;
    9. }
    10. div.konten{
    11.     background: #ffffff;
    12.     width: 350px;
    13.     margin: 222px auto 0;
    14.     border-radius: 16px;
    15.     min-height: 256px;
    16.     overflow: hidden;
    17. }
    18. div.kepala{
    19.     background: #00814e;
    20.     padding: 10px 22px;
    21.     height: 60px;
    22. }
    23. div.kepala h2.judul{
    24.     color: #fff;
    25.     font-weight: normal;
    26.     line-height: 40px;
    27.     display: inline-block;
    28. }
    29. div.lock{
    30.     background-image: url("lock.png");
    31.     background-position: right;
    32.     background-size: 38px;
    33.     display: inline-block;
    34.     width: 25px;
    35.     height: 25px;
    36.     margin-top: 8px;
    37.     float: left;
    38.     margin-right: 10px;
    39. }
    40. div.artikel{
    41.     padding:10px 22px 0;
    42.     color: #00635d;
    43. }
    44. div.artikel div.grup{
    45.     margin: 16px 0;
    46. }
    47. div.artikel div.grup label,
    48. div.artikel div.grup input{
    49.     display: block;
    50. }
    51. div.artikel div.grup label{
    52.     font-size: 13px;
    53.     margin-bottom: 10px;
    54. }
    55. div.artikel div.grup input[type="text"],
    56. div.artikel div.grup input[type="password"]{
    57.     width: 100%;
    58.     height: 30px;
    59.     padding: 0 10px;
    60.     background: #abffde;
    61.     border:none;
    62.     color: #808080;
    63. }
    64. div.artikel div.grup input[type="submit"]{
    65.     background: #33cd77;
    66.     padding: 4px 16px;
    67.     margin: 0 auto;
    68.     border: 1px solid #33cd77;
    69.     border-radius: 2px;
    70.     color: #fff;
    71.     cursor: pointer;
    72. }
    73. div.artikel div.grup input[type="submit"]:hover{
    74.     background: #28a45e;
    75. }

    Maka hasil dari file cantik tadi akan menjadi seperti ini :



















    Untuk file lengkap Download source codenya disini

    Selanjutnya kawan-kawan bisa menambahkan ide kreatif kawan kawan.
    minsal form daftar, lupa pasword, dan masih banyak lagi jika kawan-kawan ingin mengembangkannya.

    More posts

    Belum Ada Komentar

    1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
    2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
    3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
    4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
    5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
    6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
    7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
    8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>