Langsung ke konten utama

Membuat Login Form Dengan HTML dan CSS

Sebuah website tentu memiliki interface untuk client dan admin, dan untuk halaman admin tentu saja harus masuk terlebih dulu melalui halaman login. Bagaimana jika membuat halaman login form?
Pada kesempatan ini atau tepatnya merupakan postingan pertama pada bulan desember 2013 ini Juru Coding akan berbagi tutorial untuk membuat sebuah halaman login sederhana menggunakan HTML dan CSS.

Untuk membuat halaman login form anda dapat mengunduh source lengkapnya melalui halaman ini, karena pada halaman ini hanya sebagai introduce saja dan untuk selebihnya silahkan dipelajari sendiri.

Berikut screenshotnya :

Login Form HTML, CSS

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Login Form</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section class="container">
    <div class="login">
      <h1>Login to Web App</h1>
      <form method="post" action="index.html">
        <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
        <p><input type="password" name="password" value="" placeholder="Password"></p>
        <p class="remember_me">
          <label>
            <input type="checkbox" name="remember_me" id="remember_me">
            Remember me on this computer
          </label>
        </p>
        <p class="submit"><input type="submit" name="commit" value="Login"></p>
      </form>
    </div>
    <div class="login-help">
      <p>Forgot your password? <a href="index.html">Click here to reset it</a>.</p>
    </div>
  </section>
</body>
</html>
Style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #666;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: #eee;
  background: rgba(250, 250, 250, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
}
.about a {
  color: #333;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}
.about a:hover {
  text-decoration: none;
  background: #fafafa;
  background: rgba(255, 255, 255, 0.7);
}
.about-links {
  height: 30px;
}
.about-links > a {
  float: left;
  width: 50%;
  line-height: 30px;
  font-size: 12px;
}
.about-author {
  margin-top: 5px;
}
.about-author > a {
  padding: 1px 3px;
  margin: 0 -1px;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #0ca3d2;
}
.container {
  margin: 80px auto;
  width: 640px;
}
.login {
  position: relative;
  margin: 0 auto;
  padding: 20px 20px 20px;
  width: 310px;
  background: white;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.login h1 {
  margin: -20px -20px 21px;
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #555;
  text-align: center;
  text-shadow: 0 1px white;
  background: #f3f3f3;
  border-bottom: 1px solid #cfcfcf;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
  background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
  background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
  -webkit-box-shadow: 0 1px whitesmoke;
  box-shadow: 0 1px whitesmoke;
}
.login p {
  margin: 20px 0 0;
}
.login p:first-child {
  margin-top: 0;
}
.login input[type=text], .login input[type=password] {
  width: 278px;
}
.login p.remember_me {
  float: left;
  line-height: 31px;
}
.login p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}
.login p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}
.login p.submit {
  text-align: right;
}
.login-help {
  margin: 20px 0;
  font-size: 11px;
  color: white;
  text-align: center;
  text-shadow: 0 1px #2a85a1;
}
.login-help a {
  color: #cce7fa;
  text-decoration: none;
}
.login-help a:hover {
  text-decoration: underline;
}
:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 13px;
}
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 13px;
}
input {
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 14px;
}
input[type=text], input[type=password] {
  margin: 5px;
  padding: 0 10px;
  width: 200px;
  height: 34px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  border-radius: 2px;
  outline: 5px solid #eff4f7;
  -moz-outline-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
  border-color: #7dc9e2;
  outline-color: #dceefc;
  outline-offset: 0;
}
input[type=submit] {
  padding: 0 18px;
  height: 29px;
  font-size: 12px;
  font-weight: bold;
  color: #527881;
  text-shadow: 0 1px #e3f1f1;
  background: #cde5ef;
  border: 1px solid;
  border-color: #b4ccce #b3c0c8 #9eb9c2;
  border-radius: 16px;
  outline: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
  -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}
input[type=submit]:active {
  background: #cde5ef;
  border-color: #9eb9c2 #b3c0c8 #b4ccce;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.lt-ie9 input[type=text], .lt-ie9 input[type=password] {
  line-height: 34px;
}
Source diatas hanya cuplikan saja, untuk selengkapnya silahkan di download.

Download Login Form 
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Game Suit Dengan Java

Anda tentu sudah tidak asing lagi dengan permainan batu gunting kertas, permainan yang tentu sudah dikenal sejak masih kecil (katakanlah saat masih di bangku SD). Begitu juga game Suit ini yang mengadopsi dari permainan batu gunting kertas, sehingga tidak perlu dijelaskan lagi cara mainnya. Game ini hanya sebagai contoh game sederhana yang dapat anda kembangkan sendiri sesuai dengan imajinasi dan kemampuan anda. Atau, paling tidak game ini dapat anda gunakan untuk mempercepat kebosanan. Untuk memainkannya, anda membutuhkan Netbeans. Silahkan download dari situs resminya, untuk pengguna linux download netbeans.sh agar mudah instalasinya. Untuk menjalankannya, silahkan unrar suit.rar kemudian buka Netbeans, pilih file, open project, (cari dimana anda menyimpan file suit yang sudah di unrar kemudian klik pada file suit. Selanjutnya silahkan lihar pada bar kiri Netbeans, klik kanan pada suit kemudian pilih run dan Game siap dimainkan. Tampilan game ini sangat seder
Posting Komentar
Baca selengkapnya

Kalkulator Sederhana Dengan Java

Setelah beberapa waktu coret-coret berbagai artikel yang dimaksudkan hanya sebagai artikel pembuka, mulai malam ini Juru Coding  sudah akan mulai berbagi tutorial dan contoh coding dalam berbagai bahasa pemrograman, namun untuk yang pertama ini Juru Coding  akan berbagi souce code untuk membuat sebuah kalkulator sederhana dengan basic Java. Software yang digunakan adalah Netbeans (kebetulan Netbeans yang digunakan Juru Coding adalah versi 7.4) Berikut adalah screenshot program untuk membuat kalkulator sederhana dengan basic Java. Gambar diatas adalah contoh program kalkulator sederhana dengan basic Java, namun tidak ada gunanya jika anda berniat untuk menulis cuplikan program diatas, karena program di atas tidak lengkap melainkan sengaja saya gunakan hanya sebagai gambar cuplikan sorce code saja. Untuk mencoba membuat program kalkulator sederhana ini anda tidak perlu susah-susah coding dari awal karena anda dapat mendownload source code program diatas secara
3 komentar
Baca selengkapnya

Membuat Jam Digital Dengan Java

Setiap hari, setiap saat tentu selalu berhubungan dengan waktu, jika berbicara waktu tentu tidak lupa dengan JAM . Pada kesempatan kali ini, Juru Coding akan belajar membuat sebuah JAM Digital  dengan pemrograman JAVA , namun sebelumnya Juru Coding mohon maaf terlebih dulu karena hasilnya sangat sederhana, atau dengan kata lain hanya menggunakan fungsi untuk memanggil time date yang ada pada komputer, jadi sudah pasti Jam Digital-nya akan sama dengan jam yang ada pada komputer. Gambar di atas itu adalah screenshot dari Jam Digital-nya. Dan berikut adalah Source Code-nya : /**  *  * @author Juru Coding  */ import javax.swing.*; import java.awt.event.*; import java.util.Date; import java.awt.*; class JCjam extends JFrame {     // Deklarasi komponen Label     JLabel tampil_jam = new JLabel();     // Konstruktor     public JCjam() {         tampil_jam.setFont(new Font("JuruCoding", 1, 30));         this.getContentPane().setLayout(new FlowLayout());         this.g
2 komentar
Baca selengkapnya