چگونه ایجاد کنید: خبرنامه الکترونیکی

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

قدم اول - اضافه کردن 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