کیسے کریں: پاپکا فرم

ورود فرم کی تیاری کیسے کریں

پہلا قدم - ایچ تی ایم ایل اضافہ کریں:

فرم عناصر کا استعمال کریں تاکہ داخل کی جائے اور اپنے سائٹ پر پتہ لگانا کریں. آپ کرسکتے ہیں: پی ایچ پی تربیت بھی معلومات جانیں.

<!-- فرم کا آپن کرنے کا بٹن -->
<بٹن کلاس: "بٹن-آپن" onclick="آپنفرم()">فرم کا آپن کرنا</بٹن>
<!-- فرم -->
<دیوی کلاس: "فرم-پاپکا" id="مافورم">
  <فرم عمل: "/action_page.php" کلاس: "فرم-کانٹینر">
    <ہیڈنگ1>ورود</ہیڈنگ1>
    <لبل برای: "ایمیل"><بول بول>ایمیل</بول بول></لبل>
    <اینپوت نوع: "ٹیکسٹ" placeholder="ایمیل وارد کریں" نام: "ایمیل" ضروری>
    <لبل برای: "پسور"><بول بول>پاسور</بول بول></لبل>
    <اینپوت نوع: "پاسور" placeholder="پاسور وارد کریں" نام: "پسور" ضروری>
    <بٹن نوع: "فرم" کلاس: "بٹن">ورود کریں</بٹن>
    <بٹن نوع: "بٹن" کلاس: "بٹن منسوخ" onclick="بندفرم()">بند کرنا</بٹن>
  </فرم>
</div>

دوسرا قدم - سی ایس ایس اضافہ کریں:

{بکس-سائزنگ: بورڈر-اینڈ-بگس;}
/* کسٹم فرم کا بٹن کا استعمال کریں - پہلے پیچی پر چسپ رکھا جاتا ہے */
.بٹن-آپن {
  رنگ پس منظر: #555;
  رنگ: سفید;
  حاشیه: 16پیکسل 20پیکسل;
  کنده: هیچ‌چیزی;
  ماوس: اشاره‌گر;
  شفافیت: 0.8;
  پوزیشن: فیکس;
  نیچ: 23 پیچس;
  راست: 28 پیچس;
  وسیعیت: 280 پیچس;
}
/* پاپکا فرم - پیش فرض میخفوت */
.فرم-پاپکا {
  دسپلای: نہیں;
  پوزیشن: فیکس;
  پایین: 0;
  سمت راست: 15پیکسل;
  کنده: 3پیکسل خطی #f1f1f1;
  موقعیت عمودی: 9;
}
/* استایل برای کانتینر فرم اضافه شود */
.form-container {
  حداکثر عرض: 300پیکسل;
  حاشیه: 10پیکسل;
  رنگ پس‌زمینه: سفید;
}
/* فیلدهای ورودی کامل عرض */
.form-container input[type=text], .form-container input[type=password] {
  طول: 100%;
  حاشیه: 15پیکسل;
  مجوز: 5پیکسل 0 22پیکسل 0;
  کنده: هیچ‌چیزی;
  پس‌زمینه: #f1f1f1;
}
/* وقتی فیلد ورودی تمرکز می‌گیرد، عملیاتی انجام شود */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  رنگ پس‌زمینه: #ddd;
  کنده: هیچ‌چیزی;
}
/* استایل برای دکمه‌های ارسال/ورود تنظیم شود */
.form-container .btn {
  رنگ پس‌زمینه: #04AA6D;
  رنگ: سفید;
  حاشیه: 16پیکسل 20پیکسل;
  کنده: هیچ‌چیزی;
  ماوس: اشاره‌گر;
  طول: 100%;
  مجوز پائین:10پیکسل;
  شفافیت: 0.8;
}
/* رنگ پس‌زمینه قرمز برای دکمه لغو اضافه کنید */
.form-container .cancel {
  رنگ پس‌زمینه: قرمز;
}
/* کافئی اثرات حرکت برای دکمه‌ها اضافه کنید */
.form-container .btn:hover, .open-button:hover {
  شفافیت: 1;
}

تیسری قدم - جاوااسکریپت اضافه کنید:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

خود کو بچارکریں

مربوط پیج

تربیت:ایچ تی ایم فرم

تربیت:سی ایس ایس فرم