كيفية إنشاء: نماذج صورة مع الرموز

كيفية إنشاء نموذج صورة

الخطوة الأولى - إضافة 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="Username" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </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">Register</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