0,00 Rp

Tidak ada produk di keranjang.

CSS Form Login Sederhana

Saya akan memberikan tutorial membuat form login dengan html dan css sederhana. Form pada website dapat digunakan untuk memasukkan data, login, dan lain-lain. Kali ini saya akan membuat form login. Dan untuk mempercantik tampilan form maka dibutuhkan css. Berikut tutorialnya.

Seperti biasa kita siapkan text editor.

Step 1

Untuk membuat form kita ketik program dibawah ini dan simpan dengan nama file index.html.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Form Sederhana</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="content">
  <h2>Silahkan Login</h2>
    <form>
      <input type="textfield" name="nama" placeholder="Username"><br><br>
      <input type="textfield" name="email" placeholder="Password"><br><br>
      <input type="checkbox" name="remember" checked="checked" value="Remember Me"><label>Remember Me</label>
      <br><br>
      <button>Login</button>
    </form>
  </div>
</body>
</html>

 

Step 2

Selanjutnya kita buat folder css. Terus buka text editor lagi dan ketik program dibawah ini setelah itu simpan dengan nama file style.css.

body {
  margin: 0;
  padding: 0;
}
.content {
  width: 40%;
  margin: 0 auto;
  text-align: center;
  margin-top: 100px;
  padding: 30px;
  border-top: solid 1px #743;
  border-bottom: solid 1px #743;
}
.content h2 {
  text-align: center;
  font-family: Aileron Light;
  margin-top: 0;
}
.content form  input[type=textfield] {
  width: 90%;
  padding: 15px;
  font-family: arial;
  font-size: 16px;
}
.content form input[type=checkbox], label{
  float: left;
  color: blue;
  font-family: arial;
  padding-left: 10px;
}
.content button {
  padding: 10px;
  background-color: #ccc;
  border: none;
  width: 40%;
  font-family: arial;
  font-size: 16px;
}
.content button:hover {
  background-color: #743;
  color: #fff;
  cursor: pointer;
}

 

Sudah selesai maka hasil dari program diatas akan jadi seperti dibawah ini.

Sekian tutorial kali ini. Tutorial sederhana dengan program seperti diatas anda bisa membuat form yang lebih bagus sesuai dengan ide anda.

Terima Kasih Telah Membaca.

***PIU***

 

Reviews

Related Articles