كيفية إنشاء: نشرة بريد إلكتروني

كيفية إنشاء نشرة الأخبار

الخطوة الأولى - إضافة HTML:

استخدم عنصر <form> لمعالجة الإدخال. يمكنك الحصول على معلومات إضافية حول دروس PHP الخاصة بنا.

ثم أضف عنصر تحكم إدخال لكل حقل وأزرار "إرسال":

<form action="action_page.php">
  <div class="container">
    <h2>اشتراك في نشرة الأخبار الخاصة بنا</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="الاسم" name="name" required>
    <input type="text" placeholder="عنوان البريد الإلكتروني" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> الأخبار اليومية
    </label>
  </div>
  <div class="container">
    <input type="submit" value="اشتراك">
  </div>
</form>

الخطوة الثانية - إضافة CSS:

/* تعيين أسلوب العناصر في النموذج لجعلها محاطة بحاشیه */
form {
  حاشیه: 4px سلكية #f1f1f1;
}
/* إضافة بعض الهوامش الداخلية واللون الرمادي للخلفية */
.container {
  ملء: 20px;
  لون الخلفية: #f1f1f1;
}
/* تعيين أسلوب العناصر المدخلة والزر التحويل */
input[type=text], input[type=submit] {
  عرض: 100%;
  ملء: 12px;
  السمكة: 8px 0;
  عرض: داخلية بلوك;
  حاشیه: 1px سلكية #ccc;
  حجم الصندوق: حاوية كاملة;
}
/* إضافة مسافة حول مربعات الاختيار */
input[type=checkbox] {
  السمكة الأفقية: 16px;
}
/* تعيين أسلوب زر التحويل */
input[type=submit] {
  لون الخلفية: #04AA6D;
  اللون: أبيض;
  حاشیه: بدون؛
}
input[type=submit]:hover {
  شفافیت: 0.8;
}

جرب بنفسك

الصفحات ذات الصلة

دليل:نموذج HTML

دليل:نموذج CSS