Bagaimana untuk membuat: form dengan ikon

Bagaimana untuk membuat form ikon:

Langkah pertama - tambahkan HTML:

Gunakan elemen <form> untuk menangani input. Anda dapat menemukan informasi lebih lanjut di tutorial PHP kami.

Lalu tambahkan kontrol input untuk setiap field:

<form action="/action_page.php">
  <h2>Form Daftar</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Nama pengguna" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="E-mel" name="email">
  </div>
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Kata laluan" name="psw">
  </div>
  <button type="submit" class="btn">Daftar</button>
</form>

Langkah kedua - Tambahkan CSS:

* {box-sizing: border-box;}
/* Tetapkan gaya kotak input */
.input-container {
  display: flex;
  lebar: 100%;
  margin bawah: 15px;
}
/* Tetapkan gaya ikon formulir */
.icon {
  pad: 10px;
  latar: dodgerblue;
  warna: putih;
  lebar minimum: 50px;
  teks-tengah: tengah;
}
/* Tetapkan gaya medan input */
.input-field {
  lebar: 100%;
  pad: 10px;
  garis: tak ada;
}
.input-field:focus {
  batas: 2px solid dodgerblue;
}
/* Tetapkan gaya tombol pengiriman */
.btn {
  warna latar: dodgerblue;
  warna: putih;
  pad: 15px 20px;
  batas: tak ada;
  kursor: pengecam;
  lebar: 100%;
  kepek: 0.9;
}
.btn:hover {
  kepek: 1;
}

}

Coba sendiri

Halaman yang berhubunganForm HTML

Halaman yang berhubunganForm CSS

Halaman yang berhubunganFlexbox CSS