İkonlu form nasıl oluşturulur

Önceki sayfa Kayıt formu
Sonraki sayfa Haber aboneliği

İkonlu form nasıl oluşturulur öğrenin.

Kaydol

İkonlu form nasıl oluşturulur

Adım 1 - HTML ekleyin:

<form> elementini kullanarak girişleri işleyin. Daha fazla bilgi için PHP eğitim sayfamızı ziyaret edebilirsiniz.

Her alan için giriş kontrol ekleyin:

<form action="/action_page.php">
  <h2>Kayıt Formu</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Kullanıcı Adı" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="E-posta" name="email">
  </div>
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Şifre" name="psw">
  </div>
  <button type="submit" class="btn">Kayıt Ol</button>
</form>

İkinci Adım - CSS Ekle:

* {çubuk_bantlama: border-box;}
/* Giriş konteynerinin tarzını ayarla */
.input-container {
  görünüm: esnek;
  genişlik: 100%;
  alt_çizgi_olayı: 15px;
}
/* Form ikonunun tarzını ayarla */
.icon {
  dolgu: 10px;
  arka_plan: dodgerblue;
  renk: beyaz;
  en_küçük_genişlik: 50px;
  metin_hizalama: ortala;
}
/* Giriş alanının tarzını ayarla */
.input-field {
  genişlik: 100%;
  dolgu: 10px;
  çizgi: yok;
}
.input-field:focus {
  çerçeve: 2px katı dodgerblue;
}
/* Sunum düğmesinin tarzını ayarla */
.btn {
  arka_plan_rengi: dodgerblue;
  renk: beyaz;
  dolgu: 15px 20px;
  çerçeve: yok;
  faret: işaretçi;
  genişlik: 100%;
  şeffaflık: 0.9;
}
.btn:hover {
  şeffaflık: 1;
}

Kişisel olarak deneyin