Cara Membuat Form dengan Icon

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

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara membuat form dengan ikon menggunakan CSS. Form ini digunakan agar tampilan formulir dapat lebih menarik dengan ditambahkan icon di samping fieldnya. Icon yang digunakan pun biasanya menggunakan icon font-awesome.

Form dengan Icon

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tambahkan icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Atur style untuk submit button */
.btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}

</style>
</head>
<body>

<form action="/action_page.php" style="max-width:500px;margin:auto">
  <h2>Login Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>

  <button type="submit" class="btn">Log In</button>
  <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
  </label>
  
  <div class="container" style="background-color:#f1f1f1">
      
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
    
</form>

</body>
</html>

Cara Membuat Form with Icon

Langkah 1) Tambahkan HTML:
Gunakan elemen <form> untuk memproses masukan. Kemudian tambahkan inputan dan icon untuk setiap field:
Contoh

<form action="/action_page.php" style="max-width:500px;margin:auto">
  <h2>Login Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>

  <button type="submit" class="btn">Log In</button>
  <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
  </label>
    <div class="container" style="background-color:#f1f1f1">
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
</form>

Langkah 2) Tambahkan CSS:
Contoh

* {box-sizing: border-box;}

/* Style untuk container input */
.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

/* Style untuk form icons */
.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

/* Style untuk field input */
.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Atur style untuk submit button */
.btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}