Form Güvenliği ve Doğrulama (Validation) Teknikleri

HTML’de Güvenli ve Kullanıcı Dostu Formlar Oluşturma Rehberi Formlar, bir web sitesinin kullanıcı ile etkileşim kurduğu en kritik alanlardan biridir. İster bir üyelik kaydı, ister bir yorum alanı ya da bir iletişim formu olsun — form güvenliği ve doğrulama (validation) yapılmadığında site hem güvenlik hem de kullanıcı deneyimi açısından ciddi risk taşır. Bu yazıda, HTML’de

Mehmet Ali Uçar tarafından
yayınlandı
3 dk 49 sn 3 dk 49 sn okuma süresi 12
Gemini Generated Image V1cjouv1cjouv1cj 1 Maykairos
Google News Google News Flipboard Flipboard Sesli oku Yazıyı beğen Favorilere Ekle 0 Yorumlar
Daha fazla

HTML’de Güvenli ve Kullanıcı Dostu Formlar Oluşturma Rehberi

Formlar, bir web sitesinin kullanıcı ile etkileşim kurduğu en kritik alanlardan biridir. İster bir üyelik kaydı, ister bir yorum alanı ya da bir iletişim formu olsun — form güvenliği ve doğrulama (validation) yapılmadığında site hem güvenlik hem de kullanıcı deneyimi açısından ciddi risk taşır.

Bu yazıda, HTML’de güvenli, hızlı ve erişilebilir form yapısını nasıl kurabileceğini, doğrulama tekniklerini ve yapılması gereken güvenlik önlemlerini adım adım öğreneceksin.

 1. Temel HTML Form Yapısı

Bir formun iskeleti genellikle şu şekildedir:

<form action="/gonder" method="POST">
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required><label for=“password”>Şifre:</label>
<input type=“password” id=“password” name=“password” minlength=“6” required><button type=“submit”>Gönder</button>
</form>

Burada dikkat etmen gereken bazı temel noktalar:

  • method="POST" kullan, çünkü GET parametreleri adres çubuğunda görünebilir (güvenlik açığı).

  • required, minlength, type gibi HTML5 doğrulama özellikleri kullan.

  • <label> etiketleri form öğeleriyle ilişkilendirilmiş olmalı (erişilebilirlik için).

 2. HTML5 Doğrulama Özellikleri

HTML5 ile gelen input türleri ve öznitelikler, tarayıcı düzeyinde otomatik doğrulama sağlar.
Örneklerle bakalım 👇

 E-posta Alanı

<input type="email" required placeholder="ornek@maykairos.com">

Tarayıcı otomatik olarak geçersiz e-posta biçimlerini reddeder.

 Şifre Alanı

<input type="password" minlength="8" required>

Kullanıcının en az 8 karakter girmesini zorunlu kılar.

 Telefon Numarası

<input type="tel" pattern="[0-9]{10}" title="10 haneli bir telefon numarası giriniz">

Sadece 10 haneli sayısal girişleri kabul eder.

 URL Alanı

<input type="url" placeholder="https://www.maykairos.com" required>

 Tarih Alanı

<input type="date" min="2024-01-01" max="2026-12-31">

 3. Custom (Özel) Validation Mesajları

Bazı durumlarda, tarayıcının gösterdiği varsayılan hata mesajları yeterli olmaz.
Kendi hata mesajını eklemek için setCustomValidity() metodunu kullanabilirsin 👇

<input id="pass" type="password" required minlength="6">
<script>
const pass = document.getElementById('pass');
pass.addEventListener('input', () => {
if (pass.value.length < 6) {
pass.setCustomValidity('Şifreniz en az 6 karakter olmalıdır.');
} else {
pass.setCustomValidity('');
}
});
</script>

Bu şekilde kullanıcıya daha anlaşılır, Türkçe hata mesajı gösterebilirsin.

 4. Form Güvenliği: HTML Tarafında Alınabilecek Önlemler

HTML tek başına tam güvenlik sağlamaz, ancak temel seviyede korunma sağlar.
İleri güvenlik için sunucu tarafında da işlem yapılmalıdır.
Yine de HTML düzeyinde şu önlemler önemlidir 👇

 1. autocomplete Özelliğini Kontrol Et

Kritik alanlarda otomatik doldurmayı devre dışı bırak:

<input type="password" autocomplete="off">

 2. Gizli Alanları (hidden input) Dikkatli Kullan

<input type="hidden" name="role" value="user">

Bu alanlar kullanıcı tarafından değiştirilebilir, o yüzden sadece ön izleme veya yönlendirme için kullan.

 3. CSRF ve XSS’ten Korun

HTML formunun gönderildiği sunucuda:

  • CSRF token kullan (ör. <input type="hidden" name="token" value="xyz123">)

  • Girdi verilerini sanitize et (özellikle yorum, isim, e-posta gibi alanlarda).

 4. HTTPS Kullan

Formlarda kişisel veri toplanıyorsa SSL sertifikası şarttır.
Kullanıcı verileri şifreli aktarılır ve güvenlik ihlalleri önlenir.

 5. Kullanıcı Deneyimi (UX) İyileştirmeleri

Form güvenliği kadar, kullanıcı dostu olması da önemlidir.
Küçük detaylarla büyük fark yaratabilirsin 👇

  • Alan ipuçları (placeholder) ekle: kullanıcı ne gireceğini bilsin.

  • Doğrulama sırasında canlı geri bildirim ver:

    <input type="text" id="name" required>
    <small id="feedback"></small>
    <script>
    const name = document.getElementById('name');
    const feedback = document.getElementById('feedback');
    name.addEventListener('input', () => {
    if (name.value.length < 3) {
    feedback.textContent = "İsim en az 3 karakter olmalı.";
    feedback.style.color = "red";
    } else {
    feedback.textContent = "Geçerli 👍";
    feedback.style.color = "green";
    }
    });
    </script>

 6. Erişilebilirlik (a11y) ve Form Etkileşimi

Formlarda erişilebilirlik unutulmamalıdır:

  • Her input için <label> tanımla.

  • Gerekirse aria-label veya aria-describedby kullan.

  • Hata mesajlarını screen reader’ların okuyabileceği şekilde tanımla.

 7. Test Et ve Geliştir

Formlarını test etmek için:

  • Chrome DevTools → Form Validation panelini kullan,

  • Lighthouse raporu ile erişilebilirlik + güvenlik skorlarını ölç,

  • Google reCAPTCHA ekleyerek bot gönderimlerini engelle.

Yazar Hakkında

Mehmet Ali Uçar 243 yazı
Tüm yazıları

Benzer Yazılar

PHP ile RESTful API Geliştirme 4 dk
Yazılım

PHP ile RESTful API Geliştirme
Veri Yapıları Nedir? Yazılım Öğrenenler İçin Temel Rehber 4 dk
Yazılım

Veri Yapıları Nedir? Yazılım Öğrenenler İçin Temel Rehber
Açık Kaynak Ekonomisi Paylaşarak Güçlenmek 4 dk
Yazılım

Açık Kaynak Ekonomisi Paylaşarak Güçlenmek

Bir Cevap Yaz

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir.

0/30 karakter