چگونه ایجاد کنیم: فرم‌های دارای نماد

چگونه نمودار نماد فرم ایجاد کنیم

قدم اول - اضافه کردن HTML:

از عناصر <form> برای پردازش ورودی استفاده کنید. می‌توانید اطلاعات بیشتری در آموزش PHP ما پیدا کنید.

سپس برای هر فیلد کنترل ورودی اضافه کنید:

<form action="/action_page.php">
  <h2>فرم ثبت‌نام</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="نام کاربری" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="ایمیل" name="email">
  </div>
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="پسورد" name="psw">
  </div>
  <button type="submit" class="btn">ثبت‌نام</button>
</form>

مرحله دوم - اضافه کردن CSS:

* {حاشیه‌بندی: حاشیه‌بندی جعبه;}
/* تنظیمات استایل محفظه ورودی */
.input-container {
  نمایش: انعطاف‌پذیری;
  عرض: 100%;
  مجاورت پایین: 15px;
}
/* تنظیمات استایل آیکون فرم */
.icon {
  پادشاهی: 10px;
  پس‌زمینه: dodgerblue;
  رنگ: سفید;
  عرض حداقلی: 50px;
  جمع‌آوری متنی: وسط;
}
/* تنظیمات استایل فیلد ورودی */
.input-field {
  عرض: 100%;
  پادشاهی: 10px;
  کонтور: هیچ‌چی;
}
.input-field:focus {
  کناره: 2px خطی dodgerblue;
}
/* تنظیمات استایل دکمه ارسال */
.btn {
  رنگ پس‌زمینه: dodgerblue;
  رنگ: سفید;
  پادشاهی: 15px 20px;
  کناره: هیچ‌چی;
  آیکون: انگشت;
  عرض: 100%;
  شفافیت: 0.9;
}
.btn:hover {
  شفافیت: 1;
}

}

آموزش دستی

صفحات مرتبطفرم HTML

صفحات مرتبطفرم CSS

صفحات مرتبطFlexbox CSS