نحوه ایجاد فرم پرداخت با استفاده از HTML ، CSS3 و jQuery

RSS

عضو شوید

:: فراموشی رمز عبور؟

عضویت سریع

به وبلاگ من خوش آمدید

براي اطلاع از آپيدت شدن وبلاگ در خبرنامه وبلاگ عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود

مهدیه شارمین []

آمار مطالب

:: کل مطالب : 61
:: کل نظرات : 0

آمار کاربران

:: افراد آنلاین : 1
:: تعداد اعضا : 0

کاربران آنلاین

آمار بازدید

:: بازدید امروز : 383
:: باردید دیروز : 7
:: بازدید هفته : 390
:: بازدید ماه : 403
:: بازدید سال : 801
:: بازدید کلی : 11369

نحوه ایجاد فرم پرداخت با استفاده از HTML ، CSS3 و jQuery

نوشته شده توسط : مهدیه شارمین

سلام بر همه! در این آموزش ، ما می خواهیم با استفاده از HTML ، CSS3 و کمی jQuery یک فرم خرید پرداخت ایجاد کنیم . ما قصد داریم از Google Fonts برای این آموزش ، به ویژه Montserrat استفاده کنیم.

HTML

اولین کاری که باید انجام دهیم ایجاد ساختار HTML است.

برای بسته بندی همه چیز به ظرفی نیاز داریم ، نام آن را "صفحه پرداخت" می گذاریم. در داخل ما دو بخش اصلی خواهیم داشت ، بدنه و پاورقی.

بدن

نوار پیشرفت مرحله
دو روش پرداخت
برخی از فیلدهای ورودی

پاورقی

دو دکمه

این کد مربوط به صفحه پرداخت است:

<div class="checkout-panel">
  <div class="panel-body">
    <h2 class="title">Checkouth2>
 
    <div class="progress-bar">
      <div class="step active">div>
      <div class="step active">div>
      <div class="step">div>
      <div class="step">div>
    div>
 
    <div class="payment-method">
      <label for="card" class="method card">
        <div class="card-logos">
          <img src="img/visa_logo.png"/>
          <img src="img/mastercard_logo.png"/>
        div>
 
        <div class="radio-input">
          <input id="card" type="radio" name="payment">
          Pay £340.00 with credit card
        div>
      label>
 
      <label for="paypal" class="method paypal">
        <img src="img/paypal_logo.png"/>
        <div class="radio-input">
          <input id="paypal" type="radio" name="payment">
          Pay £340.00 with PayPal
        div>
      label>
    div>
 
    <div class="input-fields">
      <div class="column-1">
        <label for="cardholder">Cardholder's Namelabel>
        <input type="text" id="cardholder" />
 
        <div class="small-inputs">
          <div>
            <label for="date">Valid thrulabel>
            <input type="text" id="date" placeholder="MM / YY" />
          div>
 
          <div>
            <label for="verification">CVV / CVC *label>
            <input type="password" id="verification"/>
          div>
        div>
 
      div>
      <div class="column-2">
        <label for="cardnumber">Card Numberlabel>
        <input type="password" id="cardnumber"/>
 
        <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.span>
      div>
    div>
  div>
 
  <div class="panel-footer">
    <button class="btn back-btn">Backbutton>
    <button class="btn next-btn">Next Stepbutton>
  div>
div>

CSS

حالا که ما با HTML کار کردیم ، بیایید صفحه نمایش پرداخت خود را جالب کنیم. ما به صفحه برخی از سبک های اساسی می دهیم و پانل خود را در مرکز قرار می دهیم.

* {
  box-sizing: border-box;
}
 
html,
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  justify-content: center;
  align-items: center;
}

اکنون ، بیایید. panel checkout خود را سبک کنیم و آن را به 940 × 766 پیکسل تبدیل کنیم. سبک را به آن اضافه کنید و ما خوب هستیم:

.checkout-panel {
  display: flex;
  flex-direction: column;
  width: 940px;
  height: 766px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}

سرد! حالا بیایید جلوتر برویم و بدن و عناصر داخل آن را سبک کنیم. ابتدا pad را به بدنه اضافه کرده و عنوان را سبک کنید:

.panel-body {
  padding: 45px 80px 0;
  flex: 1;
}
 
.title {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 40px;
  color: #2e2e2e;
}

عنصر بعدی نوار .progress است. برای تنظیم نوار پیشرفت مرحله ، از عناصر Pseudo استفاده خواهیم کرد:

مطالب پیشنهادی :

9 نکته برتر برای بهینه سازی تصاویر در سال 2021

چند اشتباه رایج در طراحی سایت

.progress-bar {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}
 
.step {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #efefef;
}
 
.step:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 22px;
  width: 225px;
  height: 6px;
  content: '';
  background-color: #efefef;
}
 
.step:before {
  color: #2e2e2e;
  position: absolute;
  top: 40px;
}
 
.step:last-child:after {
  content: none;
}
 
.step.active {
  background-color: #f62f5e;
}
.step.active:after {
  background-color: #f62f5e;
}
.step.active:before {
  color: #f62f5e;
}
.step.active + .step {
  background-color: #f62f5e;
}
.step.active + .step:before {
  color: #f62f5e;
}
 
.step:nth-child(1):before {
  content: 'Delivery';
}
.step:nth-child(2):before {
  right: -40px;
  content: 'Confirmation';
}
.step:nth-child(3):before {
  right: -30px;
  content: 'Payment';
}
.step:nth-child(4):before {
  right: 0;
  content: 'Finish';
}

به قدرت عناصر شبه و نحوه استفاده از آن برای ایجاد نوار پیشرفت توجه کنید.

عنصر بعدی روش .payment است. ما دو روش پرداخت داریم ، یکی برای کارت های اعتباری و دیگری برای PayPal. فضا را به دو ستون تقسیم کرده و با استفاده از flexbox تراز کنید.

.payment-method {
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}
 
.method {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 122px;
  padding-top: 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgb(249, 249, 249);
  justify-content: center;
  align-items: center;
}
 
.card-logos {
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
 
.radio-input {
  margin-top: 20px;
}
 
input[type='radio'] {
  display: inline-block;
}

عالی! اکنون ما بخشی با چندین فیلد ورودی با اطلاعات مربوط به کارتها داریم. می توانیم رنگ حاشیه را در: تغییر دهیم و برای هر برچسب ورودی یک نماد اضافه کنیم.

.input-fields {
  display: flex;
  justify-content: space-between;
}
 
.input-fields label {
  display: block;
  margin-bottom: 10px;
  color: #b4b4b4;
}
 
.info {
  font-size: 12px;
  font-weight: 300;
  display: block;
  margin-top: 50px;
  opacity: .5;
  color: #2e2e2e;
}
 
div[class*='column'] {
  width: 382px;
}
 
input[type='text'],
input[type='password'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
 
input[type='text']:focus,
input[type='password']:focus {
  border-color: rgb(119, 219, 119);
}
 
#date { background: url(img/icons_calendar_black.png) no-repeat 95%; }
#cardholder { background: url(img/icons_person_black.png) no-repeat 95%; }
#cardnumber { background: url(img/icons_card_black.png) no-repeat 95%; }
#verification { background: url(img/icons_lock_black.png) no-repeat 95%; }
 
.small-inputs {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
 
.small-inputs div {
  width: 182px;
}

ما تقریباً تمام شدیم آخرین موردی که ما باید به آن سبک دهیم ، پنل پانویس است. در اینجا دو دکمه داریم .back-btn و .next-btn. با استفاده از flexbox آنها را به درستی تراز کنید.

.panel-footer {
  display: flex;
  width: 100%;
  height: 96px;
  padding: 0 80px;
  background-color: rgb(239, 239, 239);
  justify-content: space-between;
  align-items: center;
}

به آنها رنگهای مختلف بدهید و کمی آنها را متحرک کنید ، بنابراین یک عمل شناور وجود دارد که با استفاده از تبدیل و انتقال مقداری مقیاس می زند.

.btn {
  font-size: 16px;
  width: 163px;
  height: 48px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  border: none;
  border-radius: 23px;
}
 
.back-btn {
  color: #f62f5e;
  background: #fff;
}
 
.next-btn {
  color: #fff;
  background: #f62f5e;
}
 
.btn:focus {
  outline: none;
}
 
.btn:hover {
  transform: scale(1.1);
}

آخرین مورد: توجه داشته باشید که وقتی روی روش پرداخت کلیک می کنید فقط دکمه رادیو را چک می کند؟ برای ظرافت بیشتر ، وقتی حاشیه است ، رنگ حاشیه جعبه را عوض کنید. این کار را با استفاده از jQuery انجام دهید.

ابتدا مطمئن شوید که jQuery را در آن گنجانده اید و سپس یک کلاس به نام blue-border اضافه کنید.

.blue-border {
  border: 1px solid rgb(110, 178, 251);
}

سرد! اکنون در پرونده JavaScript ، کد زیر را اضافه کنید:

$(document).ready(function() {
 
  $('.method').on('click', function() {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });
 
})

فیلدهای ورودی را نیز اعتبارسنجی کنیم. اگر روی دکمه بعدی کلیک کنید و یکی از ورودی ها خالی است ، حاشیه باید قرمز باشد ، بنابراین یک فایل css با کلاس اضافه کنید. هشدار:

.warning {
  border-color: #f62f5e;
}

و اعتبارسنجی JS در پرونده JS ما:

var $cardInput = $('.input-fields input');
 
$('.next-btn').on('click', function(e) {
 
  $cardInput.removeClass('warning');
 
  $cardInput.each(function() {    
     var $this = $(this);
     if (!$this.val()) {
       $this.addClass('warning');
     }
  })
});