HTML Formu Örneği: Giriş Formu ve Basit Doğrulama Teknikleri

Web geliştirme alanında HTML Form Örnekleri, kullanıcıdan veri toplamanın temel yollarından biridir. Özellikle html form örnekleri içinde sıkça kullanılan giriş formları, kullanıcıların siteye kayıt olması, giriş yapması ya da farklı işlemler için veri sağlaması açısından kritik öneme sahiptir. Bu yazıda, giriş formlarındaki input elementleri html yapısı ve form validation örnekleri ile client-side doğrulama yöntemlerini detaylı bir şekilde inceleyeceğiz.

HTML Formlarının Temel Yapısı

Bir HTML formu, <form> etiketi ile başlar ve içinde farklı türde input elementleri html kullanılır. Giriş formlarında genellikle kullanıcı adı, şifre, e-posta gibi alanlar bulunur. Basit bir giriş formu örneği şu şekildedir:

<form action="/login" method="post">
  <label for="username">Kullanıcı Adı:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Giriş Yap</button>
</form>

Bu formda kullanıcı adı ve şifre alanları zorunlu kılınmıştır. required özniteliği, basit bir client-side doğrulama sağlar.

Form Validation Örnekleri ve Önemi

Form validation örnekleri, kullanıcıdan alınan verinin doğru ve eksiksiz olmasını sağlamak amacıyla kullanılır. Doğrulama işlemi iki şekilde yapılabilir:

• Client-side doğrulama: Kullanıcının formu göndermeden önce tarayıcıda yapılan kontroller.
• Server-side doğrulama: Form verisi sunucuya ulaştıktan sonra yapılan doğrulamalar.

Client-side doğrulama, kullanıcı deneyimini artırır ve gereksiz sunucu yükünü azaltır. Ancak, güvenlik için mutlaka server-side doğrulama da yapılmalıdır.

Basit Client-Side Doğrulama Örneği

HTML5 ile gelen bazı input türleri ve öznitelikler, temel doğrulamayı kolaylaştırır:

• type="email": E-posta formatında giriş yapılmasını sağlar.
• pattern="regex": Belirli bir desenle eşleşme şartı getirir.
• minlength ve maxlength: Karakter sınırı koyar.

Aşağıda, e-posta alanı ve parola için basit bir doğrulama örneği bulunmaktadır:

<form action="/register" method="post">
  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Şifre (en az 6 karakter):</label>
  <input type="password" id="password" name="password" minlength="6" required>
  <br>
  <button type="submit">Kayıt Ol</button>
</form>

JavaScript ile Gelişmiş Client-Side Doğrulama

<form id="loginForm">
  <label for="username">Kullanıcı Adı:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Giriş Yap</button>
</form>

<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();

  if (username.length < 3) {
    alert('Kullanıcı adı en az 3 karakter olmalıdır.');
    event.preventDefault();
    return;
  }

  if (password.length < 6) {
    alert('Şifre en az 6 karakter olmalıdır.');
    event.preventDefault();
    return;
  }
});
</script>