Cara Membuat Form on Image

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan membuat sebuah formulir yang terletak di atas gambar full page dengan menggunakan CSS.

Form On Image

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* Gambar yang akan digunakan */
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/pic_trulli.jpg");

  min-height: 500px;

  /* Pusatkan dan skala gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Tambahkan gaya ke container formulir */
.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Tetapkan gaya untuk button kirim */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h2>Form pada Gambar</h2>
<div class="bg-img">
  <form action="/action_page.php" class="container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>

<p>Contoh ini membuat formulir pada gambar responsif. Cobalah untuk mengubah ukuran jendela browser untuk melihat bagaimana itu akan selalu menutupi seluruh lebar layar, dan itu menskalakan dengan baik pada semua ukuran layar.</p>

</body>
</html>

Cara Menambahkan Formulir ke Gambar

Langkah 1) Tambahkan HTML:
Contoh

<div class="bg-img">
  <form action="/action_page.php" class="container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
  </form>
</div>

Langkah 2) Tambahkan CSS:
Contoh

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-img {
  /* Gambar yang dipakai */
  background-image: url("img_nature.jpg");

  /* Kontrol ketinggian gambar */
  min-height: 380px;

  /* Pusatkan dan skalakan gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Tambahkan gaya ke container formulir */
.container {
  position: absolute;
  right: 0;
  margin: 20px;
  max-width: 300px;
  padding: 16px;
  background-color: white;
}

/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Tetapkan gaya untuk tombol kirim */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}