Kredi Kartı Formu: Modern Web Tasarımı ve Kullanıcı Deneyimi

Kredi kartı formu, e-ticaret sitelerinde ödeme işlemlerinin en önemli bileşenlerinden biridir. Kullanıcının güvenliğini ve işlemleri sorunsuz şekilde tamamlamasını sağlamak için, sade ve işlevsel bir arayüzle sunulmalıdır. Günümüzde kullanıcılar, yalnızca bilgi girişi değil, aynı zamanda rehberlik eden, kolaylaştıran ve hata riskini azaltan form yapıları bekliyor.

Modern web teknolojileri sayesinde kredi kartı formları, artık kullanıcıya anında geri bildirim veren, kart numarasına göre otomatik logo tanıyan ve mobil cihazlarda sorunsuz çalışan dinamik yapılar hâline geldi. Bu dönüşüm, hem kullanıcı deneyimini artırır hem de formu doldurmayı daha güvenli ve hızlı kılar.

Bu yazıda, HTML, CSS ve JavaScript kullanılarak hazırlanmış gelişmiş bir kredi kartı formunun tüm kodlarını detaylı şekilde inceliyorum. Her bölüm, adım adım açıklanarak anlatılıyor. Böylece ister yeni başlayan biri olun, ister deneyimli bir geliştirici, bu formu rahatlıkla kendi projenize entegre edebilirsiniz.

Şimdi, ilk adım olan HTML yapısı ile kredi kartı formunun iskeletini oluşturmaya başlıyoruz.

Kredi Kartı Formu HTML Yapısı: İskeletin İnşası

Kredi kartı formu geliştirme sürecinde ilk ve en önemli adım, HTML kullanarak yapının iskeletini oluşturmaktır. Geliştirici, bu aşamada hem kullanıcıya görsel kart önizlemesini gösterir hem de form alanlarını HTML ile tanımlar. Ayrıca HTML yapısını, CSS ve JavaScript gibi diğer teknolojilerle uyumlu olacak şekilde semantik, erişilebilir ve anlaşılır biçimde planlar.

Kartın Görsel Sunumu: Gerçek Zamanlı Önizleme

İlk kısımda yer alan <div class="credit-card" id="creditCard">, kredi kartı formunun görsel öğesidir. Bu bölüm, kullanıcıya gerçek bir kredi kartı gibi davranır ve bilgileri anlık olarak yansıtan interaktif bir görünüm sunar. Bu kart üzerinde üç ana alan vardır:

• Kart logosu: <div class="card-logo" id="cardLogo"> alanı içinde yer alır. Başlangıçta görünmezdir çünkü “hidden” sınıfına sahiptir. JavaScript aracılığıyla kart tipi tespit edildiğinde görünür hâle gelir.
• Kart numarası: <div class="card-num" id="cardNumberDisplay">, girilen kart numarasını maskeleme ve biçimlendirme kurallarıyla birlikte gösterir.
• Kart detayları: İsim, son kullanma tarihi ve CVC bilgileri için üç ayrı blok kullanılır. Her biri <div class="value"> içerisinde yer alır ve kullanıcı veri girdikçe dinamik olarak güncellenir.

Formun Giriş Alanları: Erişilebilir ve Rehberlik Edici Yapı

HTML form alanları <form autocomplete="off" spellcheck="false"> etiketiyle tanımlanır. Bu form, kullanıcının kredi kartı bilgilerini girmesini sağlar. Her input alanı, HTML5’in sunduğu modern özelliklerle zenginleştirilmiştir. Alanların yapısı şu şekildedir:

<div class="form-group">
  <input type="text" id="cardName" maxlength="30" placeholder="Ad Soyad" autocomplete="cc-name" />
</div>
<div class="form-group">
  <input type="text" inputmode="numeric" id="cardNumber" maxlength="23" placeholder="Kart numarası" autocomplete="cc-number" />
</div>
<div class="form-row-short">
  <input type="text" id="cardExp" maxlength="5" placeholder="AA/YY" autocomplete="cc-exp" />
  <input type="text" id="cardCvc" maxlength="4" placeholder="CVC" autocomplete="cc-csc" />
</div>
Code language: HTML, XML (xml)

Form Alanlarının Özellikleri:

• Ad Soyad (cardName): Maksimum 30 karakter kabul eder. JavaScript, tüm harfleri otomatik olarak büyük harfe çevirir.
• Kart Numarası (cardNumber): Yalnızca sayısal giriş kabul eder. Sistem, girilen kart numarasını boşluklarla dört hanelik gruplara ayırarak biçimlendirir.
• Son Kullanma Tarihi (cardExp): “AA/YY” formatına uygun maskeleme uygulanır. Kod, ay ve yıl arasına otomatik olarak eğik çizgi ekler.
• CVC (cardCvc): Maksimum 4 haneli, yalnızca sayılardan oluşur. Tarayıcı, bu alanın değerini kartın ön yüzündeki alana yansıtır.

Semantik ve Erişilebilir Kodlama

Kredi kartı formu geliştirilirken yalnızca estetik değil, aynı zamanda erişilebilirlik de göz önünde bulundurulmalıdır. Her input alanı, kullanıcıya ne yapması gerektiğini açıkça belirten bir placeholder içeriğine sahiptir. Ayrıca autocomplete özellikleri sayesinde tarayıcı, uygun verileri önerebilir, bu da doldurma sürecini hızlandırır.

Ayrıca, spellcheck="false" özelliği ile yanlış isimlendirme hatalarının önüne geçilir. Bu, formun profesyonel bir şekilde çalışmasını destekler. Kullanıcının dikkatini dağıtan otomatik düzeltmeler bu sayede engellenir.

Yapının Avantajları

Bu HTML yapı, statik bir formdan çok daha fazlasını sunar. Kullanıcı etkileşimini temel alır ve etkileşimli bir deneyim sunar. Girdi alanlarıyla senkronize çalışan görsel kart, kullanıcıya ne yazdığını gösterir. Bu yaklaşım hem kullanıcıyı yönlendirir hem de hatalı girişlerin azalmasına yardımcı olur.

Kredi Kartı Formu CSS Tasarımı: Güven Veren Modern Bir Arayüz

Kredi kartı formu tasarımında görsellik, en az işlevsellik kadar önemli bir unsurdur. Kullanıcı ilk bakışta formun güvenilir olduğunu hissetmeli, kullanılan renkler ve alanlar arasında sezgisel bir geçiş deneyimi yaşamalıdır. CSS burada yalnızca biçim vermekle kalmaz, aynı zamanda kullanıcı psikolojisini de yönlendirir. Bu bölümde, kredi kartı formunun tüm CSS yapılarını detaylı olarak açıklıyorum.

Renk Paleti ve Temel Değişkenlerin Tanımlanması

Dosyanın en başında :root seçicisiyle global değişkenler tanımlanır. Bu değişkenler, temadaki tutarlılığı korur ve gerektiğinde tüm görünümü tek yerden güncelleme imkânı sunar:

:root {
  --primary: #444ef6;
  --bg: #ede0f7;
  --bg-image: linear-gradient(45deg,rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(to bottom, #ede0f7, #daceef, #c3bde7, #aaaedf, #8d9fd8);
  --card-bg: rgba(255,255,255,0.2);
  --text: #222;
  --text-muted: #7b7b7b;
  --border: rgba(255,255,255,0.1);
  --radius: 22px;
  --shadow: 0 0 80px rgba(0,0,0,0.2);
}
Code language: CSS (css)

• --primary: Odak renk. Tıklama ve seçim anlarında aktif olan ton.
• --card-bg: Kartın cam benzeri arka planı için yarı saydam beyaz.
• --shadow: Kart gibi alanların öne çıkması için kullanılan gölge efekti.

Kart Görselinin CSS ile Oluşturulması

Kredi kartı formu içinde yer alan .credit-card sınıfı, formun en dikkat çeken bileşenidir. Cam efekti ile şeffaf ve lüks bir hissiyat yaratılır. Kullanılan backdrop-filter özelliği, kartın arkasındaki öğeleri flu hâle getirerek ön planı netleştirir:

.credit-card {
  width: 410px;
  height: 210px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--card-bg);
  padding: 28px 32px 18px 32px;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
Code language: CSS (css)

Kart üzerinde yer alan metinler (isim, tarih, CVC) font-family: monospace veya inherit değerleriyle profesyonel ve okunabilir bir tipografi ile tasarlanır.

Logo ve Kart Bilgileri Düzeni

Kartın sağ üst köşesinde bulunan .card-logo alanı, kart numarasına göre Visa, Mastercard gibi logoları gösterir. Başlangıçta gizlidir, doğru veri girişi yapıldığında görünür hâle gelir:

.card-logo.hidden {
  opacity: 0;
  pointer-events: none;
}
Code language: CSS (css)

Kart numarası, isim ve diğer bilgiler .card-num, .card-details gibi sınıflarla hizalanır. Tasarımcı, yazı tipi olarak sabit genişlikli (monospace) bir font tercih eder. Bu, rakamların düzgün hizalanmasını sağlar.

Form Alanlarının Tasarımı: Modern ve Kullanıcı Dostu

Geliştiriciler, form alanlarını hem masaüstü hem de mobil cihazlarda rahatlıkla kullanılabilecek şekilde yapılandırabilir. Geniş padding, yumuşak kenarlıklar ve dikkatli renk seçimi, kullanıcıyı formu doldurmaya teşvik eder:

input {
  border-radius: 10px;
  padding: 14px 13px;
  font-size: 1.08em;
  border: 1.5px solid var(--border);
  background: #fafbfc;
  color: var(--text);
}
Code language: CSS (css)

Kullanıcı bir alana tıkladığında :focus ile kenarlık rengi değişir ve hafif bir kutu gölgesiyle alan belirginleşir. Bu görsel geri bildirim sayesinde kullanıcı hangi alanda olduğunu net şekilde anlar:

input:focus {
  border: 1.5px solid var(--primary);
  box-shadow: 0 2px 7px #444ef61c;
}
Code language: CSS (css)

Responsive (Mobil Uyumlu) Tasarım Detayları

Kredi kartı formu her cihazda kullanılabilir olmalıdır. Bu amaçla @media sorguları devreye girer. Ekran genişliği 500px’in altına düştüğünde kart ve form genişlikleri ekran boyutuna göre ayarlanır. Padding değerleri yeniden hesaplanır:

@media (max-width: 500px) {
  .credit-card, form {
    width: 98vw;
  }
}
Code language: CSS (css)

Ayrıca .form-row-short ile tarih ve CVC gibi kısa alanlar yan yana yerleştirilir ve aralarında boşluk bırakılır. Bu sayede form hem estetik hem de pratik bir kullanım sunar.

CSS ile kredi kartı formu yalnızca güzel görünmekle kalmaz; kullanıcıya güven verir, etkileşimi artırır ve hata oranını azaltır. Renk uyumu, font seçimi, boşluk dengesi ve responsive tasarım detayları kullanıcıyı formu gönül rahatlığıyla doldurmaya teşvik eder.

CSS’in ardından, formu işlevsel ve etkileşimli hâle getiren JavaScript bölümüyle analizimize devam ediyoruz. Orada kart tipi tespiti, maskeleme ve canlı veri güncelleme gibi özellikleri adım adım inceleyeceğim.

Kredi Kartı Formu JavaScript Kodları: Etkileşimli Deneyimin Temeli

Kredi kartı formu, sadece bilgi girişi yapılan bir yapı olmaktan çıkmış, artık kullanıcıya anlık geri bildirimler sunan, etkileşimli bir deneyim sunan bir araca dönüşmüştür. Bu etkileşimlerin tamamı JavaScript ile sağlanır. JavaScript, kullanıcıdan gelen verileri işler, doğrular, biçimlendirir ve DOM üzerinde anında yansıtır. Bu bölümde, kredi kartı formunun JavaScript altyapısını tüm detaylarıyla açıklıyorum.

Kart Tipi ve Logolar: Dinamik Tanımlama Sistemi

İlk adım olarak, formun hangi kart tipine ait olduğunu tespit edecek yapı tanımlanır. Algoritma, kart numarasının ilk birkaç hanesini analiz ederek doğru kart türünü belirler. Visa, Mastercard, American Express ve Discover logoları bir nesne içerisinde saklanır:

const logos = {
  mastercard: "https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg",
  visa: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg",
  amex: "https://upload.wikimedia.org/wikipedia/commons/f/fa/American_Express_logo_%282018%29.svg",
  discover: "https://upload.wikimedia.org/wikipedia/commons/5/57/Discover_Card_logo.svg"
};
Code language: JavaScript (javascript)

Sistem, bu nesneyi kullanarak her kart türü için doğru logoyu forma dinamik olarak yerleştirir. Bu yapı yalnızca görsel zenginlik katmaz; aynı zamanda kullanıcıya formun bilgilerini doğru tanıdığını hissettirerek güven sağlar.

Kart Tipi Tespiti: Regex ile Güçlü Doğrulama

detectCardType() fonksiyonu, kullanıcı tarafından girilen kart numarasının hangi tipe ait olduğunu tespit eder. Kod, düzenli ifadeleri (Regex) kullanarak bu işlemi gerçekleştirir.

function detectCardType(number) {
  number = number.replace(/\D/g, ''); // Sayı dışındaki karakterleri temizle
  if (/^5[1-5]/.test(number)) return 'mastercard';
  if (/^4/.test(number)) return 'visa';
  if (/^3[47]/.test(number)) return 'amex';
  if (/^6(?:011|5)/.test(number)) return 'discover';
  return '';
}
Code language: JavaScript (javascript)

• ^4: Visa kartlar 4 ile başlar.
• ^5[1-5]: Mastercard, 51-55 aralığındaki sayılarla başlar.
• ^3[47]: American Express kartlar 34 veya 37 ile başlar.
• ^6(?:011|5): Discover kartlar için özel tanımlama.

Bu fonksiyon, kredi kartı formuna kart tipine uygun işlemleri gerçekleştirme yeteneği kazandırır.

Kart Numarası Formatlama: Okunabilirlik ve Doğruluk

Kart numarasının biçimlendirilmesi, kullanıcı deneyimini doğrudan etkiler. Uzun ve bitişik bir numara yerine, her dört hanede bir boşluk olacak şekilde gösterim yapılır. formatCardNumber() fonksiyonu bu işlevi sağlar:

function formatCardNumber(number, type) {
  let n = number.replace(/\D/g, '');
  if (type === 'amex') {
    return n.replace(/^(\d{0,4})(\d{0,6})(\d{0,5}).*/, function(_, g1, g2, g3) {
      let out = g1;
      if(g2) out += ' ' + g2;
      if(g3) out += ' ' + g3;
      return out.trim();
    });
  } else {
    return n.replace(/(\d{4})/g, '$1 ').trim();
  }
}
Code language: JavaScript (javascript)

• American Express kartları 4-6-5 formatına sahiptir.
• Diğer kartlar 4-4-4-4 formatına göre biçimlenir.

Kullanıcı yazarken sistem bu boşlukları otomatik olarak ekler; böylece hem doğruluk artar hem de okunabilirlik gelişir.

DOM Etkileşimi: Canlı Veri Güncelleme

JavaScript ile kredi kartı formu, kullanıcının girdiği her veriyi formun üst bölümündeki kart görseline anlık olarak yansıtır. Bu özellik, formu hem şık hem de etkileşimli bir hâle getirir. Aşağıdaki kod parçacıkları, her input alanı için bu senkronizasyonu sağlar:

Kart Numarası:

cardNumberInput.addEventListener('input', function() {
  let val = cardNumberInput.value.replace(/\D/g, '');
  let type = detectCardType(val);
  cardNumberInput.value = formatCardNumber(val, type);

  if (val.length > 0 && type && logos[type]) {
    logoImg.src = logos[type];
    logoImg.alt = type.charAt(0).toUpperCase() + type.slice(1);
    cardLogo.classList.remove('hidden');
  } else {
    cardLogo.classList.add('hidden');
    logoImg.src = "";
    logoImg.alt = "";
  }

  let formatted = formatCardNumber(val, type);
  let mask = (type === "amex" ? "•••• •••••• •••••" : "•••• •••• •••• ••••");
  cardNumberDisplay.textContent = formatted + mask.slice(formatted.length);
});
Code language: JavaScript (javascript)

Kart Sahibi Adı:

cardNameInput.addEventListener('input', function() {
  let val = cardNameInput.value.trim().toUpperCase();
  if (val.length > 28) {
    val = val.slice(0, 28) + '…';
  }
  cardNameDisplay.textContent = val || "AD SOYAD";
});
Code language: JavaScript (javascript)

Son Kullanma Tarihi:

cardExpInput.addEventListener('input', function() {
  let val = cardExpInput.value.replace(/\D/g, '');
  if(val.length > 2) {
    val = val.slice(0,2) + '/' + val.slice(2,4);
  }
  cardExpInput.value = val;
  cardExpDisplay.textContent = val || "AA/YY";
});
Code language: JavaScript (javascript)

CVC:

cardCvcInput.addEventListener('input', function() {
  let val = cardCvcInput.value.replace(/\D/g,'');
  cardCvcInput.value = val.slice(0,4);
  cardCvcDisplay.textContent = val.replace(/./g, '•') || "•••";
});
Code language: JavaScript (javascript)

Bu yapı sayesinde, form bir simülasyon hâline gelir. Kullanıcı yazarken kartta birebir karşılığını görür.

Sayfa Yüklenince Formu Sıfırlama

Sistem, sayfa yüklendiğinde kredi kartı formundaki önceki verileri temizler ve karışıklığı önler. Bu, kullanıcıya her defasında boş bir form sunar:

window.addEventListener('DOMContentLoaded', function() {
  cardNumberInput.value = "";
  cardNameInput.value = "";
  cardExpInput.value = "";
  cardCvcInput.value = "";
  cardLogo.classList.add('hidden');
  logoImg.src = "";
  logoImg.alt = "";
});
Code language: JavaScript (javascript)

Bu işlemler, formun profesyonel bir yapıda olduğunu gösterir ve hatalı veri oluşumunu engeller.

Bu kapsamlı analizle görüyoruz ki, JavaScript yalnızca verileri almakla kalmaz; onları işler, kullanıcıya geri yansıtır, doğrular ve kullanıcı deneyimini üst seviyeye taşır. Kredi kartı formu, JavaScript sayesinde sadece teknik bir bileşen değil, kullanıcıyı yönlendiren bir rehber hâline gelir.

Kredi Kartı Formu Tam Kod Örneği: HTML, CSS ve JavaScript Bir Arada

Tüm analiz boyunca ayrı ayrı incelediğimiz HTML, CSS ve JavaScript bileşenlerini şimdi tek bir dosyada birleştiriyoruz. Aşağıdaki örnek, hem masaüstü hem mobil cihazlarla uyumlu, güven veren ve kullanıcı dostu bir kredi kartı formu oluşturmak isteyen geliştiriciler için idealdir.

Tam Kod Yapısı

Aşağıda tüm bölümler bir arada sunulmuştur. Dosyanızı .html uzantısı ile kaydedip doğrudan çalıştırabilirsiniz:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Kredi Kartı Formu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --primary: #444ef6;
      --bg: #f7f8fa;
      --card-bg: rgba(255,255,255,0.2);
      --text: #222;
      --text-muted: #7b7b7b;
      --border: rgba(255,255,255,0.1);
      --radius: 22px;
      --shadow: 0 0 80px rgba(0,0,0,0.2);
    }
    body {
      background-color: var(--bg);
      font-family: 'Inter', 'Segoe UI', sans-serif;
    }
    body::before {
      content: "";
      position: fixed;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: url('https://www-static-sites.operacdn.com/wp-content/uploads/sites/6/2023/10/Gradient-2.webp') center center / cover no-repeat;
      opacity: 0.5;
      pointer-events: none;
    }
    .credit-card {
      width: 410px;
      height: 210px;
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px 32px 18px 32px;
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);
      position: relative;
      margin-bottom: 20px;
    }
    .card-logo {
      position: absolute;
      top: 24px;
      right: 32px;
      width: 64px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 2;
    }
    .card-logo.hidden {
      opacity: 0;
      pointer-events: none;
    }
    .card-logo img {
      width: 64px;
      object-fit: contain;
    }
    .card-num-container {
      margin-top: 16px;
      margin-bottom: 14px;
    }
    .card-num {
      letter-spacing: 2.3px;
      font-size: 1.13em;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      min-height: 30px;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
    }
    .card-details {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-top: 10px;
    }
    .card-details .label {
      font-size: 0.83em;
      color: var(--text-muted);
      font-weight: 500;
      margin-bottom: 2.5px;
      opacity: 0.68;
    }
    .card-details .value {
      font-size: 1.09em;
      letter-spacing: 1px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    form {
      width: 410px;
      max-width: 98vw;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }
    input {
      border-radius: 10px;
      border: 1.5px solid var(--border);
      padding: 14px 13px;
      font-size: 1.08em;
      background: #fafbfc;
      color: var(--text);
      box-sizing: border-box;
    }
    input:focus {
      border: 1.5px solid var(--primary);
      background: #fff;
      box-shadow: 0 2px 7px #444ef61c;
    }
    input::placeholder {
      color: #b7b8c3;
    }
    .form-row-short {
      display: flex;
      gap: 12px;
    }
    @media (max-width: 500px) {
      .credit-card, form {
        width: 98vw;
      }
      .credit-card { padding: 7vw 4vw 4vw 4vw; }
      .card-logo { right: 7vw; }
    }
  </style>
</head>
<body>
  <div class="credit-card" id="creditCard">
    <div class="card-logo hidden" id="cardLogo">
      <img id="logoImg" src="" alt="Kart Logo" />
    </div>
    <div class="card-num-container">
      <div class="card-num" id="cardNumberDisplay">•••• •••• •••• ••••</div>
    </div>
    <div class="card-details">
      <div>
        <div class="label">AD SOYAD</div>
        <div class="value" id="cardNameDisplay">AD SOYAD</div>
      </div>
      <div>
        <div class="label">SON KULLANMA</div>
        <div class="value" id="cardExpDisplay">AA/YY</div>
      </div>
      <div>
        <div class="label">CVC</div>
        <div class="value" id="cardCvcDisplay">•••</div>
      </div>
    </div>
  </div>
  <form autocomplete="off" spellcheck="false">
    <input type="text" id="cardName" maxlength="30" placeholder="Ad Soyad" autocomplete="cc-name" />
    <input type="text" inputmode="numeric" id="cardNumber" maxlength="23" placeholder="Kart numarası" autocomplete="cc-number" />
    <div class="form-row-short">
      <input type="text" id="cardExp" maxlength="5" placeholder="AA/YY" autocomplete="cc-exp" />
      <input type="text" id="cardCvc" maxlength="4" placeholder="CVC" autocomplete="cc-csc" />
    </div>
  </form>
  <script>
    const logos = {
      mastercard: "https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg",
      visa: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg",
      amex: "https://upload.wikimedia.org/wikipedia/commons/f/fa/American_Express_logo_%282018%29.svg",
      discover: "https://upload.wikimedia.org/wikipedia/commons/5/57/Discover_Card_logo.svg"
    };

    function detectCardType(number) {
      number = number.replace(/\D/g, '');
      if (/^5[1-5]/.test(number)) return 'mastercard';
      if (/^4/.test(number)) return 'visa';
      if (/^3[47]/.test(number)) return 'amex';
      if (/^6(?:011|5)/.test(number)) return 'discover';
      return '';
    }

    function formatCardNumber(number, type) {
      let n = number.replace(/\D/g, '');
      if (type === 'amex') {
        return n.replace(/^(\d{0,4})(\d{0,6})(\d{0,5}).*/, function(_, g1, g2, g3) {
          let out = g1;
          if(g2) out += ' ' + g2;
          if(g3) out += ' ' + g3;
          return out.trim();
        });
      } else {
        return n.replace(/(\d{4})/g, '$1 ').trim();
      }
    }

    const cardNumberInput = document.getElementById('cardNumber');
    const cardNameInput = document.getElementById('cardName');
    const cardExpInput = document.getElementById('cardExp');
    const cardCvcInput = document.getElementById('cardCvc');
    const cardNumberDisplay = document.getElementById('cardNumberDisplay');
    const cardNameDisplay = document.getElementById('cardNameDisplay');
    const cardExpDisplay = document.getElementById('cardExpDisplay');
    const cardCvcDisplay = document.getElementById('cardCvcDisplay');
    const logoImg = document.getElementById('logoImg');
    const cardLogo = document.getElementById('cardLogo');

    cardNumberInput.addEventListener('input', function() {
      let val = cardNumberInput.value.replace(/\D/g, '');
      let type = detectCardType(val);
      cardNumberInput.value = formatCardNumber(val, type);
      if (val.length > 0 && type && logos[type]) {
        logoImg.src = logos[type];
        logoImg.alt = type.charAt(0).toUpperCase() + type.slice(1);
        cardLogo.classList.remove('hidden');
      } else {
        cardLogo.classList.add('hidden');
        logoImg.src = "";
        logoImg.alt = "";
      }
      let formatted = formatCardNumber(val, type);
      let mask = (type === "amex" ? "•••• •••••• •••••" : "•••• •••• •••• ••••");
      cardNumberDisplay.textContent = formatted + mask.slice(formatted.length);
    });

    cardNameInput.addEventListener('input', function() {
      let val = cardNameInput.value.trim().toUpperCase();
      if (val.length > 28) {
        val = val.slice(0, 28) + '…';
      }
      cardNameDisplay.textContent = val || "AD SOYAD";
    });

    cardExpInput.addEventListener('input', function() {
      let val = cardExpInput.value.replace(/\D/g, '');
      if(val.length > 2) {
        val = val.slice(0,2) + '/' + val.slice(2,4);
      }
      cardExpInput.value = val;
      cardExpDisplay.textContent = val || "AA/YY";
    });

    cardCvcInput.addEventListener('input', function() {
      let val = cardCvcInput.value.replace(/\D/g,'');
      cardCvcInput.value = val.slice(0,4);
      cardCvcDisplay.textContent = val.replace(/./g, '•') || "•••";
    });

    window.addEventListener('DOMContentLoaded', function() {
      cardNumberInput.value = "";
      cardNameInput.value = "";
      cardExpInput.value = "";
      cardCvcInput.value = "";
      cardLogo.classList.add('hidden');
      logoImg.src = "";
      logoImg.alt = "";
    });
  </script>
</body>
</html>
Code language: HTML, XML (xml)

Bu örnek, modern bir kredi kartı formu oluşturmak isteyen geliştiriciler için eksiksiz bir başlangıç noktası sunar. Tüm yapılar hem kullanıcı dostu hem de geliştirici açısından esnek olacak biçimde tasarlanmıştır. Geliştirici, formu kendi projesine kolayca entegre eder veya ihtiyaçlarına göre özelleştirir.

Daha önce hazırladığım HTML, CSS ve JavaScript ile Mobil Uyumlu Minimal Takvim Uygulaması ve Etkileşimli Arayüzler İçin Mıknatıs Etkili Buton Tasarımı ve Geliştirme Rehberi yazılarıma da göz atabilirsiniz.