Cara Membuat Stacked Form

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat stacked form dengan CSS.

Stacked Form

Stacked Form(Formulir yang ditumpuk) secara vertikal (di mana input dan label ditempatkan di atas satu sama lain, bukan di samping satu sama lain):

<!DOCTYPE html>
<html>
<style>
body {
  font-family: Arial;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Stacked Form</h3>
<p>Cara menggunakan CSS untuk membuat stacked form(formulir bertumpuk):</p>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Depanmu..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang..">

    <label for="country">Negara</label>
    <select id="country" name="country">
      <option value="australia">Indonesia</option>
      <option value="canada">Thailand</option>
      <option value="usa">Korea</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Cara Membuat Stacked Form

Langkah 1) Tambahkan HTML
Gunakan elemen <form>untuk memproses inputan. Tambahkan inputan (dengan label yang cocok) untuk setiap field:
Contoh

<form action="/action_page.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Depanmu..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang..">

    <label for="country">Negara</label>
    <select id="country" name="country">
      <option value="australia">Indonesia</option>
      <option value="canada">Thailand</option>
      <option value="usa">Korea</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>

Langkah 2) Tambahkan CSS:
Contoh

/* Style untuk inputan */
  input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Style untuk submit button */
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Tambahkan warna background ke submit button saat mouse di atas */
input[type=submit]:hover {
  background-color: #45a049;
}