Cara Membuat Responsive Inline 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 responsive inline form dengan CSS.

Responsive Inline

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

.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: royalblue;
}

@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
</head>
<body>

<h2>Responsive Inline Form</h2>
<p>Kita akan membuat inline form yang akan tetap horizontal hingga lebar layar jendela browser kurang dari 850 piksel: kemudian formulir ditampilkan secara vertikal, bukan horizontal. </p>
<p> Ubah ukuran jendela browser untuk melihat efeknya.</p>

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter email" name="email">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" placeholder="Enter password" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Remember me
  </label>
  <button type="submit">Submit</button>
</form>

</body>
</html>

Cara Membuat Responsive Inline

Langkah 1) Tambahkan HTML
Gunakan elemen untuk memproses masukan.
Contoh

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter email" name="email">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" placeholder="Enter password" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Remember me
  </label>
  <button type="submit">Submit</button>
</form>

Langkah 2) Tambahkan CSS:
Contoh

/* Style untuk form - tampilkan item secara horizontal */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* Tambahkan beberapa margins untuk semua label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style untuk field input  */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style untuk submit button */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}

.form-inline button:hover {
  background-color: royalblue;
}

/* Tambahakan responsiveness - menampilkan kontrol formulir secara vertikal, bukan horizontal pada layar yang lebarnya kurang dari 800 piksel */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}